From 8cfb573bb382997f5c07f44780fd87f6d097c064 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Fri, 30 Sep 2022 17:17:41 +0800
Subject: [PATCH] refactor: adjust the content of the sidebar display

---
 ui/src/i18n/locales/en.json                 | 48 +++--------------
 ui/src/pages/Questions/Ask/index.tsx        | 58 +++++----------------
 ui/src/pages/Questions/EditAnswer/index.tsx | 35 ++++---------
 ui/src/pages/Tags/Edit/index.tsx            | 18 ++++---
 4 files changed, 41 insertions(+), 118 deletions(-)

diff --git a/ui/src/i18n/locales/en.json b/ui/src/i18n/locales/en.json
index f016ca9e..a09206f3 100644
--- a/ui/src/i18n/locales/en.json
+++ b/ui/src/i18n/locales/en.json
@@ -1,4 +1,8 @@
 {
+  "how_to_format": {
+    "title": "How to Format",
+    "description": "<ul><li><p>to make links</p><pre><code>&lt;https: //url.com&gt;<br/><br/>[Title](https: //url.com)</code></pre></li><li><p>put returns between paragraphs</p></li><li><p><em>italic</em> or **<strong>bold</strong>**</p></li><li><p>indent code by 4 spaces</p></li><li><p>quote by placing &gt; at start of line</p></li><li><p>backtick escapes <code>`like _so_`</code></p></li><li><p>create code fences with backticks `</p><pre><code>``` <br/>code here<br/>```</code></pre></li></ul>"
+  },
   "pagination": {
     "prev": "Prev",
     "next": "Next"
@@ -272,11 +276,7 @@
       }
     },
     "btn_save_edits": "Save edits",
-    "btn_cancel": "Cancel",
-    "how_to_format": {
-      "title": "How to Format",
-      "description": "This is some text within a card body."
-    }
+    "btn_cancel": "Cancel"
   },
   "dates": {
     "long_date": "MMM D",
@@ -318,23 +318,7 @@
       }
     },
     "btn_save_edits": "Save edits",
