From f3b00e8f0ff42e276bbd737cc5e3de6af26b03fb Mon Sep 17 00:00:00 2001
From: "haitao(lj)" <haitao@sifou.com>
Date: Wed, 23 Nov 2022 14:13:03 +0800
Subject: [PATCH] fix(question): add field summary for question edit

---
 i18n/en_US.yaml                      |  5 ++++
 ui/src/pages/Questions/Ask/index.tsx | 38 ++++++++++++++++++++++++++--
 ui/src/services/common.ts            |  2 +-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index 9bbf5d6b..1c218845 100644
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@@ -497,6 +497,11 @@ ui:
           label: Answer
           msg:
             empty: Answer cannot be empty.
+        edit_summary:
+          label: Edit Summary
+          placeholder: >-
+            Briefly explain your changes (corrected spelling, fixed grammar,
+            improved formatting)
     btn_post_question: Post your question
     btn_save_edits: Save edits
     answer_question: Answer your own question
diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx
index 79614a49..648eb79c 100644
--- a/ui/src/pages/Questions/Ask/index.tsx
+++ b/ui/src/pages/Questions/Ask/index.tsx
@@ -25,6 +25,7 @@ interface FormDataItem {
   tags: Type.FormValue<Type.Tag[]>;
   content: Type.FormValue<string>;
   answer: Type.FormValue<string>;
+  edit_summary: Type.FormValue<string>;
 }
 const initFormData = {
   title: {
@@ -47,9 +48,15 @@ const initFormData = {
     isInvalid: false,
     errorMsg: '',
   },
+  edit_summary: {
+    value: '',
+    isInvalid: false,
+    errorMsg: '',
+  },
 };
 
 const Ask = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'ask' });
   const [formData, setFormData] = useState<FormDataItem>(initFormData);
   const [checked, setCheckState] = useState(false);
   const [focusType, setForceType] = useState('');
@@ -63,7 +70,6 @@ const Ask = () => {
 
   const { qid } = useParams();
   const navigate = useNavigate();
-  const { t } = useTranslation('translation', { keyPrefix: 'ask' });
 
   const isEdit = qid !== undefined;
   const { data: similarQuestions = { list: [] } } = useQueryQuestionByTitle(
@@ -114,6 +120,15 @@ const Ask = () => {
       answer: { ...formData.answer, value },
     });
 
+  const handleSummaryChange = (evt: React.ChangeEvent<HTMLInputElement>) =>
+    setFormData({
+      ...formData,
+      edit_summary: {
+        ...formData.edit_summary,
+        value: evt.currentTarget.value,
+      },
+    });
+
   const checkValidated = (): boolean => {
     let bol = true;
     const { title, content, tags, answer } = formData;
@@ -205,7 +220,11 @@ const Ask = () => {
       tags: formData.tags.value,
     };
     if (isEdit) {
-      modifyQuestion({ ...params, id: qid })
+      modifyQuestion({
+        ...params,
+        id: qid,
+        edit_summary: formData.edit_summary.value,
+      })
         .then(() => {
           navigate(`/questions/${qid}`);
         })
@@ -354,6 +373,21 @@ const Ask = () => {
                   {formData.tags.errorMsg}
                 </Form.Control.Feedback>
               </Form.Group>
+              {isEdit && (
+                <Form.Group controlId="edit_summary" className="my-3">
+                  <Form.Label>{t('form.fields.edit_summary.label')}</Form.Label>
+                  <Form.Control
+                    type="text"
+                    defaultValue={formData.edit_summary.value}
+                    isInvalid={formData.edit_summary.isInvalid}
+                    placeholder={t('form.fields.edit_summary.placeholder')}
+                    onChange={handleSummaryChange}
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {formData.edit_summary.errorMsg}
+                  </Form.Control.Feedback>
+                </Form.Group>
+              )}
               {!checked && (
                 <div className="mt-3">
                   <Button type="submit" className="me-2">
diff --git a/ui/src/services/common.ts b/ui/src/services/common.ts
index 8a541f03..43437d6e 100644
--- a/ui/src/services/common.ts
+++ b/ui/src/services/common.ts
@@ -73,7 +73,7 @@ export const useQueryAnswerInfo = (id: string) => {
 };
 
 export const modifyQuestion = (
-  params: Type.QuestionParams & { id: string },
+  params: Type.QuestionParams & { id: string; edit_summary: string },
 ) => {
   return request.put(`/answer/api/v1/question`, params);
 };