fix: visible error on trying send empty comment

taskany-inc · Jul 4, 2024 · 1213d12 · 1213d12
1 parent 4fde81d
commit 1213d12
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/src/components/CommentCreateForm/CommentCreateForm.i18n/en.json b/src/components/CommentCreateForm/CommentCreateForm.i18n/en.json
@@ -1,4 +1,5 @@
 {
     "Comment": "Comment",
-    "Update state": "Update state"
+    "Update state": "Update state",
+    "Comments's description is required": ""
 }
diff --git a/src/components/CommentCreateForm/CommentCreateForm.i18n/ru.json b/src/components/CommentCreateForm/CommentCreateForm.i18n/ru.json
@@ -1,4 +1,5 @@
 {
     "Comment": "Написать",
-    "Update state": "Обновить статус"
+    "Update state": "Обновить статус",
+    "Comments's description is required": "Текст комментария обязателен"
 }
diff --git a/src/components/CommentCreateForm/CommentCreateForm.tsx b/src/components/CommentCreateForm/CommentCreateForm.tsx
@@ -50,6 +50,7 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
     const descriptionRef = useLatest(description);
     const [focused, setFocused] = useState(Boolean(currentDescription));
     const [busy, setBusy] = useState(false);
+    const [error, setError] = useState<{ message: string } | undefined>();
 
     const onCommentFocus = useCallback(() => {
         setFocused(true);
@@ -59,13 +60,19 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
     const onCommentChange = useCallback(
         ({ description }: { description: string }) => {
             setDescription(description);
+            setError(undefined);
             onChange?.({ description, stateId: pushState?.id });
         },
         [onChange, pushState?.id],
     );
 
     const onCommentSubmit = useCallback(
         async (form: CommentSchema & { stateId?: string }) => {
+            if (!form.description.length) {
+                setError({ message: tr("Comments's description is required") });
+                return;
+            }
+
             setBusy(true);
             setFocused(false);
 
@@ -131,6 +138,7 @@ const CommentCreateForm: React.FC<CommentCreateFormProps> = ({
                 onSubmit={onCommentFormSubmit('pushState')}
                 onCancel={onCancelCreate}
                 onFocus={onCommentFocus}
+                passedError={error}
                 actionButton={
                     <>
                         <Button view="primary" disabled={busy} onClick={onCommentСlick} text={tr('Comment')} />

diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
@@ -18,6 +18,7 @@ interface CommentFormProps {
     autoFocus?: boolean;
     busy?: boolean;
     description?: string;
+    passedError?: { message: string };
 
     onSubmit: (form: CommentSchema) => void | Promise<void>;
     onChange?: (form: CommentSchema) => void;
@@ -35,6 +36,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
     onSubmit,
     onFocus,
     onCancel,
+    passedError,
 }) => {
     const [error, setError] = useState<{ message: string } | undefined>();
     const ref = useRef(null);
@@ -86,7 +88,7 @@ export const CommentForm: React.FC<CommentFormProps> = ({
                         outline
                         {...commentFormDescription.attr}
                     />
-                    {nullable(error, (err) => (
+                    {nullable(error || passedError, (err) => (
                         <FormControlError error={err} />
                     ))}
                 </FormControl>