diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml index b4121379..403e290b 100644 --- a/i18n/en_US.yaml +++ b/i18n/en_US.yaml @@ -801,10 +801,18 @@ ui: edit link to refine and improve your existing answer, instead.

empty: Answer cannot be empty. characters: content must be at least 6 characters in length. + tips: + header_1: Thanks for your answer + li1_1: Please be sure to answer the question. Provide details and share your research. + li1_2: Back up any statements you make with references or personal experience. + header_2: But avoid ... + li2_1: Asking for help, seeking clarification, or responding to other answers. + reopen: title: Reopen this post content: Are you sure you want to reopen? success: This post has been reopened + delete: title: Delete this post question: >- diff --git a/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx b/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx index ebbb8e22..1c17b588 100644 --- a/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx +++ b/ui/src/pages/Questions/Detail/components/WriteAnswer/index.tsx @@ -1,6 +1,6 @@ import { memo, useState, FC, useEffect } from 'react'; -import { Form, Button } from 'react-bootstrap'; -import { useTranslation } from 'react-i18next'; +import { Form, Button, Alert } from 'react-bootstrap'; +import { useTranslation, Trans } from 'react-i18next'; import { marked } from 'marked'; import classNames from 'classnames'; @@ -18,6 +18,7 @@ interface Props { /** question id */ qid: string; answered?: boolean; + loggedUserRank: number; }; callback?: (obj) => void; } @@ -39,6 +40,7 @@ const Index: FC = ({ visible = false, data, callback }) => { const [focusType, setFocusType] = useState(''); const [editorFocusState, setEditorFocusState] = useState(false); const [hasDraft, setHasDraft] = useState(false); + const [showTips, setShowTips] = useState(data.loggedUserRank < 100); usePromptWithUnload({ when: Boolean(formData.content.value), @@ -212,29 +214,58 @@ const Index: FC = ({ visible = false, data, callback }) => { )} {showEditor && ( - { - setFormData({ - content: { - value: val, - isInvalid: false, - errorMsg: '', - }, - }); - }} - onFocus={() => { - setFocusType('answer'); - }} - onBlur={() => { - setFocusType(''); - }} - /> + <> + { + setFormData({ + content: { + value: val, + isInvalid: false, + errorMsg: '', + }, + }); + }} + onFocus={() => { + setFocusType('answer'); + }} + onBlur={() => { + setFocusType(''); + }} + /> + + setShowTips(false)} + dismissible + className="mt-3"> +

{t('tips.header_1')}

+
    +
  • + }} + /> +
  • +
  • {t('tips.li1_2')}
  • +
+

+ }} + /> +

+
    +
  • {t('tips.li2_1')}
  • +
+
+ )} diff --git a/ui/src/pages/Questions/Detail/index.tsx b/ui/src/pages/Questions/Detail/index.tsx index a6b3cc2d..479fa5b7 100644 --- a/ui/src/pages/Questions/Detail/index.tsx +++ b/ui/src/pages/Questions/Detail/index.tsx @@ -57,6 +57,7 @@ const Index = () => { const isAuthor = userInfo?.username === question?.user_info?.username; const isAdmin = userInfo?.role_id === 2; const isLogged = Boolean(userInfo?.access_token); + const loggedUserRank = userInfo?.rank; const { state: locationState } = useLocation(); useEffect(() => { @@ -247,6 +248,7 @@ const Index = () => { data={{ qid, answered: question?.answered, + loggedUserRank, }} callback={writeAnswerCallback} />