feat: add memo count for words

src/apis/dicts.ts

@@ -11,7 +11,7 @@ export interface DictResult {
   valueTitle: string;
   meaningTitle: string;
   extraTitle: string;
-  wordCount: number;
+  wordsCount: number;
 }
 
 export interface ListDictsResponse {

src/apis/memos.ts

@@ -0,0 +1,14 @@
+import qs from 'qs';
+import instance from './instance';
+import type { Response } from './response';
+import { unwrap } from './response';
+
+export interface CreateMemoRequest {
+  wordID: number;
+}
+
+export const useCreateMemo = () => async (request: CreateMemoRequest) =>
+  unwrap(
+    (await instance.post<Response<null>>('/memo/create', qs.stringify(request)))
+      .data,
+  );

src/apis/words.ts

@@ -9,6 +9,7 @@ export interface WordResult {
   meaning: string;
   extra: string;
   star: boolean;
+  memosCount: number;
 }
 
 export interface CreateWordRequest {

src/pages/DictPage.tsx

@@ -61,16 +61,16 @@ const DictPage: React.FC = () => {
     [search, dict?.extraTitle, words?.list],
   );
 
-  const mutateWordsList = (word: WordResult) => {
+  const mutateWordsList = (newWord: WordResult) => {
     if (dict && words) {
-      const index = words.list.findIndex(value => value.id === word.id);
+      const index = words.list.findIndex(value => value.id === newWord.id);
       mutate({
         dict,
         words: {
           total: words.total,
           list: [
             ...words.list.slice(0, index),
-            word,
+            newWord,
             ...words.list.slice(index + 1),
           ],
         },

src/pages/DictsPage.tsx

@@ -94,7 +94,7 @@ const DictsPage: React.FC = () => {
                         </Text>
                       </Space>
                     }
-                    description={`词数：${dict.wordCount}`}
+                    description={`词数：${dict.wordsCount}`}
                   />
                 </Link>
               </Card>

src/pages/MemoPage.tsx

@@ -23,6 +23,7 @@ import {
 import { useGetDict } from '../apis/dicts';
 import type { WordResult } from '../apis/words';
 import { useUpdateWord } from '../apis/words';
+import { useCreateMemo } from '../apis/memos';
 import styles from './MemoPage.module.css';
 
 const { Text } = Typography;
@@ -38,6 +39,7 @@ const MemoPage: React.FC = () => {
   const [index, setIndex] = useState(0);
   const [showValueOrMeaning, setShowValueOrMeaning] = useState(false);
   const [showExtra, setShowExtra] = useState(false);
+  const [memoIndex, setMemoIndex] = useState(0);
 
   const { dictID = '' } = useParams();
 
@@ -45,6 +47,7 @@ const MemoPage: React.FC = () => {
     id: parseInt(dictID),
   });
   const updateWord = useUpdateWord();
+  const createMemo = useCreateMemo();
 
   useEffect(() => {
     if (words?.list) {
@@ -52,22 +55,34 @@ const MemoPage: React.FC = () => {
     }
   }, [words?.list]);
 
-  const mutateWordsList = (word: WordResult) => {
+  const mutateWordsList = (newWord: WordResult) => {
     if (shuffledWords) {
       setShuffledWords([
         ...shuffledWords.slice(0, index),
-        word,
+        newWord,
         ...shuffledWords.slice(index + 1),
       ]);
     }
   };
 
-  const mutateIndex = (index: number) => {
-    setIndex(index);
+  const mutateIndex = (newIndex: number) => {
+    setIndex(newIndex);
     setShowValueOrMeaning(false);
     setShowExtra(false);
   };
 
+  const mutateMemoIndex = (newIndex: number) => {
+    if (shuffledWords && index === memoIndex) {
+      setMemoIndex(newIndex);
+      const newWord = {
+        ...shuffledWords[index],
+        memosCount: shuffledWords[index].memosCount + 1,
+      };
+      mutateWordsList(newWord);
+      void createMemo({ wordID: shuffledWords[index].id });
+    }
+  };
+
   return (
     <div className={styles.wrapper}>
       <Space className={styles.space} size="large" direction="vertical">
@@ -178,6 +193,13 @@ const MemoPage: React.FC = () => {
                 </Button>
               </Col>
             </Row>
+            <Row justify="center">
+              <Col>
+                <Text type="secondary">
+                  该单词已复习 {shuffledWords[index].memosCount} 次
+                </Text>
+              </Col>
+            </Row>
             <Row align="middle">
               <Col flex="1">
                 <Button
@@ -200,12 +222,19 @@ const MemoPage: React.FC = () => {
                     onClick={() => {
                       setShuffledWords(_.shuffle(shuffledWords));
                       mutateIndex(0);
+                      mutateMemoIndex(0);
                     }}
                   >
                     再来一次 <ReloadOutlined />
                   </Button>
                 ) : (
-                  <Button type="link" onClick={() => mutateIndex(index + 1)}>
+                  <Button
+                    type="link"
+                    onClick={() => {
+                      mutateIndex(index + 1);
+                      mutateMemoIndex(index + 1);
+                    }}
+                  >
                     下一个 <ArrowRightOutlined />
                   </Button>
                 )}