fix: add pagination for word list

src/pages/DictPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import {
   List,
@@ -48,20 +48,35 @@ const DictPage: React.FC = () => {
   const updateWord = useUpdateWord();
   const deleteWord = useDeleteWord();
 
-  const mutateWordsList = (word: WordResult, index: number) =>
-    dict &&
-    words &&
-    mutate({
-      dict,
-      words: {
-        total: words.total,
-        list: [
-          ...words.list.slice(0, index),
-          word,
-          ...words.list.slice(index + 1),
-        ],
-      },
-    });
+  const filteredWordsList = useMemo(
+    () =>
+      search
+        ? words?.list.filter(
+            word =>
+              word.value.includes(search) ||
+              word.meaning.includes(search) ||
+              (dict?.extraTitle && word.extra.includes(search)),
+          )
+        : words?.list,
+    [search, dict?.extraTitle, words?.list],
+  );
+
+  const mutateWordsList = (word: WordResult) => {
+    if (dict && words) {
+      const index = words.list.findIndex(value => value.id === word.id);
+      mutate({
+        dict,
+        words: {
+          total: words.total,
+          list: [
+            ...words.list.slice(0, index),
+            word,
+            ...words.list.slice(index + 1),
+          ],
+        },
+      });
+    }
+  };
 
   return (
     <div className={styles.wrapper}>
@@ -105,17 +120,8 @@ const DictPage: React.FC = () => {
           </Row>
         }
         loading={loading}
-        dataSource={
-          search
-            ? words?.list.filter(
-                word =>
-                  word.value.includes(search) ||
-                  word.meaning.includes(search) ||
-                  (dict?.extraTitle && word.extra.includes(search)),
-              )
-            : words?.list
-        }
-        renderItem={(word, index) => (
+        dataSource={filteredWordsList}
+        renderItem={word => (
           <List.Item
             actions={[
               <Button
@@ -138,7 +144,7 @@ const DictPage: React.FC = () => {
                   void (async () => {
                     try {
                       const newWord = { ...word, star: !word.star };
-                      mutateWordsList(newWord, index);
+                      mutateWordsList(newWord);
                       await updateWord(newWord);
                     } catch (err) {
                       if (err instanceof Error) {
@@ -187,6 +193,7 @@ const DictPage: React.FC = () => {
             />
           </List.Item>
         )}
+        pagination={{}}
       />
       {dict && (
         <>

src/pages/MemoPage.tsx

@@ -52,13 +52,15 @@ const MemoPage: React.FC = () => {
     }
   }, [words?.list]);
 
-  const mutateWordsList = (word: WordResult, index: number) =>
-    shuffledWords &&
-    setShuffledWords([
-      ...shuffledWords.slice(0, index),
-      word,
-      ...shuffledWords.slice(index + 1),
-    ]);
+  const mutateWordsList = (word: WordResult) => {
+    if (shuffledWords) {
+      setShuffledWords([
+        ...shuffledWords.slice(0, index),
+        word,
+        ...shuffledWords.slice(index + 1),
+      ]);
+    }
+  };
 
   const mutateIndex = (index: number) => {
     setIndex(index);
@@ -162,7 +164,7 @@ const MemoPage: React.FC = () => {
                           ...shuffledWords[index],
                           star: !shuffledWords[index].star,
                         };
-                        mutateWordsList(newWord, index);
+                        mutateWordsList(newWord);
                         await updateWord(newWord);
                       } catch (err) {
                         if (err instanceof Error) {