update

src/pages/Memory/index.tsx

@@ -1,10 +1,10 @@
-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 { 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 { Memory } from './data.d';
 import service from './service';
 
 enum Step {
@@ -16,25 +16,23 @@ enum Step {
 interface State {
   remindCount: number;
   step: Step;
-  showBack?: boolean
+  showBack?: boolean;
 }
 
 const TableList: React.FC<{}> = () => {
-
-
   const [state, setState] = useSingleState<State>({
     remindCount: 0,
     step: Step.MAIN, // 0 主页，1 复习，2 添加
-    showBack: false
-  })
+    showBack: false,
+  });
 
   const [memory, setMemory] = useSingleState<Memory>({
     id: null,
     userId: null,
-    front: "",
-    back: "",
-    tag: ''
-  })
+    front: '',
+    back: '',
+    tag: '',
+  });
 
   /**
    * 查询用户待提醒数量
@@ -46,14 +44,9 @@ const TableList: React.FC<{}> = () => {
       const res = await service.countRemind({});
       hide();
       if (res.success) {
-        setState({remindCount: parseInt(res.data, 10)}, () => {
-          if (state.remindCount === 0) {
-            message.info('复习完毕！');
-          }
-        })
+        setState({ remindCount: parseInt(res.data, 10) });
         return true;
       }
-
       return false;
     } catch (error) {
       hide();
@@ -68,41 +61,48 @@ const TableList: React.FC<{}> = () => {
   useEffect(() => {
     // console.log(state)
     // console.log(memory)
-  })
+  });
   /**
    * 进入统计页面
    */
   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 });
