Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf3b6523

Browse files
useReducer added
1 parentbe793ee commitf3b6523

File tree

4 files changed

+101
-54
lines changed

4 files changed

+101
-54
lines changed

‎src/App.tsx‎

Lines changed: 68 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,85 @@
11
import'./App.css';
22
import{ThemeContext}from'./context/theme/theme';
33
importHomefrom'./pages/home/home';
4-
importSwitchfrom"react-switch";
5-
import{FaSun,FaMoon}from'react-icons/fa';
6-
import{useState}from'react';
4+
importSwitchfrom'react-switch';
5+
import{FaSun,FaMoon}from'react-icons/fa';
6+
import{useReducer,useState}from'react';
7+
import{NoteType}from'./components/note/note-type';
8+
import{StateContext,StateType}from'./context/state/state';
9+
import{Notes}from'./components/note/data';
710

811
functionApp(){
912
const[theme,setTheme]=useState('light');
1013
const[checked,setChecked]=useState(false);
11-
1214

13-
constchangeHandler=(check:boolean)=>{
15+
const[state,dispatch]=useReducer(
16+
(state:StateType,action:{type:string;payload:any})=>{
17+
switch(action.type){
18+
case'SET_EDIT_MODE':
19+
return{ ...state,editMode:action.payload};
20+
case'SET_NOTE_FOR_EDIT':
21+
return{ ...state,noteToBeEdited:action.payload};
22+
case'ADD_NOTE':
23+
return{ ...state,notes:[action.payload, ...state.notes]};
24+
case'DELETE_NOTE':
25+
constindex=state.notes.findIndex(
26+
(note)=>note.id===action.payload
27+
);
28+
leteditedNotes=[...state.notes];
29+
editedNotes.splice(index,1);
30+
return{ ...state,notes:editedNotes};
31+
case'UPDATE_NOTE':
32+
constindexUpdated=state.notes.findIndex(
33+
(note)=>note.id===action.payload.id
34+
);
35+
leteditedNotesUpdated=[...state.notes];
36+
editedNotesUpdated.splice(indexUpdated,1,action.payload);
37+
return{ ...state,notes:editedNotesUpdated};
38+
default:
39+
returnstate;
40+
}
41+
},
42+
{notes:Notes,editMode:false,noteToBeEdited:null}
43+
);
44+
45+
constchangeHandler=(check:boolean)=>{
1446
setChecked(!checked);
15-
if(check){
47+
if(check){
1648
setTheme('dark');
1749
}else{
18-
setTheme('light')
50+
setTheme('light');
1951
}
20-
console.log(checked,check)
21-
}
52+
console.log(checked,check);
53+
};
2254

2355
return(
24-
<ThemeContext.Providervalue={theme}>
25-
<Switch
26-
onChange={changeHandler}
27-
checked={checked}
28-
className='react-switch'
29-
uncheckedIcon={<FaMoonsize={20}style={{paddingTop:'4px',paddingRight:'4px',float:'right'}}color="white"></FaMoon>}
30-
checkedIcon={<FaSunsize={20}style={{paddingTop:'4px',paddingLeft:'4px'}}color="yellow"></FaSun>}
31-
onColor="#900"
32-
offColor="#333"
33-
onHandleColor="#000"
34-
></Switch>
35-
<Home></Home>
36-
</ThemeContext.Provider>
56+
<StateContext.Providervalue={{ state, dispatch}}>
57+
<ThemeContext.Providervalue={theme}>
58+
<Switch
59+
onChange={changeHandler}
60+
checked={checked}
61+
className="react-switch"
62+
uncheckedIcon={
63+
<FaMoon
64+
size={20}
65+
style={{paddingTop:'4px',paddingRight:'4px',float:'right'}}
66+
color="white"
67+
></FaMoon>
68+
}
69+
checkedIcon={
70+
<FaSun
71+
size={20}
72+
style={{paddingTop:'4px',paddingLeft:'4px'}}
73+
color="yellow"
74+
></FaSun>
75+
}
76+
onColor="#900"
77+
offColor="#333"
78+
onHandleColor="#000"
79+
></Switch>
80+
<Home></Home>
81+
</ThemeContext.Provider>
82+
</StateContext.Provider>
3783
);
3884
}
3985

‎src/components/add-note/add-note.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ import './add-note.css';
44
import{v4asuuidv4}from'uuid';
55
importCardfrom'../card/card';
66
import{ThemeContext}from'../../context/theme/theme';
7+
import{StateContext}from'../../context/state/state';
78

89
typeAddNoteProps={
910
addNote:(note:NoteType)=>void;
10-
editMode:boolean;
11-
noteToBeEditted:NoteType|null;
1211
updateNote:(updatedNote:NoteType)=>void;
1312
};
1413

1514
functionAddNote(props:AddNoteProps){
1615
const[text,setText]=useState('');
1716
const[priority,setPriority]=useState<Priority>('low');
1817
consttheme=useContext(ThemeContext);
18+
const{state,dispatch}=useContext(StateContext);
1919

2020
consthandleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
2121
setText(e.target.value);
@@ -28,19 +28,19 @@ function AddNote(props: AddNoteProps) {
2828
};
2929

3030
useEffect(()=>{
31-
if(props.noteToBeEditted&&props.editMode){
32-
setNoteContent(props.noteToBeEditted);
31+
if(state.noteToBeEdited&&state.editMode){
32+
setNoteContent(state.noteToBeEdited);
3333
}
34-
},[props.noteToBeEditted,props.editMode]);
34+
},[state.noteToBeEdited,state.editMode]);
3535

3636
consthandleClick=(e:React.MouseEvent<HTMLButtonElement,MouseEvent>)=>{
3737
e.preventDefault();
38-
if(props.editMode){
39-
props.noteToBeEditted&&
38+
if(state.editMode){
39+
state.noteToBeEdited&&
4040
props.updateNote({
4141
text,
4242
priority,
43-
id:props.noteToBeEditted.id,
43+
id:state.noteToBeEdited.id,
4444
});
4545
}else{
4646
props.addNote({
@@ -67,7 +67,7 @@ function AddNote(props: AddNoteProps) {
6767
<optionvalue="medium">Medium</option>
6868
<optionvalue="low">Low</option>
6969
</select>
70-
<buttononClick={handleClick}>{props.editMode ?'Edit' :'Add'}</button>
70+
<buttononClick={handleClick}>{state.editMode ?'Edit' :'Add'}</button>
7171
</form>
7272
</Card>
7373
);

‎src/context/state/state.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import{createContext}from'react';
2+
import{NoteType}from'../../components/note/note-type';
3+
exporttypeStateType={
4+
notes:NoteType[];
5+
editMode:boolean;
6+
noteToBeEdited:NoteType|null;
7+
};
8+
exportconstStateContext=createContext<{
9+
state:StateType;
10+
dispatch:any
11+
}>({}as{state:StateType;dispatch:any});

‎src/pages/home/home.tsx‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,45 @@
11
import'./home.css';
22
importNotefrom'../../components/note/note';
3-
import{Notes}from'../../components/note/data';
43
importAddNotefrom'../../components/add-note/add-note';
5-
import{useContext,useState}from'react';
4+
import{useContext}from'react';
65
import{NoteType}from'../../components/note/note-type';
76
import{ThemeContext}from'../../context/theme/theme';
7+
import{StateContext}from'../../context/state/state';
88

99
functionHome(){
10-
const[notes,setNotes]=useState(Notes);
11-
const[editMode,setEditMode]=useState(false);
12-
const[noteToBeEditted,setNoteToBeEditted]=useState<NoteType|null>(null);
13-
consttheme=useContext(ThemeContext)
10+
consttheme=useContext(ThemeContext);
11+
const{state, dispatch}=useContext(StateContext);
1412

1513
constaddNote=(note:NoteType)=>{
16-
setNotes([note, ...notes]);
14+
dispatch({type:'ADD_NOTE',payload:note})
1715
};
1816

1917
constupdateNote=(updatedNote:NoteType)=>{
20-
constindex=notes.findIndex((note)=>note.id===updatedNote.id);
21-
leteditedNotes=[...notes];
22-
editedNotes.splice(index,1,updatedNote);
23-
setNotes(editedNotes);
24-
setEditMode(false);
18+
dispatch({type:'UPDATE_NOTE',payload:updatedNote});
19+
dispatch({type:'SET_EDIT_MODE',payload:false});
2520
};
2621

2722
consteditNote=(id:string)=>{
2823
console.log('edit',id);
29-
constnote=notes.find((note)=>note.id===id);
30-
setEditMode(true);
24+
constnote=state.notes.find((note)=>note.id===id);
25+
dispatch({type:'SET_EDIT_MODE',payload:true});
3126
if(note){
32-
setNoteToBeEditted(note);
27+
dispatch({type:'SET_NOTE_FOR_EDIT',payload:note});
3328
}
3429
};
3530

3631
constdeleteNote=(id:string)=>{
37-
constindex=notes.findIndex((note)=>note.id===id);
38-
leteditedNotes=[...notes];
39-
editedNotes.splice(index,1);
40-
setNotes(editedNotes);
32+
dispatch({type:'DELETE_NOTE',payload:id})
4133
};
4234
return(
4335
<divclassName={`home${theme}`}>
44-
<h2>Notes App [{notes.length}]</h2>
36+
<h2>Notes App [{state.notes.length}]</h2>
4537
<AddNote
4638
addNote={addNote}
47-
editMode={editMode}
48-
noteToBeEditted={noteToBeEditted}
4939
updateNote={updateNote}
5040
></AddNote>
5141
<div>
52-
{notes.map((note)=>(
42+
{state.notes.map((note)=>(
5343
<Note
5444
key={note.id}
5545
id={note.id}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp