From e4e48ffab0cff7929281e7f0ce3c4c5a7cc39ea6 Mon Sep 17 00:00:00 2001
From: "haitao(lj)" <haitao@sifou.com>
Date: Fri, 3 Feb 2023 11:02:38 +0800
Subject: [PATCH] fix(Question): Optimise the display of check information for
 Question related form fields

---
 ui/src/common/interface.ts                    |  4 +-
 .../Comment/components/Form/index.tsx         | 37 +++++++++----
 .../Comment/components/Reply/index.tsx        | 39 ++++++++++----
 ui/src/components/Comment/index.tsx           | 53 +++++++++----------
 ui/src/pages/Questions/Ask/index.tsx          | 46 ++--------------
 ui/src/pages/Questions/EditAnswer/index.tsx   |  2 -
 ui/src/utils/common.ts                        |  7 ++-
 ui/src/utils/request.ts                       | 10 +++-
 8 files changed, 101 insertions(+), 97 deletions(-)

diff --git a/ui/src/common/interface.ts b/ui/src/common/interface.ts
index 1febc724..76583a8d 100644
--- a/ui/src/common/interface.ts
+++ b/ui/src/common/interface.ts
@@ -56,7 +56,7 @@ export interface QuestionParams {
   title: string;
   url_title?: string;
   content: string;
-  html: string;
+  html?: string;
   tags: Tag[];
 }
 
@@ -207,7 +207,7 @@ export interface AnswerItem {
 
 export interface PostAnswerReq {
   content: string;
-  html: string;
+  html?: string;
   question_id: string;
 }
 
diff --git a/ui/src/components/Comment/components/Form/index.tsx b/ui/src/components/Comment/components/Form/index.tsx
index 70c62fdd..bc93ddb4 100644
--- a/ui/src/components/Comment/components/Form/index.tsx
+++ b/ui/src/components/Comment/components/Form/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, memo } from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import classNames from 'classnames';
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { TextArea, Mentions } from '@/components';
 import { usePageUsers } from '@/hooks';
 
