feat: users with reputation less than 100 will be prompted to write answers

This commit is contained in:
shuai 2023-03-21 14:57:38 +08:00
parent 0c817fd448
commit 48c28bdbdc
3 changed files with 66 additions and 25 deletions

View File

@ -801,10 +801,18 @@ ui:
edit link to refine and improve your existing answer, instead.</p> edit link to refine and improve your existing answer, instead.</p>
empty: Answer cannot be empty. empty: Answer cannot be empty.
characters: content must be at least 6 characters in length. characters: content must be at least 6 characters in length.
tips:
header_1: Thanks for your answer
li1_1: Please be sure to <strong>answer the question</strong>. Provide details and share your research.
li1_2: Back up any statements you make with references or personal experience.
header_2: But <strong>avoid</strong> ...
li2_1: Asking for help, seeking clarification, or responding to other answers.
reopen: reopen:
title: Reopen this post title: Reopen this post
content: Are you sure you want to reopen? content: Are you sure you want to reopen?
success: This post has been reopened success: This post has been reopened
delete: delete:
title: Delete this post title: Delete this post
question: >- question: >-

View File

@ -1,6 +1,6 @@
import { memo, useState, FC, useEffect } from 'react'; import { memo, useState, FC, useEffect } from 'react';
import { Form, Button } from 'react-bootstrap'; import { Form, Button, Alert } from 'react-bootstrap';
import { useTranslation } from 'react-i18next'; import { useTranslation, Trans } from 'react-i18next';
import { marked } from 'marked'; import { marked } from 'marked';
import classNames from 'classnames'; import classNames from 'classnames';
@ -18,6 +18,7 @@ interface Props {
/** question id */ /** question id */
qid: string; qid: string;
answered?: boolean; answered?: boolean;
loggedUserRank: number;
}; };
callback?: (obj) => void; callback?: (obj) => void;
} }
@ -39,6 +40,7 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
const [focusType, setFocusType] = useState(''); const [focusType, setFocusType] = useState('');
const [editorFocusState, setEditorFocusState] = useState(false); const [editorFocusState, setEditorFocusState] = useState(false);
const [hasDraft, setHasDraft] = useState(false); const [hasDraft, setHasDraft] = useState(false);
const [showTips, setShowTips] = useState(data.loggedUserRank < 100);
usePromptWithUnload({ usePromptWithUnload({
when: Boolean(formData.content.value), when: Boolean(formData.content.value),
@ -212,29 +214,58 @@ const Index: FC<Props> = ({ visible = false, data, callback }) => {
</div> </div>
)} )}
{showEditor && ( {showEditor && (
<Editor <>
className={classNames( <Editor
'form-control p-0', className={classNames(
focusType === 'answer' && 'focus', 'form-control p-0',
)} focusType === 'answer' && 'focus',
value={formData.content.value} )}
autoFocus={editorFocusState} value={formData.content.value}
onChange={(val) => { autoFocus={editorFocusState}
setFormData({ onChange={(val) => {
content: { setFormData({
value: val, content: {
isInvalid: false, value: val,
errorMsg: '', isInvalid: false,
}, errorMsg: '',
}); },
}} });
onFocus={() => { }}
setFocusType('answer'); onFocus={() => {
}} setFocusType('answer');
onBlur={() => { }}
setFocusType(''); onBlur={() => {
}} setFocusType('');
/> }}
/>
<Alert
variant="warning"
show={data.loggedUserRank < 100 && showTips}
onClose={() => setShowTips(false)}
dismissible
className="mt-3">
<p>{t('tips.header_1')}</p>
<ul>
<li>
<Trans
i18nKey="question_detail.write_answer.tips.li1_1"
components={{ strong: <strong /> }}
/>
</li>
<li>{t('tips.li1_2')}</li>
</ul>
<p>
<Trans
i18nKey="question_detail.write_answer.tips.header_2"
components={{ strong: <strong /> }}
/>
</p>
<ul>
<li>{t('tips.li2_1')}</li>
</ul>
</Alert>
</>
)} )}
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">

View File

@ -57,6 +57,7 @@ const Index = () => {
const isAuthor = userInfo?.username === question?.user_info?.username; const isAuthor = userInfo?.username === question?.user_info?.username;
const isAdmin = userInfo?.role_id === 2; const isAdmin = userInfo?.role_id === 2;
const isLogged = Boolean(userInfo?.access_token); const isLogged = Boolean(userInfo?.access_token);
const loggedUserRank = userInfo?.rank;
const { state: locationState } = useLocation(); const { state: locationState } = useLocation();
useEffect(() => { useEffect(() => {
@ -247,6 +248,7 @@ const Index = () => {
data={{ data={{
qid, qid,
answered: question?.answered, answered: question?.answered,
loggedUserRank,
}} }}
callback={writeAnswerCallback} callback={writeAnswerCallback}
/> />