Skip to content

Commit

Permalink
✨ feat: 在view页面新增pick单词的功能
Browse files Browse the repository at this point in the history
  • Loading branch information
ChristYoung committed Oct 30, 2023
1 parent f66b92f commit 350098d
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 33 deletions.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/



6 changes: 3 additions & 3 deletions src/components/Filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand All @@ -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={
Expand All @@ -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={
Expand Down
96 changes: 68 additions & 28 deletions src/pages/ViewWords.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
2 changes: 1 addition & 1 deletion src/store/settingReducer/settingSlice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down

0 comments on commit 350098d

Please sign in to comment.