✨ feat: 在view页面新增pick单词的功能

ChristYoung · Oct 30, 2023 · 350098d · 350098d
1 parent f66b92f
commit 350098d
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -72,4 +72,11 @@ If you are developing a production application, we recommend updating the config
       <App />
    </React.StrictMode>,
    )
-   ```
+   ```
+
+ # 启动
+  - 访问地址 http://127.0.0.1:5173/#/view
+  - daisyUI: https://daisyui.com/docs/install/
+
+
+
diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
@@ -112,7 +112,7 @@ export const Filters: React.FC<FiltersProps> = (props: FiltersProps) => {
                                         <input
                                             type="radio"
                                             id="last_7"
-                                            name="familiarFilter"
+                                            name="timeFilter"
                                             onChange={handleChange}
                                             value={-7}
                                             checked={
@@ -128,7 +128,7 @@ export const Filters: React.FC<FiltersProps> = (props: FiltersProps) => {
                                         <input
                                             type="radio"
                                             id="last_30"
-                                            name="familiarFilter"
+                                            name="timeFilter"
                                             onChange={handleChange}
                                             value={-30}
                                             checked={
@@ -144,7 +144,7 @@ export const Filters: React.FC<FiltersProps> = (props: FiltersProps) => {
                                         <input
                                             type="radio"
                                             id="last_90"
-                                            name="familiarFilter"
+                                            name="timeFilter"
                                             onChange={handleChange}
                                             value={-90}
                                             checked={

diff --git a/src/pages/ViewWords.tsx b/src/pages/ViewWords.tsx
@@ -1,38 +1,78 @@
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { HornIcon } from '../components/icons/HornIcon';
 import { getWordsListSelector } from '../store/wordsReducer/wordsSlice';
+import { useRef, useState } from 'react';
+import { WordsItem } from '../types';
+import { CiPickerEmpty } from "react-icons/ci";
+import { BiSolidBadgeCheck } from 'react-icons/bi';
+import { WORDS_SAGA } from '../store/wordsReducer/wordsSaga';
 
 export const ViewWords: React.FC = () => {
     const words = useSelector(getWordsListSelector);
+    const dispatch = useDispatch();
+    const [pickStatus, setPickStatus] = useState<boolean>(false);
+    const pickedWordIds = useRef<Map<number, boolean>>(new Map<number, boolean>());
+    const handleCheckBoxChange = (w: WordsItem) => {
+        if (pickedWordIds.current.get(w.id)) {
+            pickedWordIds.current.set(w.id, false);
+        } else {
+            pickedWordIds.current.set(w.id, true);
+        }
+    };
+    const handlePickAll = () => {
+        if (pickStatus) {
+            if (pickedWordIds.current.size > 0) {
+                setPickStatus(false);
+                const pickedWordsItems = words.filter(w => pickedWordIds.current.get(w.id));
+                dispatch({ type: WORDS_SAGA.RESET_WORDS, payload: pickedWordsItems });
+            }
+        } else {
+            setPickStatus(true);
+        }
+    }
 
     return (
-        <div className="__ViewWords">
-            <ul className="text-4xl font-mono">
-                {words.map((w, _index) => {
-                    return (
-                        <li
-                            key={w.word}
-                            className="flex py-5 px-9 mb-5
-                            shadow-custom bg-white cursor-pointer rounded-md text-gray-500
-                            dark:bg-little-dark dark:text-gray-50">
-                            <div
-                                className={`flex w-full text-lg items-center justify-between`}>
-                                <div className="flex-1">
-                                    <p className="mb-5 text-left text-3xl">
-                                        <em className="mr-5">{_index}.</em><span className="italic">{w.word}</span>
-                                    </p>
-                                    <p className="text-2xl text-left">
-                                        {w.explanations}
-                                    </p>
+        <>
+            <div className="__ViewWords">
+                <ul className="text-4xl font-mono">
+                    {words.map((w, _index) => {
+                        return (
+                            <li
+                                key={w.word}
+                                className="flex py-5 px-20 mb-5
+                                shadow-custom bg-white cursor-pointer rounded-md text-gray-500
+                                dark:bg-little-dark dark:text-gray-50 relative">
+                                { pickStatus && <div className="form-control absolute left-5 top-[20%]">
+                                    <label className="cursor-pointer label">
+                                        <input type="checkbox"
+                                            checked={pickedWordIds.current.get(w.id)}
+                                            onChange={() => handleCheckBoxChange(w)}
+                                            className="checkbox checkbox-accent" />
+                                    </label>
+                                </div> }
+                                <div
+                                    className={`flex w-full text-lg items-center justify-between`}>
+                                    <div className="flex-1">
+                                        <p className="mb-5 text-left text-3xl">
+                                            <em className="mr-5">{_index}.</em><span className="italic">{w.word}</span>
+                                        </p>
+                                        <p className="text-2xl text-left">
+                                            {w.explanations}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <HornIcon word={w.word} />
+                                    </div>
                                 </div>
-                                <div>
-                                    <HornIcon word={w.word} />
-                                </div>
-                            </div>
-                        </li>
-                    );
-                })}
-            </ul>
-        </div>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+            <button className="btn btn-circle btn-lg btn-accent text-3xl fixed right-20 bottom-20"
+                onClick={handlePickAll}>
+                { pickStatus ? <BiSolidBadgeCheck /> : <CiPickerEmpty /> }
+            </button>
+        </>
     );
 };
diff --git a/src/store/settingReducer/settingSlice.ts b/src/store/settingReducer/settingSlice.ts
@@ -13,7 +13,7 @@ export const getSettingSelector = (state: GlobalStoreType) => state.setting;
 export const INIT_STATE: SettingState = {
     autoPlayWordPronunciation: true,
     muteKeyBoardSound: false,
-    randomOrder: true,
+    randomOrder: false,
     onlyShowExplanationWhenSpelling: false,
 };
 export const settingSlice = createSlice({