fix: submit comment form

taskany-inc · Dec 7, 2023 · 6459896 · 6459896
1 parent 899d781
commit 6459896
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/src/components/CommentCreateForm/CommentCreateForm.tsx b/src/components/CommentCreateForm/CommentCreateForm.tsx
@@ -12,6 +12,7 @@ import { CommentForm } from '../CommentForm/CommentForm';
 import { ActivityFeedItem } from '../ActivityFeed';
 import { ColorizedMenuItem } from '../ColorizedMenuItem';
 import { StateDot } from '../StateDot';
+import { useLatest } from '../../hooks/useLatest';
 
 import { tr } from './CommentCreateForm.i18n';
 
@@ -50,6 +51,7 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
 
     const [pushState, setPushState] = useState(stateId ? statesMap[stateId] : undefined);
     const [description, setDescription] = useState(currentDescription);
+    const descriptionRef = useLatest(description);
     const [focused, setFocused] = useState(Boolean(currentDescription));
     const [busy, setBusy] = useState(false);
 
@@ -60,28 +62,26 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
 
     const onCommentChange = useCallback(
         ({ description }: { description: string }) => {
+            setDescription(description);
             onChange?.({ description, stateId: pushState?.id });
         },
         [onChange, pushState?.id],
     );
 
     const onCommentSubmit = useCallback(
-        async (form: CommentSchema) => {
+        async (form: CommentSchema & { stateId?: string }) => {
             setBusy(true);
             setFocused(false);
 
-            await onSubmit?.({
-                ...form,
-                stateId: pushState?.id,
-            });
+            await onSubmit?.(form);
 
             setDescription('');
-            setPushState(stateId ? statesMap[stateId] : undefined);
+            setPushState(form.stateId ? statesMap[form.stateId] : undefined);
 
             setBusy(false);
             setFocused(true);
         },
-        [onSubmit, pushState?.id, stateId, statesMap],
+        [onSubmit, statesMap],
     );
 
     const onCancelCreate = useCallback(() => {
@@ -96,14 +96,33 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
         (state: State) => {
             setPushState((prev) => {
                 const newState = state.id === prev?.id ? undefined : state;
-                onChange?.({ description, stateId: newState?.id });
+                onChange?.({ description: descriptionRef.current, stateId: newState?.id });
 
                 return newState;
             });
         },
-        [onChange, setPushState, description],
+        [onChange, descriptionRef],
+    );
+
+    const onCommentFormSubmit = useCallback(
+        (type: 'pushState' | 'default') => {
+            return (formData: CommentSchema) => {
+                const data: CommentSchema & { stateId?: string } = { ...formData };
+
+                if (type === 'pushState' && pushState) {
+                    data.stateId = pushState?.id;
+                }
+
+                return onCommentSubmit(data);
+            };
+        },
+        [onCommentSubmit, pushState],
     );
 
+    const onCommentСlick = useCallback(() => {
+        onCommentFormSubmit('default')({ description: descriptionRef.current });
+    }, [descriptionRef, onCommentFormSubmit]);
+
     return (
         <ActivityFeedItem>
             <UserPic size={32} src={user?.image} email={user?.email} name={user?.name} />
@@ -113,12 +132,19 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
                 focused={focused}
                 busy={busy}
                 onChange={onCommentChange}
-                onSubmit={onCommentSubmit}
+                onSubmit={onCommentFormSubmit('pushState')}
                 onCancel={onCancelCreate}
                 onFocus={onCommentFocus}
                 actionButton={
                     <>
-                        <Button size="m" view="primary" disabled={busy} outline type="submit" text={tr('Comment')} />
+                        <Button
+                            size="m"
+                            view="primary"
+                            disabled={busy}
+                            outline
+                            onClick={onCommentСlick}
+                            text={tr('Comment')}
+                        />
                         {nullable(states, () => (
                             <StyledStateUpdate>
                                 <Button

diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef } from 'react';
 import styled from 'styled-components';
 import { backgroundColor, gapM, gray4 } from '@taskany/colors';
 import { Button, Form, FormCard, FormAction, FormActions, nullable, useClickOutside } from '@taskany/bricks';
@@ -65,28 +65,24 @@ export const CommentForm: React.FC<CommentFormProps> = ({
     onCancel,
 }) => {
     const ref = useRef(null);
-    const [newDescription, setNewDescription] = useState(description);
 
     const onDescriptionChange = useCallback(
         (descr = '') => {
-            setNewDescription(descr);
             onChange?.({ description: descr });
         },
         [onChange],
     );
 
     const onCommentCancel = useCallback(() => {
-        setNewDescription('');
         onCancel?.();
     }, [onCancel]);
 
     const onCommentSubmit = useCallback(() => {
-        onSubmit?.({ description: newDescription });
-        setNewDescription('');
-    }, [onSubmit, newDescription]);
+        onSubmit?.({ description });
+    }, [description, onSubmit]);
 
     useClickOutside(ref, () => {
-        if (newDescription === '') {
+        if (description === '') {
             onCancel?.();
         }
     });
@@ -101,7 +97,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                     onCancel={onCommentCancel}
                     onFocus={onFocus}
                     autoFocus={autoFocus}
-                    value={newDescription}
+                    value={description}
                     onChange={onDescriptionChange}
                     {...commentFormDescription.attr}
                 />
@@ -117,7 +113,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                         </FormAction>
                         <FormAction right inline>
                             {nullable(!busy, () => (
-                                <Button outline text={tr('Cancel')} onClick={onCancel} />
+                                <Button outline text={tr('Cancel')} onClick={onCommentCancel} />
                             ))}
 
                             {actionButton}

diff --git a/src/components/CommentView/CommentView.tsx b/src/components/CommentView/CommentView.tsx
@@ -270,7 +270,7 @@ export const CommentView: FC<CommentViewProps> = ({
 
             {editMode ? (
                 <CommentForm
-                    description={description}
+                    description={commentDescription.description}
                     focused={focused}
                     busy={busy}
                     autoFocus