-const Form = ({
+const Index = ({
   className = '',
   value: initialValue = '',
   onSendReply,
@@ -18,7 +18,7 @@ const Form = ({
   const [value, setValue] = useState('');
   const pageUsers = usePageUsers();
   const { t } = useTranslation('translation', { keyPrefix: 'comment' });
-
+  const [validationErrorMsg, setValidationErrorMsg] = useState('');
   useEffect(() => {
     if (!initialValue) {
       return;
@@ -32,6 +32,13 @@ const Form = ({
   const handleSelected = (val) => {
     setValue(val);
   };
+  const handleSendReply = () => {
+    onSendReply(value).catch((ex) => {
+      if (ex.isError) {
+        setValidationErrorMsg(ex.msg);
+      }
+    });
+  };
   return (
     <div
       className={classNames(
@@ -39,17 +46,27 @@ const Form = ({
         className,
       )}>
       <div>
-        <Mentions pageUsers={pageUsers.getUsers()} onSelected={handleSelected}>
-          <TextArea size="sm" value={value} onChange={handleChange} />
-        </Mentions>
-        <div className="form-text">{t(`tip_${mode}`)}</div>
+        <div
+          className={classNames('custom-form-control', {
+            'is-invalid': validationErrorMsg,
+          })}>
+          <Mentions
+            pageUsers={pageUsers.getUsers()}
+            onSelected={handleSelected}>
+            <TextArea size="sm" value={value} onChange={handleChange} />
+          </Mentions>
+          <div className="form-text">{t(`tip_${mode}`)}</div>
+        </div>
+        <Form.Control.Feedback type="invalid">
+          {validationErrorMsg}
+        </Form.Control.Feedback>
       </div>
       {type === 'edit' ? (
         <div className="d-flex flex-row flex-md-column ms-0 ms-md-2 mt-2 mt-md-0">
           <Button
             size="sm"
             className="text-nowrap "
-            onClick={() => onSendReply(value)}>
+            onClick={() => handleSendReply()}>
             {t('btn_save_edits')}
           </Button>
           <Button
@@ -64,7 +81,7 @@ const Form = ({
         <Button
           size="sm"
           className="text-nowrap ms-0 ms-md-2 mt-2 mt-md-0"
-          onClick={() => onSendReply(value)}>
+          onClick={() => handleSendReply()}>
           {t('btn_add_comment')}
         </Button>
       )}
@@ -72,4 +89,4 @@ const Form = ({
   );
 };
 
-export default memo(Form);
+export default memo(Index);
diff --git a/ui/src/components/Comment/components/Reply/index.tsx b/ui/src/components/Comment/components/Reply/index.tsx
index 01c9399c..3048c3a4 100644
--- a/ui/src/components/Comment/components/Reply/index.tsx
+++ b/ui/src/components/Comment/components/Reply/index.tsx
@@ -1,21 +1,30 @@
 import { useState, memo } from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+import classNames from 'classnames';
+
 import { TextArea, Mentions } from '@/components';
 import { usePageUsers } from '@/hooks';
 
-const Form = ({ userName, onSendReply, onCancel, mode }) => {
+const Index = ({ userName, onSendReply, onCancel, mode }) => {
   const [value, setValue] = useState('');
   const pageUsers = usePageUsers();
   const { t } = useTranslation('translation', { keyPrefix: 'comment' });
-
+  const [validationErrorMsg, setValidationErrorMsg] = useState('');
   const handleChange = (e) => {
     setValue(e.target.value);
   };
   const handleSelected = (val) => {
     setValue(val);
   };
+  const handleSendReply = () => {
+    onSendReply(value).catch((ex) => {
+      if (ex.isError) {
+        setValidationErrorMsg(ex.msg);
+      }
+    });
+  };
 
   return (
     <div className="mb-2">
@@ -24,18 +33,26 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
       </div>
       <div className="d-flex mb-1 align-items-start flex-column flex-md-row">
         <div>
-          <Mentions
-            pageUsers={pageUsers.getUsers()}
-            onSelected={handleSelected}>
-            <TextArea size="sm" value={value} onChange={handleChange} />
-          </Mentions>
-          <div className="form-text">{t(`tip_${mode}`)}</div>
+          <div
+            className={classNames('custom-form-control', {
+              'is-invalid': validationErrorMsg,
+            })}>
+            <Mentions
+              pageUsers={pageUsers.getUsers()}
+              onSelected={handleSelected}>
+              <TextArea size="sm" value={value} onChange={handleChange} />
+            </Mentions>
+            <div className="form-text">{t(`tip_${mode}`)}</div>
+          </div>
+          <Form.Control.Feedback type="invalid">
+            {validationErrorMsg}
+          </Form.Control.Feedback>
         </div>
         <div className="d-flex flex-row flex-md-column ms-0 ms-md-2 mt-2 mt-md-0">
           <Button
             size="sm"
             className="text-nowrap"
-            onClick={() => onSendReply(value)}>
+            onClick={() => handleSendReply()}>
             {t('btn_add_comment')}
           </Button>
           <Button
@@ -51,4 +68,4 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
   );
 };
 
-export default memo(Form);
+export default memo(Index);
diff --git a/ui/src/components/Comment/index.tsx b/ui/src/components/Comment/index.tsx
index a9f5c603..6f42a559 100644
--- a/ui/src/components/Comment/index.tsx
+++ b/ui/src/components/Comment/index.tsx
@@ -109,9 +109,9 @@ const Comment = ({ objectId, mode, commentId }) => {
     const userNames = unionBy(users.map((user) => user.userName));
     const commentMarkDown = parseUserInfo(item.value);
     const html = marked.parse(commentMarkDown);
-    if (!commentMarkDown || !html) {
-      return;
-    }
+    // if (!commentMarkDown || !html) {
+    //   return;
+    // }
     const params = {
       object_id: objectId,
       original_text: commentMarkDown,
@@ -125,7 +125,7 @@ const Comment = ({ objectId, mode, commentId }) => {
     };
 
     if (item.type === 'edit') {
-      updateComment({
+      return updateComment({
         ...params,
         comment_id: item.comment_id,
       }).then(() => {
@@ -140,30 +140,29 @@ const Comment = ({ objectId, mode, commentId }) => {
           }),
         );
       });
-    } else {
-      addComment(params).then((res) => {
-        if (item.type === 'reply') {
-          const index = comments.findIndex(
-            (comment) => comment.comment_id === item.comment_id,
-          );
-          comments[index].showReply = false;
-          comments.splice(index + 1, 0, res);
-          setComments([...comments]);
-        } else {
-          setComments([
-            ...comments.map((comment) => {
-              if (comment.comment_id === item.comment_id) {
-                comment.showReply = false;
-              }
-              return comment;
-            }),
-            res,
-          ]);
-        }
-
-        setVisibleComment(false);
-      });
     }
+    return addComment(params).then((res) => {
+      if (item.type === 'reply') {
+        const index = comments.findIndex(
+          (comment) => comment.comment_id === item.comment_id,
+        );
+        comments[index].showReply = false;
+        comments.splice(index + 1, 0, res);
+        setComments([...comments]);
+      } else {
+        setComments([
+          ...comments.map((comment) => {
+            if (comment.comment_id === item.comment_id) {
+              comment.showReply = false;
+            }
+            return comment;
+          }),
+          res,
+        ]);
+      }
+
+      setVisibleComment(false);
+    });
   };
 
   const handleDelete = (id) => {
diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx
index e4bc9cfd..b5cce8db 100644
--- a/ui/src/pages/Questions/Ask/index.tsx
+++ b/ui/src/pages/Questions/Ask/index.tsx
@@ -143,21 +143,7 @@ const Ask = () => {
   const checkValidated = (): boolean => {
     const bol = true;
     const { title, content, tags, answer } = formData;
-    if (!title.value) {
-      // bol = false;
-      // formData.title = {
-      //   value: '',
-      //   isInvalid: true,
-      //   errorMsg: t('form.fields.title.msg.empty'),
-      // };
-    } else if (Array.from(title.value).length > 150) {
-      // bol = false;
-      // formData.title = {
-      //   value: title.value,
-      //   isInvalid: true,
-      //   errorMsg: t('form.fields.title.msg.range'),
-      // };
-    } else {
+    if (title.value && Array.from(title.value).length <= 150) {
       formData.title = {
         value: title.value,
         isInvalid: false,
@@ -165,14 +151,7 @@ const Ask = () => {
       };
     }
 
-    if (!content.value) {
-      // bol = false;
-      // formData.content = {
-      //   value: '',
-      //   isInvalid: true,
-      //   errorMsg: t('form.fields.body.msg.empty'),
-      // };
-    } else {
+    if (content.value) {
       formData.content = {
         value: content.value,
         isInvalid: false,
@@ -180,29 +159,16 @@ const Ask = () => {
       };
     }
 
-    if (tags.value.length === 0) {
-      // bol = false;
-      // formData.tags = {
-      //   value: [],
-      //   isInvalid: true,
-      //   errorMsg: t('form.fields.tags.msg.empty'),
-      // };
-    } else {
+    if (Array.isArray(tags.value) && tags.value.length > 0) {
       formData.tags = {
         value: tags.value,
         isInvalid: false,
         errorMsg: '',
       };
     }
+
     if (checked) {
-      if (!answer.value) {
-        // bol = false;
-        // formData.answer = {
-        //   value: '',
-        //   isInvalid: true,
-        //   errorMsg: t('form.fields.answer.msg.empty'),
-        // };
-      } else {
+      if (answer.value) {
         formData.answer = {
           value: answer.value,
           isInvalid: false,
@@ -227,7 +193,6 @@ const Ask = () => {
     const params: Type.QuestionParams = {
       title: formData.title.value,
       content: formData.content.value,
-      html: editorRef.current.getHtml(),
       tags: formData.tags.value,
     };
     if (isEdit) {
@@ -261,7 +226,6 @@ const Ask = () => {
           postAnswer({
             question_id: id,
             content: formData.answer.value,
-            html: editorRef2.current.getHtml(),
           })
             .then(() => {
               navigate(pathFactory.questionLanding(id, params.url_title));
diff --git a/ui/src/pages/Questions/EditAnswer/index.tsx b/ui/src/pages/Questions/EditAnswer/index.tsx
index b5689f14..411affbd 100644
--- a/ui/src/pages/Questions/EditAnswer/index.tsx
+++ b/ui/src/pages/Questions/EditAnswer/index.tsx
@@ -140,8 +140,6 @@ const Index = () => {
   usePageTags({
     title: t('edit_answer', { keyPrefix: 'page_title' }),
   });
-
-  console.log('formData.content.value', formData.content.value);
   return (
     <Container className="pt-4 mt-2 mb-5 edit-answer-wrap">
       <Row className="justify-content-center">
diff --git a/ui/src/utils/common.ts b/ui/src/utils/common.ts
index 56d31666..c48c01bd 100644
--- a/ui/src/utils/common.ts
+++ b/ui/src/utils/common.ts
@@ -171,8 +171,11 @@ function handleFormError(
 ) {
   if (error.list?.length > 0) {
     error.list.forEach((item) => {
-      data[item.error_field].isInvalid = true;
-      data[item.error_field].errorMsg = item.error_msg;
+      const errorFieldObject = data[item.error_field];
+      if (errorFieldObject) {
+        errorFieldObject.isInvalid = true;
+        errorFieldObject.errorMsg = item.error_msg;
+      }
     });
   }
   return data;
diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts
index 4126c892..615cc8a3 100644
--- a/ui/src/utils/request.ts
+++ b/ui/src/utils/request.ts
@@ -48,7 +48,7 @@ class Request {
       },
       (error) => {
         const { status, data: respData } = error.response || {};
-        const { data = {}, msg = '' } = respData || {};
+        const { data = {}, msg = '', reason = '' } = respData || {};
         if (status === 400) {
           // show error message
           if (data instanceof Object && data.err_type) {
@@ -79,7 +79,13 @@ class Request {
 
           if (data instanceof Array && data.length > 0) {
             // handle form error
-            return Promise.reject({ isError: true, list: data });
+            return Promise.reject({
+              code: status,
+              msg,
+              reason,
+              isError: true,
+              list: data,
+            });
           }
 
           if (!data || Object.keys(data).length <= 0) {