+    } else {
+      changStepMain();
+    }
+  };
+
   /**
-   * 进入复习页面
+   * 初次进入复习页面
    */
   const changStepMemory = async () => {
     if (state.remindCount <= 0) {
       message.info('已经复习完了哟！');
       return;
     }
-    setState({step: Step.MEMORY});
-    const res = await service.findNext({});
-    if (res.success) {
-      setMemory({...memory, ...res.data});
-    }
-  }
+    setState({ step: Step.MEMORY });
+    await findNextLine();
+  };
+
   const memorySuccess = async (factorInt: number) => {
-    const res = await service.memorySuccess({id: memory.id, factor: factorInt});
+    const res = await service.memorySuccess({ id: memory.id, factor: factorInt });
     if (res.success) {
-      setMemory({...memory, ...res.data});
+      setMemory({ ...memory, ...res.data });
     } else {
-      message.info('恭喜！复习完毕！');
-      setState({step: Step.MAIN});
+      changStepMain();
     }
-  }
+  };
 
   const changStepAdd = () => {
-    setState({step: Step.ADD})
-  }
+    setState({ step: Step.ADD });
+  };
 
   /**
    * 清空memory
@@ -110,117 +110,173 @@ const TableList: React.FC<{}> = () => {
   const clearMemory = () => {
     setMemory({
       id: null,
-      front: "",
-      back: ""
+      front: '',
+      back: '',
     });
-  }
+  };
 
   return (
     <PageHeaderWrapper title={false}>
       {state.step === Step.MAIN ? (
         <div>
           <div>待复习: {state.remindCount}</div>
-          <p/>
-          <Button type="primary" size="large" onClick={changStepMemory}>复习</Button>
-          <p/>
-          <Button type="primary" size="large" onClick={changStepAdd}>添加</Button>
+          <p />
+          <Button type="primary" size="large" onClick={changStepMemory}>
+            复习
+          </Button>
+          <p />
+          <Button type="primary" size="large" onClick={changStepAdd}>
+            添加
+          </Button>
         </div>
       ) : null}
 
       {state.step === Step.MEMORY ? (
         <div>
           问题
-          <hr/>
-          <div dangerouslySetInnerHTML={{__html: memory.front}}/>
-          <hr/>
+          <hr />
+          <div dangerouslySetInnerHTML={{ __html: memory.front }} />
+          <hr />
           {state.showBack ? (
             <div>
-              <div dangerouslySetInnerHTML={{__html: memory.back}}/>
-              <hr/>
-              <Button type="primary" onClick={() => {
-                memorySuccess(0.5)
-              }}>生疏</Button>
+              <div dangerouslySetInnerHTML={{ __html: memory.back }} />
+              <hr />
+              <Button
+                type="primary"
+                onClick={() => {
+                  memorySuccess(0.5);
+                }}
+              >
+                生疏
+              </Button>
               <span> </span>
-              <Button type="primary" onClick={() => {
-                memorySuccess(2)
-              }}>一般</Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  memorySuccess(2);
+                }}
+              >
+                一般
+              </Button>
               <span> </span>
-              <Button type="primary" onClick={() => {
-                memorySuccess(3)
-              }}>简单</Button>
-              <p/>
+              <Button
+                type="primary"
+                onClick={() => {
+                  memorySuccess(3);
+                }}
+              >
+                简单
+              </Button>
+              <p />
               <div>
-                <Button type="primary" onClick={async () => {
-                  await service.restart(memory);
-                  changStepMemory();
-                }}>重新开始复习</Button>
+                <Button
+                  type="primary"
+                  onClick={async () => {
+                    await service.restart(memory);
+                    findNextLine();
+                  }}
+                >
+                  重新开始复习
+                </Button>
                 <span> </span>
-                <Button type="primary" onClick={async () => {
-                  await service.noMemory(memory);
-                  changStepMemory();
-                }}>不在复习</Button>
+                <Button
+                  type="primary"
+                  onClick={async () => {
+                    await service.noMemory(memory);
+                    findNextLine();
+                  }}
+                >
+                  不在复习
+                </Button>
                 <span> </span>
-                <Button type="primary" onClick={async () => {
-                  await service.delete(memory);
-                  changStepMemory();
-                }}>删除</Button>
+                <Button
+                  type="primary"
+                  onClick={async () => {
+                    await service.delete(memory);
+                    findNextLine();
+                  }}
+                >
+                  删除
+                </Button>
               </div>
-              <p/>
+              <p />
               <div>
-                <Button type="primary" onClick={() => {
-                  changStepAdd();
-                }}>编辑</Button>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    changStepAdd();
+                  }}
+                >
+                  编辑
+                </Button>
               </div>
             </div>
-
-
           ) : (
             <div>
-              <Button type="primary" onClick={() => {
-                setState({showBack: true})
-              }}>显示答案</Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  setState({ showBack: true });
+                }}
+              >
+                显示答案
+              </Button>
             </div>
           )}
-
-
         </div>
       ) : null}
 
       {state.step === Step.ADD ? (
         <div>
           <h4>正面</h4>
-          <ReactQuill theme="snow" value={memory.front} onChange={(value) => {
-            setMemory({front: value})
-          }}/>
-          <p/>
+          <ReactQuill
+            theme="snow"
+            value={memory.front}
+            onChange={(value) => {
+              setMemory({ front: value });
+            }}
+          />
+          <p />
           <h4>反面</h4>
-          <ReactQuill theme="snow" value={memory.back} onChange={(value) => {
-            setMemory({back: value})
-          }}/>
-          <p/>
-          <Button type="primary" onClick={async () => {
-            let res;
-            if (memory != null && memory.id != null) {
-              res = await service.update(memory);
-            } else {
-              res = await service.insert(memory);
-            }
-            if (res.success) {
-              message.info('操作成功');
-              clearMemory();
-            } else {
-              message.info(`操作失败: ${res.message}`);
-            }
-          }}>确定</Button>
+          <ReactQuill
+            theme="snow"
+            value={memory.back}
+            onChange={(value) => {
+              setMemory({ back: value });
+            }}
+          />
+          <p />
+          <Button
+            type="primary"
+            onClick={async () => {
+              let res;
+              if (memory != null && memory.id != null) {
+                res = await service.update(memory);
+              } else {
+                res = await service.insert(memory);
+              }
+              if (res.success) {
+                message.info('操作成功');
+                clearMemory();
+              } else {
+                message.info(`操作失败: ${res.message}`);
+              }
+            }}
+          >
+            确定
+          </Button>
           <span> </span>
-          <Button type="primary" onClick={() => {
-            clearMemory();
-            changStepMain();
-          }}>关闭</Button>
+          <Button
+            type="primary"
+            onClick={() => {
+              clearMemory();
+              changStepMain();
+            }}
+          >
+            关闭
+          </Button>
         </div>
       ) : null}
-
-
     </PageHeaderWrapper>
   );
 };