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

Commitd0af57b

Browse files
moved dispatch to components
1 parentf3b6523 commitd0af57b

File tree

6 files changed

+62
-61
lines changed

6 files changed

+62
-61
lines changed

‎src/App.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import Home from './pages/home/home';
44
importSwitchfrom'react-switch';
55
import{FaSun,FaMoon}from'react-icons/fa';
66
import{useReducer,useState}from'react';
7-
import{NoteType}from'./components/note/note-type';
87
import{StateContext,StateType}from'./context/state/state';
98
import{Notes}from'./components/note/data';
9+
import{ADD_NOTE,DELETE_NOTE,SET_EDIT_MODE,SET_NOTE_FOR_EDIT,UPDATE_NOTE}from'./actions';
1010

1111
functionApp(){
1212
const[theme,setTheme]=useState('light');
@@ -15,20 +15,20 @@ function App() {
1515
const[state,dispatch]=useReducer(
1616
(state:StateType,action:{type:string;payload:any})=>{
1717
switch(action.type){
18-
case'SET_EDIT_MODE':
18+
caseSET_EDIT_MODE:
1919
return{ ...state,editMode:action.payload};
20-
case'SET_NOTE_FOR_EDIT':
20+
caseSET_NOTE_FOR_EDIT:
2121
return{ ...state,noteToBeEdited:action.payload};
22-
case'ADD_NOTE':
22+
caseADD_NOTE:
2323
return{ ...state,notes:[action.payload, ...state.notes]};
24-
case'DELETE_NOTE':
24+
caseDELETE_NOTE:
2525
constindex=state.notes.findIndex(
2626
(note)=>note.id===action.payload
2727
);
2828
leteditedNotes=[...state.notes];
2929
editedNotes.splice(index,1);
3030
return{ ...state,notes:editedNotes};
31-
case'UPDATE_NOTE':
31+
caseUPDATE_NOTE:
3232
constindexUpdated=state.notes.findIndex(
3333
(note)=>note.id===action.payload.id
3434
);
@@ -49,7 +49,6 @@ function App() {
4949
}else{
5050
setTheme('light');
5151
}
52-
console.log(checked,check);
5352
};
5453

5554
return(

‎src/actions/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
exportconstSET_EDIT_MODE='SET_EDIT_MODE';
2+
exportconstSET_NOTE_FOR_EDIT='SET_NOTE_FOR_EDIT';
3+
exportconstADD_NOTE='ADD_NOTE';
4+
exportconstDELETE_NOTE='DELETE_NOTE';
5+
exportconstUPDATE_NOTE='UPDATE_NOTE';
6+
exporttypeALL_ACTIONS='SET_EDIT_MODE'|'SET_NOTE_FOR_EDIT'|'ADD_NOTE'|'DELETE_NOTE'|'UPDATE_NOTE'

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

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,20 @@ import { v4 as uuidv4 } from 'uuid';
55
importCardfrom'../card/card';
66
import{ThemeContext}from'../../context/theme/theme';
77
import{StateContext}from'../../context/state/state';
8+
import{ADD_NOTE,UPDATE_NOTE,SET_EDIT_MODE}from'../../actions';
89

9-
typeAddNoteProps={
10-
addNote:(note:NoteType)=>void;
11-
updateNote:(updatedNote:NoteType)=>void;
12-
};
10+
typeAddNoteProps={};
1311

1412
functionAddNote(props:AddNoteProps){
1513
const[text,setText]=useState('');
1614
const[priority,setPriority]=useState<Priority>('low');
1715
consttheme=useContext(ThemeContext);
18-
const{state,dispatch}=useContext(StateContext);
19-
16+
const{state,dispatch}=useContext(StateContext);
17+
2018
consthandleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
2119
setText(e.target.value);
2220
};
2321

24-
2522
constsetNoteContent=(note:NoteType)=>{
2623
setText(note.text);
2724
setPriority(note.priority);
@@ -37,16 +34,23 @@ function AddNote(props: AddNoteProps) {
3734
e.preventDefault();
3835
if(state.editMode){
3936
state.noteToBeEdited&&
40-
props.updateNote({
41-
text,
42-
priority,
43-
id:state.noteToBeEdited.id,
37+
dispatch({
38+
type:UPDATE_NOTE,
39+
payload:{
40+
text,
41+
priority,
42+
id:state.noteToBeEdited.id,
43+
},
4444
});
45+
dispatch({type:SET_EDIT_MODE,payload:false});
4546
}else{
46-
props.addNote({
47-
text,
48-
priority,
49-
id:uuidv4(),
47+
dispatch({
48+
type:ADD_NOTE,
49+
payload:{
50+
text,
51+
priority,
52+
id:uuidv4(),
53+
},
5054
});
5155
}
5256

@@ -59,7 +63,7 @@ function AddNote(props: AddNoteProps) {
5963
};
6064

6165
return(
62-
<CardbgColor={theme==='dark'?'#333':'#ddd'}height="2"padding="1">
66+
<CardbgColor={theme==='dark'?'#333' :'#ddd'}height="2"padding="1">
6367
<formclassName="add-note">
6468
<inputtype="text"onChange={handleChange}value={text}/>
6569
<selectonChange={handleSelect}value={priority}>

‎src/components/note/note.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,46 @@
11
import'./note.css';
22

3-
import{ColorLight,ColorDark,Priority}from'./note-type';
3+
import{ColorLight,ColorDark,Priority,NoteType}from'./note-type';
44
importCardfrom'../card/card';
55
import{FaTrash,FaEdit}from'react-icons/fa';
66
import{useContext}from'react';
77
import{ThemeContext}from'../../context/theme/theme';
8+
import{StateContext}from'../../context/state/state';
9+
import{DELETE_NOTE,SET_EDIT_MODE,SET_NOTE_FOR_EDIT}from'../../actions';
810

911
typeNoteProps={
1012
id:string;
1113
text:string;
1214
priority?:Priority;
13-
editNote:(id:string)=>void;
14-
deleteNote:(id:string)=>void;
15+
note:NoteType
1516
};
1617

1718
functionNote(props:NoteProps){
1819
consttheme=useContext(ThemeContext);
20+
const{dispatch}=useContext(StateContext);
21+
22+
consteditNote=(note:NoteType)=>{
23+
dispatch({type:SET_EDIT_MODE,payload:true});
24+
dispatch({type:SET_NOTE_FOR_EDIT,payload:note});
25+
};
1926

2027
return(
2128
<Card
22-
bgColor={theme==='dark'?props.priority&&ColorDark[props.priority]:
23-
props.priority&&ColorLight[props.priority]}
29+
bgColor={
30+
theme==='dark'
31+
?props.priority&&ColorDark[props.priority]
32+
:props.priority&&ColorLight[props.priority]
33+
}
2434
height="2"
2535
padding="1"
2636
>
2737
<>
2838
<div>{props.text}</div>
2939
<divclassName="right-corner">
30-
<FaEditonClick={()=>props.editNote(props.id)}></FaEdit>
31-
<FaTrashonClick={()=>props.deleteNote(props.id)}></FaTrash>
40+
<FaEditonClick={()=>editNote(props.note)}></FaEdit>
41+
<FaTrash
42+
onClick={()=>dispatch({type:DELETE_NOTE,payload:props.id})}
43+
></FaTrash>
3244
</div>
3345
</>
3446
</Card>

‎src/context/state/state.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import{createContext}from'react';
2+
import{ALL_ACTIONS}from'../../actions';
23
import{NoteType}from'../../components/note/note-type';
34
exporttypeStateType={
45
notes:NoteType[];
56
editMode:boolean;
67
noteToBeEdited:NoteType|null;
78
};
9+
exporttypeActionType={
10+
type:ALL_ACTIONS,
11+
payload:any
12+
}
13+
814
exportconstStateContext=createContext<{
915
state:StateType;
10-
dispatch:any
11-
}>({}as{state:StateType;dispatch:any});
16+
dispatch:(action:ActionType)=>void
17+
}>({}as{state:StateType;dispatch:(action:ActionType)=>void});

‎src/pages/home/home.tsx‎

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,25 @@ import './home.css';
22
importNotefrom'../../components/note/note';
33
importAddNotefrom'../../components/add-note/add-note';
44
import{useContext}from'react';
5-
import{NoteType}from'../../components/note/note-type';
65
import{ThemeContext}from'../../context/theme/theme';
76
import{StateContext}from'../../context/state/state';
87

98
functionHome(){
109
consttheme=useContext(ThemeContext);
11-
const{state, dispatch}=useContext(StateContext);
10+
const{state}=useContext(StateContext);
1211

13-
constaddNote=(note:NoteType)=>{
14-
dispatch({type:'ADD_NOTE',payload:note})
15-
};
16-
17-
constupdateNote=(updatedNote:NoteType)=>{
18-
dispatch({type:'UPDATE_NOTE',payload:updatedNote});
19-
dispatch({type:'SET_EDIT_MODE',payload:false});
20-
};
21-
22-
consteditNote=(id:string)=>{
23-
console.log('edit',id);
24-
constnote=state.notes.find((note)=>note.id===id);
25-
dispatch({type:'SET_EDIT_MODE',payload:true});
26-
if(note){
27-
dispatch({type:'SET_NOTE_FOR_EDIT',payload:note});
28-
}
29-
};
30-
31-
constdeleteNote=(id:string)=>{
32-
dispatch({type:'DELETE_NOTE',payload:id})
33-
};
3412
return(
3513
<divclassName={`home${theme}`}>
3614
<h2>Notes App [{state.notes.length}]</h2>
37-
<AddNote
38-
addNote={addNote}
39-
updateNote={updateNote}
40-
></AddNote>
15+
<AddNote></AddNote>
4116
<div>
4217
{state.notes.map((note)=>(
4318
<Note
4419
key={note.id}
4520
id={note.id}
4621
priority={note.priority}
4722
text={note.text}
48-
editNote={editNote}
49-
deleteNote={deleteNote}
23+
note={note}
5024
></Note>
5125
))}
5226
</div>

0 commit comments

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