fix: remove useState and useEffect from filters dropdowns

taskany-inc · Apr 20, 2023 · a340f1f · a340f1f
1 parent e75093d
commit a340f1f
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 59 deletions.
diff --git a/graphql/schema.graphql b/graphql/schema.graphql
@@ -324,7 +324,6 @@ type Query {
   projects: [Project]
   settings: Settings
   tagCompletion(query: String!, sortBy: SortOrder): [Tag]
-  userFilters: [Filter]
   userGoals(data: UserGoalsInput!): UserGoalsOutput
   users(sortBy: SortOrder): [User]
 }

diff --git a/src/components/EstimateFilterDropdown.tsx b/src/components/EstimateFilterDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Dropdown, MenuItem } from '@taskany/bricks';
 
 import { Estimate } from '../../graphql/@generated/genql';
@@ -20,23 +20,17 @@ export const EstimateFilterDropdown: React.FC<EstimateFilterDropdownProps> = Rea
     HTMLDivElement,
     EstimateFilterDropdownProps
 >(({ text, estimates, value, disabled, onChange }, ref) => {
-    const [selected, setSelected] = useState(new Set(value));
-
-    useEffect(() => {
-        setSelected(new Set(value));
-    }, [value]);
-
     const onEstimateClick = useCallback(
         (e: Estimate) => {
+            const selected = new Set(value);
             selected.has(estimateToString(e))
                 ? selected.delete(estimateToString(e))
                 : selected.add(estimateToString(e));
             const newSelected = new Set(selected);
-            setSelected(newSelected);
 
             onChange?.(Array.from(newSelected));
         },
-        [onChange, selected],
+        [onChange, value],
     );
 
     return (
@@ -50,7 +44,7 @@ export const EstimateFilterDropdown: React.FC<EstimateFilterDropdownProps> = Rea
             renderTrigger={(props) => (
                 <FiltersMenuItem
                     ref={props.ref}
-                    active={Boolean(Array.from(selected).length)}
+                    active={Boolean(value?.length)}
                     disabled={props.disabled}
                     onClick={props.onClick}
                 >
@@ -61,7 +55,7 @@ export const EstimateFilterDropdown: React.FC<EstimateFilterDropdownProps> = Rea
                 <MenuItem
                     ghost
                     key={estimateToString(props.item)}
-                    selected={selected.has(estimateToString(props.item))}
+                    selected={value?.includes(estimateToString(props.item))}
                     onClick={props.onClick}
                 >
                     {estimateToString(props.item)}

diff --git a/src/components/PriorityFilterDropdown.tsx b/src/components/PriorityFilterDropdown.tsx
@@ -1,7 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Dropdown } from '@taskany/bricks';
 
-import { usePageContext } from '../hooks/usePageContext';
 import { Priority, priorityColorsMap } from '../types/priority';
 import { trPriority } from '../i18n/priority';
 
@@ -19,18 +18,15 @@ interface PriorityFilterDropdownProps {
 
 export const PriorityFilterDropdown = React.forwardRef<HTMLDivElement, PriorityFilterDropdownProps>(
     ({ text, priority, value, disabled, onChange }, ref) => {
-        const { themeId } = usePageContext();
-        const [selected, setSelected] = useState<Set<string>>(new Set(value));
-
         const onPriorityClick = useCallback(
             (p: Priority) => {
+                const selected = new Set(value);
                 selected.has(p) ? selected.delete(p) : selected.add(p);
                 const newSelected = new Set(selected);
-                setSelected(newSelected);
 
                 onChange?.(Array.from(newSelected));
             },
-            [onChange, selected],
+            [onChange, value],
         );
 
         return (
@@ -44,7 +40,7 @@ export const PriorityFilterDropdown = React.forwardRef<HTMLDivElement, PriorityF
                 renderTrigger={(props) => (
                     <FiltersMenuItem
                         ref={props.ref}
-                        active={Boolean(Array.from(selected).length)}
+                        active={Boolean(value?.length)}
                         disabled={props.disabled}
                         onClick={props.onClick}
                     >
@@ -55,7 +51,7 @@ export const PriorityFilterDropdown = React.forwardRef<HTMLDivElement, PriorityF
                     <ColorizedMenuItem
                         key={props.item}
                         hue={priorityColorsMap[props.item as Priority]}
-                        checked={selected?.has(props.item)}
+                        checked={value?.includes(props.item)}
                         onClick={props.onClick}
                     >
                         {trPriority(props.item as Priority)}

diff --git a/src/components/ProjectFilterDropdown.tsx b/src/components/ProjectFilterDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Dropdown, MenuItem } from '@taskany/bricks';
 
 import { Project } from '../../graphql/@generated/genql';
@@ -18,21 +18,15 @@ export const ProjectFilterDropdown: React.FC<ProjectFilterDropdownProps> = React
     HTMLDivElement,
     ProjectFilterDropdownProps
 >(({ text, projects, value, disabled, onChange }, ref) => {
-    const [selected, setSelected] = useState(new Set(value));
-
-    useEffect(() => {
-        setSelected(new Set(value));
-    }, [value]);
-
     const onProjectClick = useCallback(
         (p: Project) => {
+            const selected = new Set(value);
             selected.has(p.id) ? selected.delete(p.id) : selected.add(p.id);
             const newSelected = new Set(selected);
-            setSelected(newSelected);
 
             onChange?.(Array.from(newSelected));
         },
-        [onChange, selected],
+        [onChange, value],
     );
 
     return (
@@ -46,15 +40,15 @@ export const ProjectFilterDropdown: React.FC<ProjectFilterDropdownProps> = React
             renderTrigger={(props) => (
                 <FiltersMenuItem
                     ref={props.ref}
-                    active={Boolean(Array.from(selected).length)}
+                    active={Boolean(value?.length)}
                     disabled={props.disabled}
                     onClick={props.onClick}
                 >
                     {props.text}
                 </FiltersMenuItem>
             )}
             renderItem={(props) => (
-                <MenuItem ghost key={props.item.id} selected={selected.has(props.item.id)} onClick={props.onClick}>
+                <MenuItem ghost key={props.item.id} selected={value?.includes(props.item.id)} onClick={props.onClick}>
                     {props.item.title}
                 </MenuItem>
             )}

diff --git a/src/components/StateFilterDropdown.tsx b/src/components/StateFilterDropdown.tsx
@@ -1,8 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Dropdown } from '@taskany/bricks';
 
 import { State } from '../../graphql/@generated/genql';
-import { usePageContext } from '../hooks/usePageContext';
 
 import { FiltersMenuItem } from './FiltersMenuItem';
 import { ColorizedMenuItem } from './ColorizedMenuItem';
@@ -18,18 +17,15 @@ interface StateFilterDropdownProps {
 
 export const StateFilterDropdown = React.forwardRef<HTMLDivElement, StateFilterDropdownProps>(
     ({ text, states, value, disabled, onChange }, ref) => {
-        const { themeId } = usePageContext();
-        const [selected, setSelected] = useState<Set<string>>(new Set(value));
-
         const onStateClick = useCallback(
             (s: State) => {
+                const selected = new Set(value);
                 selected.has(s.id) ? selected.delete(s.id) : selected.add(s.id);
                 const newSelected = new Set(selected);
-                setSelected(newSelected);
 
                 onChange?.(Array.from(newSelected));
             },
-            [onChange, selected],
+            [onChange, value],
         );
 
         return (
@@ -43,7 +39,7 @@ export const StateFilterDropdown = React.forwardRef<HTMLDivElement, StateFilterD
                 renderTrigger={(props) => (
                     <FiltersMenuItem
                         ref={props.ref}
-                        active={Boolean(Array.from(selected).length)}
+                        active={Boolean(value?.length)}
                         disabled={props.disabled}
                         onClick={props.onClick}
                     >
@@ -54,7 +50,7 @@ export const StateFilterDropdown = React.forwardRef<HTMLDivElement, StateFilterD
                     <ColorizedMenuItem
                         key={props.item.id}
                         hue={props.item.hue}
-                        checked={selected?.has(props.item.id)}
+                        checked={value?.includes(props.item.id)}
                         onClick={props.onClick}
                     >
                         {props.item.title}

diff --git a/src/components/TagsFilterDropdown.tsx b/src/components/TagsFilterDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Dropdown, MenuItem } from '@taskany/bricks';
 
 import { Tag as TagModel } from '../../graphql/@generated/genql';
@@ -18,21 +18,15 @@ export const TagsFilterDropdown: React.FC<TagsFilterDropdownProps> = React.forwa
     HTMLDivElement,
     TagsFilterDropdownProps
 >(({ text, tags, value, disabled, onChange }, ref) => {
-    const [selected, setSelected] = useState(new Set(value));
-
-    useEffect(() => {
-        setSelected(new Set(value));
-    }, [value]);
-
     const onTagClick = useCallback(
         (t: TagModel) => {
+            const selected = new Set(value);
             selected.has(t.id) ? selected.delete(t.id) : selected.add(t.id);
             const newSelected = new Set(selected);
-            setSelected(newSelected);
 
             onChange?.(Array.from(newSelected));
         },
-        [onChange, selected],
+        [onChange, value],
     );
 
     return (
@@ -46,15 +40,15 @@ export const TagsFilterDropdown: React.FC<TagsFilterDropdownProps> = React.forwa
             renderTrigger={(props) => (
                 <FiltersMenuItem
                     ref={props.ref}
-                    active={Boolean(Array.from(selected).length)}
+                    active={Boolean(value?.length)}
                     disabled={props.disabled}
                     onClick={props.onClick}
                 >
                     {props.text}
                 </FiltersMenuItem>
             )}
             renderItem={(props) => (
-                <MenuItem ghost key={props.item.id} selected={selected.has(props.item.id)} onClick={props.onClick}>
+                <MenuItem ghost key={props.item.id} selected={value?.includes(props.item.id)} onClick={props.onClick}>
                     {props.item.title}
                 </MenuItem>
             )}

diff --git a/src/components/UserFilterDropdown.tsx b/src/components/UserFilterDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { Dropdown } from '@taskany/bricks';
 
 import { Activity } from '../../graphql/@generated/genql';
@@ -17,17 +17,15 @@ interface UserFilterDropdownProps {
 
 export const UserFilterDropdown = React.forwardRef<HTMLDivElement, UserFilterDropdownProps>(
     ({ text, activity, value, disabled, onChange }, ref) => {
-        const [selected, setSelected] = useState<Set<string>>(new Set(value));
-
         const onUserClick = useCallback(
             (a: Activity) => {
+                const selected = new Set(value);
                 selected.has(a.id) ? selected.delete(a.id) : selected.add(a.id);
                 const newSelected = new Set(selected);
-                setSelected(newSelected);
 
                 onChange?.(Array.from(newSelected));
             },
-            [onChange, selected],
+            [onChange, value],
         );
 
         return (
@@ -41,7 +39,7 @@ export const UserFilterDropdown = React.forwardRef<HTMLDivElement, UserFilterDro
                 renderTrigger={(props) => (
                     <FiltersMenuItem
                         ref={props.ref}
-                        active={Boolean(Array.from(selected).length)}
+                        active={Boolean(value?.length)}
                         disabled={props.disabled}
                         onClick={props.onClick}
                     >
@@ -54,7 +52,7 @@ export const UserFilterDropdown = React.forwardRef<HTMLDivElement, UserFilterDro
                         email={props.item.user?.email || props.item.ghost?.email}
                         name={props.item.user?.name}
                         image={props.item.user?.image}
-                        checked={selected.has(props.item.id)}
+                        checked={value?.includes(props.item.id)}
                         onClick={props.onClick}
                     />
                 )}