Merge branch 'feat/ui-1.0.4' into 'test'

fix(Question): Optimise the display of check information for Question related form fields See merge request opensource/answer!432
2023-02-03 03:39:10 +00:00 · 2023-02-03 03:39:10 +00:00 · c7c293cdac
parent 768037a527 e4e48ffab0
commit c7c293cdac
8 changed files with 101 additions and 97 deletions
--- 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;
 }

--- 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);
--- 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);
--- 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) => {
--- 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));
--- 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">
--- 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;
--- 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) {