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

Feat/ui 0.7.0

See merge request opensource/answer!349

i18n/en_US.yaml

@@ -755,6 +755,7 @@ ui:
     write_answer:
       title: Your Answer
       btn_name: Post your answer
+      add_another_answer: Add another answer
       confirm_title: Continue to answer
       continue: Continue
       confirm_info: >-

ui/package.json

@@ -50,6 +50,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/color": "^3.0.3",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.184",
     "@types/marked": "^4.0.6",

ui/src/components/Editor/index.scss

@@ -169,7 +169,7 @@
     }
   }
   .content-wrap {
-    height: 270px;
+    height: 264px;
   }
 
   .CodeMirror {

ui/src/components/TextArea/index.tsx

@@ -1,7 +1,9 @@
 import { FC, useRef, useEffect, memo } from 'react';
 import { FormControl, FormControlProps } from 'react-bootstrap';
 
-const TextArea: FC<FormControlProps> = ({ value, onChange, size }) => {
+const TextArea: FC<
+  FormControlProps & { rows?: number; autoFocus?: boolean }
+> = ({ value, onChange, size, rows = 1, autoFocus = true, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement>(null);
 
   const autoGrow = () => {
@@ -21,13 +23,14 @@ const TextArea: FC<FormControlProps> = ({ value, onChange, size }) => {
     <FormControl
       as="textarea"
       className="resize-none font-monospace"
-      rows={1}
+      rows={rows}
       size={size}
       value={value}
       onChange={onChange}
-      autoFocus
+      autoFocus={autoFocus}
       ref={ref}
       onInput={autoGrow}
+      {...rest}
     />
   );
 };

ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import classNames from 'classnames';
 
-import { Editor, Modal } from '@/components';
+import { Editor, Modal, TextArea } from '@/components';
 import { FormDataType } from '@/common/interface';
 import { postAnswer } from '@/services';
 
@@ -81,10 +81,13 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
 
     handleSubmit();
   };
+  const handleFocusForTextArea = () => {
+    setShowEditor(true);
+  };
 
   return (
     <Form noValidate className="mt-4">
-      {showEditor && (
+      {(!data.answered || showEditor) && (
         <Form.Group className="mb-3">
           <Form.Label>
             <h5>{t('title')}</h5>
@@ -93,28 +96,40 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
             isInvalid={formData.content.isInvalid}
             className="d-none"
           />
-          <Editor
-            className={classNames(
-              'form-control p-0',
-              focusType === 'answer' && 'focus',
-            )}
-            value={formData.content.value}
-            onChange={(val) => {
-              setFormData({
-                content: {
-                  value: val,
-                  isInvalid: false,
-                  errorMsg: '',
-                },
-              });
-            }}
-            onFocus={() => {
-              setForceType('answer');
-            }}
-            onBlur={() => {
-              setForceType('');
-            }}
-          />
+          {!showEditor && !data.answered && (
+            <div className="d-flex">
+              <TextArea
+                className="w-100"
+                rows={12}
+                autoFocus={false}
+                onFocus={handleFocusForTextArea}
+              />
+            </div>
+          )}
+          {showEditor && (
+            <Editor
+              className={classNames(
+                'form-control p-0',
+                focusType === 'answer' && 'focus',
+              )}
+              value={formData.content.value}
+              onChange={(val) => {
+                setFormData({
+                  content: {
+                    value: val,
+                    isInvalid: false,
+                    errorMsg: '',
+                  },
+                });
+              }}
+              onFocus={() => {
+                setForceType('answer');
+              }}
+              onBlur={() => {
+                setForceType('');
+              }}
+            />
+          )}
 
           <Form.Control.Feedback type="invalid">
             {formData.content.errorMsg}
@@ -122,7 +137,11 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
         </Form.Group>
       )}
 
-      <Button onClick={clickBtn}>{t('btn_name')}</Button>
+      {data.answered && !showEditor ? (
+        <Button onClick={clickBtn}>{t('add_another_answer')}</Button>
+      ) : (
+        <Button onClick={clickBtn}>{t('btn_name')}</Button>
+      )}
     </Form>
   );
 };

ui/src/pages/Questions/Detail/index.tsx

@@ -128,6 +128,13 @@ const Index = () => {
       count: answers.count + 1,
       list: [...answers.list, obj],
     });
+
+    if (question) {
+      setQuestion({
+        ...question,
+        answered: true,
+      });
+    }
   };
 
   useEffect(() => {