-    "btn_cancel": "Cancel",
-    "how_to_ask": {
-      "title": "How to Ask",
-      "description": "Not sure what to ask? Recurring questions, onboarding procedures, local setups, and FAQs all make for useful questions."
-    },
-    "how_to_format": {
-      "title": "How to Format",
-      "description": "This is some text within a card body."
-    },
-    "how_to_tag": {
-      "title": "How to Tag",
-      "description": "A tag helps ensure that your question will get attention from the right people. Here are tagging tips:",
-      "tips": [
-        "If you’re not sure what tags to use, check out popular tags.",
-        "Tag things in more than one way so people can find them more easily. Add tags for product lines, projects, teams, and the specific technologies or languages used."
-      ]
-    }
+    "btn_cancel": "Cancel"
   },
   "tags": {
     "title": "Tags",
@@ -390,23 +374,7 @@
     "btn_post_question": "Post your question",
     "btn_save_edits": "Save edits",
     "answer_question": "Answer your own question",
-    "post_question&answer": "Post your question and answer",
-    "how_to_ask": {
-      "title": "How to Ask",
-      "description": "Not sure what to ask? Recurring questions, onboarding procedures, local setups, and FAQs all make for useful questions."
-    },
-    "how_to_format": {
-      "title": "How to Format",
-      "description": "This is some text within a card body."
-    },
-    "how_to_tag": {
-      "title": "How to Tag",
-      "description": "A tag helps ensure that your question will get attention from the right people. Here are tagging tips:",
-      "tips": [
-        "If you’re not sure what tags to use, check out popular tags.",
-        "Tag things in more than one way so people can find them more easily. Add tags for product lines, projects, teams, and the specific technologies or languages used."
-      ]
-    }
+    "post_question&answer": "Post your question and answer"
   },
   "tag_selector": {
     "add_btn": "Add tag",
@@ -874,4 +842,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/src/pages/Questions/Ask/index.tsx b/ui/src/pages/Questions/Ask/index.tsx
index b6b3966c..9cff9604 100644
--- a/ui/src/pages/Questions/Ask/index.tsx
+++ b/ui/src/pages/Questions/Ask/index.tsx
@@ -63,7 +63,6 @@ const Ask = () => {
   const { qid } = useParams();
   const navigate = useNavigate();
   const { t } = useTranslation('translation', { keyPrefix: 'ask' });
-  const { t: t2 } = useTranslation('translation', { keyPrefix: 'dates' });
 
   const isEdit = qid !== undefined;
   const { data: similarQuestions = { list: [] } } = useQueryQuestionByTitle(
@@ -282,7 +281,7 @@ const Ask = () => {
                   <Form.Select onChange={handleSelectedRevision}>
                     {revisions.map(({ reason, create_at }, index) => {
                       const date = dayjs(create_at * 1000).format(
-                        t2('long_date_with_time'),
+                        t('long_date_with_time', { keyPrefix: 'dates' }),
                       );
                       return (
                         <option key={`${create_at}`} value={index}>
@@ -302,12 +301,6 @@ const Ask = () => {
                   onChange={handleTitleChange}
                   placeholder={t('form.fields.title.placeholder')}
                   autoFocus
-                  onFocus={() => {
-                    setForceType('title');
-                  }}
-                  onBlur={() => {
-                    setForceType('');
-                  }}
                 />
 
                 <Form.Control.Feedback type="invalid">
@@ -351,12 +344,6 @@ const Ask = () => {
                 <TagSelector
                   value={formData.tags.value}
                   onChange={handleTagsChange}
-                  onFocus={() => {
-                    setForceType('tags');
-                  }}
-                  onBlur={() => {
-                    setForceType('');
-                  }}
                 />
                 <Form.Control.Feedback type="invalid">
                   {formData.tags.errorMsg}
@@ -422,38 +409,17 @@ const Ask = () => {
             </Form>
           </Col>
           <Col xxl={3} lg={4} sm={12}>
-            {focusType === 'title' && (
-              <Card className="mb-4">
-                <Card.Header>{t('how_to_ask.title')}</Card.Header>
-                <Card.Body>
-                  <Card.Text>{t('how_to_ask.description')}</Card.Text>
-                </Card.Body>
-              </Card>
-            )}
-
-            {focusType === 'content' && (
-              <Card className="mb-4">
-                <Card.Header>{t('how_to_format.title')}</Card.Header>
-                <Card.Body>
-                  <Card.Text>{t('how_to_format.description')}</Card.Text>
-                </Card.Body>
-              </Card>
-            )}
-            {focusType === 'tags' && (
-              <Card>
-                <Card.Header>{t('how_to_tag.title')}</Card.Header>
-                <Card.Body>
-                  <Card.Text>{t('how_to_tag.description')}</Card.Text>
-                  <ul className="mb-0">
-                    {Array.from(
-                      t('how_to_tag.tips', { returnObjects: true }) as string[],
-                    ).map((item) => {
-                      return <li key={item}>{item}</li>;
-                    })}
-                  </ul>
-                </Card.Body>
-              </Card>
-            )}
+            <Card className="mb-4">
+              <Card.Header>
+                {t('title', { keyPrefix: 'how_to_format' })}
+              </Card.Header>
+              <Card.Body
+                className="fmt"
+                dangerouslySetInnerHTML={{
+                  __html: t('description', { keyPrefix: 'how_to_format' }),
+                }}
+              />
+            </Card>
           </Col>
         </Row>
       </Container>
diff --git a/ui/src/pages/Questions/EditAnswer/index.tsx b/ui/src/pages/Questions/EditAnswer/index.tsx
index 16aac7c8..9cfff684 100644
--- a/ui/src/pages/Questions/EditAnswer/index.tsx
+++ b/ui/src/pages/Questions/EditAnswer/index.tsx
@@ -38,7 +38,6 @@ const Ask = () => {
   const [focusType, setForceType] = useState('');
 
   const { t } = useTranslation('translation', { keyPrefix: 'edit_answer' });
-  const { t: t2 } = useTranslation('translation', { keyPrefix: 'dates' });
   const navigate = useNavigate();
 
   const { data } = useQueryAnswerInfo(aid);
@@ -154,7 +153,7 @@ const Ask = () => {
                 <Form.Select onChange={handleSelectedRevision}>
                   {revisions.map(({ create_at, reason }, index) => {
                     const date = dayjs(create_at * 1000).format(
-                      t2('long_date_with_time'),
+                      t('long_date_with_time', { keyPrefix: 'dates' }),
                     );
                     return (
                       <option key={`${create_at}`} value={index}>
@@ -217,30 +216,16 @@ const Ask = () => {
             </Form>
           </Col>
           <Col xxl={3} lg={4} sm={12}>
-            <Card className="mb-4">
-              <Card.Header>{t('how_to_ask.title')}</Card.Header>
-              <Card.Body>
-                <Card.Text>{t('how_to_ask.description')}</Card.Text>
-              </Card.Body>
-            </Card>
-            <Card className="mb-4">
-              <Card.Header>{t('how_to_format.title')}</Card.Header>
-              <Card.Body>
-                <Card.Text>{t('how_to_format.description')}</Card.Text>
-              </Card.Body>
-            </Card>
             <Card>
-              <Card.Header>{t('how_to_tag.title')}</Card.Header>
-              <Card.Body>
-                <Card.Text>{t('how_to_tag.description')}</Card.Text>
-                <ul className="mb-0">
-                  {Array.from(
-                    t('how_to_tag.tips', { returnObjects: true }) as string[],
-                  ).map((item) => {
-                    return <li>{item}</li>;
-                  })}
-                </ul>
-              </Card.Body>
+              <Card.Header>
+                {t('title', { keyPrefix: 'how_to_format' })}
+              </Card.Header>
+              <Card.Body
+                className="fmt"
+                dangerouslySetInnerHTML={{
+                  __html: t('description', { keyPrefix: 'how_to_format' }),
+                }}
+              />
             </Card>
           </Col>
         </Row>
diff --git a/ui/src/pages/Tags/Edit/index.tsx b/ui/src/pages/Tags/Edit/index.tsx
index ae0064ae..c3265478 100644
--- a/ui/src/pages/Tags/Edit/index.tsx
+++ b/ui/src/pages/Tags/Edit/index.tsx
@@ -45,7 +45,6 @@ const Ask = () => {
   const { tagId } = useParams();
   const navigate = useNavigate();
   const { t } = useTranslation('translation', { keyPrefix: 'edit_tag' });
-  const { t: t2 } = useTranslation('translation', { keyPrefix: 'dates' });
   const [focusType, setForceType] = useState('');
 
   const { data } = useTagInfo({ id: tagId });
@@ -159,7 +158,7 @@ const Ask = () => {
                 <Form.Select onChange={handleSelectedRevision}>
                   {revisions.map(({ create_at, reason }, index) => {
                     const date = dayjs(create_at * 1000).format(
-                      t2('long_date_with_time'),
+                      t('long_date_with_time', { keyPrefix: 'dates' }),
                     );
                     return (
                       <option key={`${create_at}`} value={index}>
@@ -249,11 +248,16 @@ const Ask = () => {
             </Form>
           </Col>
           <Col xxl={3} lg={4} sm={12}>
-            <Card className="mb-4">
-              <Card.Header>{t('how_to_format.title')}</Card.Header>
-              <Card.Body>
-                <Card.Text>{t('how_to_format.description')}</Card.Text>
-              </Card.Body>
+            <Card>
+              <Card.Header>
+                {t('title', { keyPrefix: 'how_to_format' })}
+              </Card.Header>
+              <Card.Body
+                className="fmt"
+                dangerouslySetInnerHTML={{
+                  __html: t('description', { keyPrefix: 'how_to_format' }),
+                }}
+              />
             </Card>
           </Col>
         </Row>