|
@@ -1,10 +1,9 @@
|
|
|
-import { Button, message } from 'antd';
|
|
|
-import React, { useEffect } from 'react';
|
|
|
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
|
|
|
-import { useSingleState } from 'nice-hooks';
|
|
|
-import ReactQuill from 'react-quill';
|
|
|
-import 'react-quill/dist/quill.snow.css';
|
|
|
-import { Memory } from './data.d';
|
|
|
+import {Button, message} from 'antd';
|
|
|
+import React, {useEffect} from 'react';
|
|
|
+import {PageHeaderWrapper} from '@ant-design/pro-layout';
|
|
|
+import {useSingleState} from 'nice-hooks';
|
|
|
+import Quill from "@/pages/Memory/components/Quill";
|
|
|
+import {Memory} from './data.d';
|
|
|
import service from './service';
|
|
|
|
|
|
enum Step {
|
|
@@ -34,6 +33,7 @@ const TableList: React.FC<{}> = () => {
|
|
|
tag: '',
|
|
|
});
|
|
|
|
|
|
+
|
|
|
/**
|
|
|
* 查询用户待提醒数量
|
|
|
* @param fields
|
|
@@ -44,19 +44,36 @@ const TableList: React.FC<{}> = () => {
|
|
|
const res = await service.countRemind({});
|
|
|
hide();
|
|
|
if (res.success) {
|
|
|
- setState({ remindCount: parseInt(res.data, 10) });
|
|
|
- return true;
|
|
|
+ setState({remindCount: parseInt(res.data, 10)});
|
|
|
}
|
|
|
- return false;
|
|
|
} catch (error) {
|
|
|
hide();
|
|
|
message.error('查询异常!');
|
|
|
- return false;
|
|
|
}
|
|
|
};
|
|
|
useEffect(() => {
|
|
|
countRemind();
|
|
|
+ setTimeout( ()=> {
|
|
|
+ countRemind();
|
|
|
+ },1000*60*60) // 每隔一个小时查询一次
|
|
|
}, []);
|
|
|
+ /**
|
|
|
+ * 清空memory
|
|
|
+ */
|
|
|
+ const clearMemory = () => {
|
|
|
+ setMemory({
|
|
|
+ id: null,
|
|
|
+ front: '',
|
|
|
+ back: '',
|
|
|
+ });
|
|
|
+ };
|
|
|
+ /**
|
|
|
+ * 每次修改step,都关闭背面
|
|
|
+ */
|
|
|
+ useEffect(() => {
|
|
|
+ setState({showBack: false});
|
|
|
+ clearMemory();
|
|
|
+ }, [state.step]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
// console.log(state)
|
|
@@ -66,14 +83,14 @@ const TableList: React.FC<{}> = () => {
|
|
|
* 进入统计页面
|
|
|
*/
|
|
|
const changStepMain = () => {
|
|
|
- setState({ step: Step.MAIN });
|
|
|
+ setState({step: Step.MAIN});
|
|
|
countRemind();
|
|
|
};
|
|
|
|
|
|
const findNextLine = async () => {
|
|
|
const res = await service.findNext({});
|
|
|
if (res.success) {
|
|
|
- setMemory({ ...memory, ...res.data });
|
|
|
+ setMemory({...memory, ...res.data});
|
|
|
} else {
|
|
|
changStepMain();
|
|
|
}
|
|
@@ -87,44 +104,44 @@ const TableList: React.FC<{}> = () => {
|
|
|
message.info('已经复习完了哟!');
|
|
|
return;
|
|
|
}
|
|
|
- setState({ step: Step.MEMORY });
|
|
|
+ setState({step: Step.MEMORY});
|
|
|
await findNextLine();
|
|
|
};
|
|
|
-
|
|
|
- const memorySuccess = async (factorInt: number) => {
|
|
|
- const res = await service.memorySuccess({ id: memory.id, factor: factorInt });
|
|
|
+ /**
|
|
|
+ * 处理返回值
|
|
|
+ * @param res
|
|
|
+ */
|
|
|
+ const memoryRes = (res:any)=>{
|
|
|
if (res.success) {
|
|
|
- setMemory({ ...memory, ...res.data });
|
|
|
+ setState({showBack: false});
|
|
|
+ setMemory({...memory, ...res.data});
|
|
|
} else {
|
|
|
changStepMain();
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
+ const memorySuccess = async (factorInt: number) => {
|
|
|
+ memoryRes(await service.memorySuccess({id: memory.id, factor: factorInt}));
|
|
|
+
|
|
|
};
|
|
|
|
|
|
+
|
|
|
const changStepAdd = () => {
|
|
|
- setState({ step: Step.ADD });
|
|
|
+ setState({step: Step.ADD});
|
|
|
};
|
|
|
|
|
|
- /**
|
|
|
- * 清空memory
|
|
|
- */
|
|
|
- const clearMemory = () => {
|
|
|
- setMemory({
|
|
|
- id: null,
|
|
|
- front: '',
|
|
|
- back: '',
|
|
|
- });
|
|
|
- };
|
|
|
+
|
|
|
|
|
|
return (
|
|
|
<PageHeaderWrapper title={false}>
|
|
|
{state.step === Step.MAIN ? (
|
|
|
<div>
|
|
|
<div>待复习: {state.remindCount}</div>
|
|
|
- <p />
|
|
|
+ <p/>
|
|
|
<Button type="primary" size="large" onClick={changStepMemory}>
|
|
|
复习
|
|
|
</Button>
|
|
|
- <p />
|
|
|
+ <p/>
|
|
|
<Button type="primary" size="large" onClick={changStepAdd}>
|
|
|
添加
|
|
|
</Button>
|
|
@@ -133,14 +150,20 @@ const TableList: React.FC<{}> = () => {
|
|
|
|
|
|
{state.step === Step.MEMORY ? (
|
|
|
<div>
|
|
|
- 问题
|
|
|
- <hr />
|
|
|
- <div dangerouslySetInnerHTML={{ __html: memory.front }} />
|
|
|
- <hr />
|
|
|
+ 问题:
|
|
|
+ <p />
|
|
|
+ <Quill
|
|
|
+ readonly
|
|
|
+ onChange={()=>{}}
|
|
|
+ value={memory.front}/>
|
|
|
+ <p />
|
|
|
{state.showBack ? (
|
|
|
<div>
|
|
|
- <div dangerouslySetInnerHTML={{ __html: memory.back }} />
|
|
|
- <hr />
|
|
|
+ <Quill
|
|
|
+ readonly
|
|
|
+ onChange={()=>{}}
|
|
|
+ value={memory.back}/>
|
|
|
+ <p />
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={() => {
|
|
@@ -167,13 +190,12 @@ const TableList: React.FC<{}> = () => {
|
|
|
>
|
|
|
简单
|
|
|
</Button>
|
|
|
- <p />
|
|
|
+ <p/>
|
|
|
<div>
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={async () => {
|
|
|
- await service.restart(memory);
|
|
|
- findNextLine();
|
|
|
+ memoryRes(await service.restart(memory));
|
|
|
}}
|
|
|
>
|
|
|
重新开始复习
|
|
@@ -182,8 +204,7 @@ const TableList: React.FC<{}> = () => {
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={async () => {
|
|
|
- await service.noMemory(memory);
|
|
|
- findNextLine();
|
|
|
+ memoryRes(await service.noMemory(memory));
|
|
|
}}
|
|
|
>
|
|
|
不在复习
|
|
@@ -192,14 +213,13 @@ const TableList: React.FC<{}> = () => {
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={async () => {
|
|
|
- await service.delete(memory);
|
|
|
- findNextLine();
|
|
|
+ memoryRes(await service.delete(memory));
|
|
|
}}
|
|
|
>
|
|
|
删除
|
|
|
</Button>
|
|
|
</div>
|
|
|
- <p />
|
|
|
+ <p/>
|
|
|
<div>
|
|
|
<Button
|
|
|
type="primary"
|
|
@@ -209,6 +229,15 @@ const TableList: React.FC<{}> = () => {
|
|
|
>
|
|
|
编辑
|
|
|
</Button>
|
|
|
+ <span> </span>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={() => {
|
|
|
+ changStepMain();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 关闭
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : (
|
|
@@ -216,7 +245,7 @@ const TableList: React.FC<{}> = () => {
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={() => {
|
|
|
- setState({ showBack: true });
|
|
|
+ setState({showBack: true});
|
|
|
}}
|
|
|
>
|
|
|
显示答案
|
|
@@ -229,23 +258,23 @@ const TableList: React.FC<{}> = () => {
|
|
|
{state.step === Step.ADD ? (
|
|
|
<div>
|
|
|
<h4>正面</h4>
|
|
|
- <ReactQuill
|
|
|
- theme="snow"
|
|
|
- value={memory.front}
|
|
|
+ <Quill
|
|
|
+ readonly={false}
|
|
|
onChange={(value) => {
|
|
|
- setMemory({ front: value });
|
|
|
+ setMemory({front: value});
|
|
|
}}
|
|
|
- />
|
|
|
- <p />
|
|
|
+ value={memory.front}/>
|
|
|
+
|
|
|
+ <p/>
|
|
|
<h4>反面</h4>
|
|
|
- <ReactQuill
|
|
|
- theme="snow"
|
|
|
- value={memory.back}
|
|
|
+ <Quill
|
|
|
+ readonly={false}
|
|
|
onChange={(value) => {
|
|
|
- setMemory({ back: value });
|
|
|
+ setMemory({back: value});
|
|
|
}}
|
|
|
+ value={memory.back}
|
|
|
/>
|
|
|
- <p />
|
|
|
+ <p/>
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={async () => {
|
|
@@ -269,7 +298,6 @@ const TableList: React.FC<{}> = () => {
|
|
|
<Button
|
|
|
type="primary"
|
|
|
onClick={() => {
|
|
|
- clearMemory();
|
|
|
changStepMain();
|
|
|
}}
|
|
|
>
|