Skip to content

Commit f3b6523

Browse files
abhishekrathoreabhishekrathore
committed
useReducer added
1 parent be793ee commit f3b6523

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
import Home from './pages/home/home';
4-
import Switch from "react-switch";
5-
import {FaSun, FaMoon} from 'react-icons/fa';
6-
import { useState } from 'react';
4+
import Switch from '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
function App() {
912
const [theme, setTheme] = useState('light');
1013
const [checked, setChecked] = useState(false);
11-
1214

13-
const changeHandler = (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+
const index = state.notes.findIndex(
26+
(note) => note.id === action.payload
27+
);
28+
let editedNotes = [...state.notes];
29+
editedNotes.splice(index, 1);
30+
return { ...state, notes: editedNotes };
31+
case 'UPDATE_NOTE':
32+
const indexUpdated = state.notes.findIndex(
33+
(note) => note.id === action.payload.id
34+
);
35+
let editedNotesUpdated = [...state.notes];
36+
editedNotesUpdated.splice(indexUpdated, 1, action.payload);
37+
return { ...state, notes: editedNotesUpdated };
38+
default:
39+
return state;
40+
}
41+
},
42+
{ notes: Notes, editMode: false, noteToBeEdited: null }
43+
);
44+
45+
const changeHandler = (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.Provider value={theme}>
25-
<Switch
26-
onChange={changeHandler}
27-
checked={checked}
28-
className='react-switch'
29-
uncheckedIcon={<FaMoon size={20} style={{paddingTop:'4px',paddingRight:'4px',float:'right'}} color="white"></FaMoon>}
30-
checkedIcon={<FaSun size={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.Provider value={{ state, dispatch }}>
57+
<ThemeContext.Provider value={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 { v4 as uuidv4 } from 'uuid';
55
import Card from '../card/card';
66
import { ThemeContext } from '../../context/theme/theme';
7+
import { StateContext } from '../../context/state/state';
78

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

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

2020
const handleChange = (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
const handleClick = (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
<option value="medium">Medium</option>
6868
<option value="low">Low</option>
6969
</select>
70-
<button onClick={handleClick}>{props.editMode ? 'Edit' : 'Add'}</button>
70+
<button onClick={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+
export type StateType = {
4+
notes: NoteType[];
5+
editMode: boolean;
6+
noteToBeEdited: NoteType | null;
7+
};
8+
export const StateContext = 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
import Note from '../../components/note/note';
3-
import { Notes } from '../../components/note/data';
43
import AddNote from '../../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
function Home() {
10-
const [notes, setNotes] = useState(Notes);
11-
const [editMode, setEditMode] = useState(false);
12-
const [noteToBeEditted, setNoteToBeEditted] = useState<NoteType | null>(null);
13-
const theme = useContext(ThemeContext)
10+
const theme = useContext(ThemeContext);
11+
const {state, dispatch} = useContext(StateContext);
1412

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

1917
const updateNote = (updatedNote: NoteType) => {
20-
const index = notes.findIndex((note) => note.id === updatedNote.id);
21-
let editedNotes = [...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
const editNote = (id: string) => {
2823
console.log('edit', id);
29-
const note = notes.find((note) => note.id === id);
30-
setEditMode(true);
24+
const note = 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
const deleteNote = (id: string) => {
37-
const index = notes.findIndex((note) => note.id === id);
38-
let editedNotes = [...notes];
39-
editedNotes.splice(index, 1);
40-
setNotes(editedNotes);
32+
dispatch({type:'DELETE_NOTE',payload:id})
4133
};
4234
return (
4335
<div className={`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)