fix(GoalDependencies): refactor form component state

taskany-inc · Jul 6, 2023 · 0548dfe · 0548dfe
1 parent 26a64cb
commit 0548dfe
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 72 deletions.
diff --git a/src/components/GoalDependencyForm/GoalDependencyForm.tsx b/src/components/GoalDependencyForm/GoalDependencyForm.tsx
@@ -36,7 +36,7 @@ interface GoalDependencyAddFormProps {
 
 export const GoalDependencyAddForm: React.FC<GoalDependencyAddFormProps> = ({ goalId, kind, isEmpty, onSubmit }) => {
     const [selected, setSelected] = useState<GoalByIdReturnType | null>(null);
-    const [query, setQuery] = useState(['']);
+    const [query, setQuery] = useState('');
     const {
         register,
         handleSubmit,
@@ -55,7 +55,7 @@ export const GoalDependencyAddForm: React.FC<GoalDependencyAddFormProps> = ({ go
 
     const resetFormHandler = useCallback(() => {
         setSelected(null);
-        setQuery(['']);
+        setQuery('');
 
         reset({
             relation: { id: '' },
@@ -71,19 +71,17 @@ export const GoalDependencyAddForm: React.FC<GoalDependencyAddFormProps> = ({ go
     }, [selected, setValue]);
 
     const handleInputChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
-        setQuery([event.target.value]);
+        setQuery(event.target.value);
     }, []);
 
     const handleGoalSelect = useCallback((goal: NonNullable<GoalByIdReturnType>) => {
         setSelected(goal);
-        setQuery([goal.projectId!, String(goal.scopeId)]);
+        setQuery(`${goal.projectId!}-${goal.scopeId}`);
     }, []);
 
     useEffect(() => {
-        if (selected) {
-            if (query[0] !== selected.projectId || query[1] !== String(selected.scopeId)) {
-                resetFormHandler();
-            }
+        if (selected && query !== `${selected.projectId!}-${selected.scopeId}`) {
+            resetFormHandler();
         }
     }, [query, selected, resetFormHandler]);
 
@@ -109,20 +107,16 @@ export const GoalDependencyAddForm: React.FC<GoalDependencyAddFormProps> = ({ go
             onSubmit={handleSubmit(onSubmit)}
             onReset={resetFormHandler}
         >
-            <GoalSuggest
-                renderTrigger={() => (
-                    <StyledFormInput
-                        autoFocus
-                        autoComplete="off"
-                        value={query.join('-')}
-                        onChange={handleInputChange}
-                        brick="right"
-                        error={errors.relation?.id}
-                    />
-                )}
-                value={query.join('-')}
-                onChange={handleGoalSelect}
-            />
+            <GoalSuggest value={query} onChange={handleGoalSelect}>
+                <StyledFormInput
+                    autoFocus
+                    autoComplete="off"
+                    value={query}
+                    onChange={handleInputChange}
+                    brick="right"
+                    error={errors.relation?.id}
+                />
+            </GoalSuggest>
             <Button text={tr('Add')} brick="left" type="submit" view="primary" outline />
             <input type="hidden" {...register('relation.id')} />
             <input type="hidden" {...register('id')} />

diff --git a/src/components/GoalSuggest.tsx b/src/components/GoalSuggest.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { ComboBox, GoalIcon, nullable } from '@taskany/bricks';
 import { backgroundColor } from '@taskany/colors';
@@ -20,7 +20,7 @@ const StyledTable = styled(Table)`
 `;
 
 interface GoalSuggestProps {
-    renderTrigger: () => React.ReactElement;
+    children: React.ReactElement;
     onChange: (val: any) => void;
     value?: string;
 }
@@ -82,55 +82,53 @@ const GoalSuggestItem: React.FC<GoalSuggestItemProps> = ({
     );
 };
 
-export const GoalSuggest = forwardRef<HTMLDivElement, GoalSuggestProps>(
-    ({ renderTrigger, onChange, value = '' }, ref) => {
-        const [visible, setVisible] = useState(false);
-        const [selected, setSelected] = useState<GoalByIdReturnType | null>(null);
+export const GoalSuggest = forwardRef<HTMLDivElement, GoalSuggestProps>(({ onChange, value = '', children }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [selected, setSelected] = useState<GoalByIdReturnType | null>(null);
 
-        const { data: items = [] } = trpc.goal.suggestions.useQuery(
-            { input: value, limit: 5 },
-            {
-                staleTime: 0,
-                cacheTime: 0,
-            },
-        );
+    const { data: items = [] } = trpc.goal.suggestions.useQuery(
+        { input: value, limit: 5 },
+        {
+            staleTime: 0,
+            cacheTime: 0,
+        },
+    );
 
-        useEffect(() => {
-            if (items.length > 0) {
-                setVisible(true);
-            } else {
-                setVisible(false);
-            }
-        }, [items]);
+    useEffect(() => {
+        if (items.length > 0) {
+            setVisible(true);
+        } else {
+            setVisible(false);
+        }
+    }, [items]);
 
-        useEffect(() => {
-            if (selected) {
-                onChange(selected);
-            }
-        }, [selected, onChange]);
+    useEffect(() => {
+        if (selected) {
+            onChange(selected);
+        }
+    }, [selected, onChange]);
 
-        return (
-            <ComboBox
-                ref={ref}
-                onChange={setSelected}
-                items={items}
-                visible={visible}
-                renderInput={renderTrigger}
-                renderItem={({ item, cursor, index, onClick }) => (
-                    <GoalSuggestItem
-                        key={item.id}
-                        focused={cursor === index}
-                        onClick={onClick}
-                        projectId={item.projectId}
-                        title={item.title}
-                        state={item.state}
-                        issuer={item.activity}
-                        owner={item.owner}
-                        estimate={item._lastEstimate}
-                    />
-                )}
-                renderItems={(children) => <StyledTable columns={6}>{children as React.ReactNode}</StyledTable>}
-            />
-        );
-    },
-);
+    return (
+        <ComboBox
+            ref={ref}
+            onChange={setSelected}
+            items={items}
+            visible={visible}
+            renderInput={() => children}
+            renderItem={({ item, cursor, index, onClick }) => (
+                <GoalSuggestItem
+                    key={item.id}
+                    focused={cursor === index}
+                    onClick={onClick}
+                    projectId={item.projectId}
+                    title={item.title}
+                    state={item.state}
+                    issuer={item.activity}
+                    owner={item.owner}
+                    estimate={item._lastEstimate}
+                />
+            )}
+            renderItems={(children) => <StyledTable columns={6}>{children as React.ReactNode}</StyledTable>}
+        />
+    );
+});