moved dispatch to components

Author: abhishekrathore

src/App.tsx

@@ -4,9 +4,9 @@ import Home from './pages/home/home';
 import Switch from 'react-switch';
 import { FaSun, FaMoon } from 'react-icons/fa';
 import { useReducer, useState } from 'react';
-import { NoteType } from './components/note/note-type';
 import { StateContext, StateType } from './context/state/state';
 import { Notes } from './components/note/data';
+import { ADD_NOTE, DELETE_NOTE, SET_EDIT_MODE, SET_NOTE_FOR_EDIT, UPDATE_NOTE } from './actions';
 
 function App() {
   const [theme, setTheme] = useState('light');
@@ -15,20 +15,20 @@ function App() {
   const [state, dispatch] = useReducer(
     (state: StateType, action: { type: string; payload: any }) => {
       switch (action.type) {
-        case 'SET_EDIT_MODE':
+        case SET_EDIT_MODE:
           return { ...state, editMode: action.payload };
-        case 'SET_NOTE_FOR_EDIT':
+        case SET_NOTE_FOR_EDIT:
           return { ...state, noteToBeEdited: action.payload };
-        case 'ADD_NOTE':
+        case ADD_NOTE:
           return { ...state, notes: [action.payload, ...state.notes] };
-        case 'DELETE_NOTE':
+        case DELETE_NOTE:
           const index = state.notes.findIndex(
             (note) => note.id === action.payload
           );
           let editedNotes = [...state.notes];
           editedNotes.splice(index, 1);
           return { ...state, notes: editedNotes };
-        case 'UPDATE_NOTE':
+        case UPDATE_NOTE:
           const indexUpdated = state.notes.findIndex(
             (note) => note.id === action.payload.id
           );
@@ -49,7 +49,6 @@ function App() {
     } else {
       setTheme('light');
     }
-    console.log(checked, check);
   };
 
   return (

src/actions/index.tsx

@@ -0,0 +1,6 @@
+export const SET_EDIT_MODE = 'SET_EDIT_MODE';
+export const SET_NOTE_FOR_EDIT = 'SET_NOTE_FOR_EDIT';
+export const ADD_NOTE = 'ADD_NOTE';
+export const DELETE_NOTE = 'DELETE_NOTE';
+export const UPDATE_NOTE = 'UPDATE_NOTE';  
+export type ALL_ACTIONS =  'SET_EDIT_MODE' | 'SET_NOTE_FOR_EDIT' | 'ADD_NOTE' | 'DELETE_NOTE' | 'UPDATE_NOTE'

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

@@ -5,23 +5,20 @@ import { v4 as uuidv4 } from 'uuid';
 import Card from '../card/card';
 import { ThemeContext } from '../../context/theme/theme';
 import { StateContext } from '../../context/state/state';
+import { ADD_NOTE, UPDATE_NOTE, SET_EDIT_MODE } from '../../actions';
 
-type AddNoteProps = {
-  addNote: (note: NoteType) => void;
-  updateNote: (updatedNote: NoteType) => void;
-};
+type AddNoteProps = {};
 
 function AddNote(props: AddNoteProps) {
   const [text, setText] = useState('');
   const [priority, setPriority] = useState<Priority>('low');
   const theme = useContext(ThemeContext);
-  const {state,dispatch} = useContext(StateContext);
-  
+  const { state, dispatch } = useContext(StateContext);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
   };
 
-
   const setNoteContent = (note: NoteType) => {
     setText(note.text);
     setPriority(note.priority);
@@ -37,16 +34,23 @@ function AddNote(props: AddNoteProps) {
     e.preventDefault();
     if (state.editMode) {
       state.noteToBeEdited &&
-        props.updateNote({
-          text,
-          priority,
-          id: state.noteToBeEdited.id,
+        dispatch({
+          type: UPDATE_NOTE,
+          payload: {
+            text,
+            priority,
+            id: state.noteToBeEdited.id,
+          },
         });
+      dispatch({ type: SET_EDIT_MODE, payload: false });
     } else {
-      props.addNote({
-        text,
-        priority,
-        id: uuidv4(),
+      dispatch({
+        type: ADD_NOTE,
+        payload: {
+          text,
+          priority,
+          id: uuidv4(),
+        },
       });
     }
 
@@ -59,7 +63,7 @@ function AddNote(props: AddNoteProps) {
   };
 
   return (
-    <Card bgColor={theme==='dark'? '#333':'#ddd'} height="2" padding="1">
+    <Card bgColor={theme === 'dark' ? '#333' : '#ddd'} height="2" padding="1">
       <form className="add-note">
         <input type="text" onChange={handleChange} value={text} />
         <select onChange={handleSelect} value={priority}>

src/components/note/note.tsx

@@ -1,34 +1,46 @@
 import './note.css';
 
-import { ColorLight, ColorDark, Priority } from './note-type';
+import { ColorLight, ColorDark, Priority, NoteType } from './note-type';
 import Card from '../card/card';
 import { FaTrash, FaEdit } from 'react-icons/fa';
 import { useContext } from 'react';
 import { ThemeContext } from '../../context/theme/theme';
+import { StateContext } from '../../context/state/state';
+import { DELETE_NOTE, SET_EDIT_MODE, SET_NOTE_FOR_EDIT } from '../../actions';
 
 type NoteProps = {
   id: string;
   text: string;
   priority?: Priority;
-  editNote: (id: string) => void;
-  deleteNote: (id: string) => void;
+  note: NoteType
 };
 
 function Note(props: NoteProps) {
   const theme = useContext(ThemeContext);
+  const {dispatch} = useContext(StateContext);
+
+  const editNote = (note:NoteType) => {
+    dispatch({type:SET_EDIT_MODE,payload:true});
+    dispatch({type:SET_NOTE_FOR_EDIT,payload:note});
+  };
 
   return (
     <Card
-      bgColor={ theme ==='dark'? props.priority && ColorDark[props.priority]:
-      props.priority && ColorLight[props.priority]}
+      bgColor={
+        theme === 'dark'
+          ? props.priority && ColorDark[props.priority]
+          : props.priority && ColorLight[props.priority]
+      }
       height="2"
       padding="1"
     >
       <>
         <div>{props.text}</div>
         <div className="right-corner">
-          <FaEdit onClick={() => props.editNote(props.id)}></FaEdit>
-          <FaTrash onClick={() => props.deleteNote(props.id)}></FaTrash>
+          <FaEdit onClick={() => editNote(props.note)}></FaEdit>
+          <FaTrash
+            onClick={() => dispatch({ type: DELETE_NOTE, payload: props.id })}
+          ></FaTrash>
         </div>
       </>
     </Card>

src/context/state/state.tsx

@@ -1,11 +1,17 @@
 import { createContext } from 'react';
+import { ALL_ACTIONS } from '../../actions';
 import { NoteType } from '../../components/note/note-type';
 export type StateType = {
   notes: NoteType[];
   editMode: boolean;
   noteToBeEdited: NoteType | null;
 };
+export type ActionType = {
+  type: ALL_ACTIONS,
+  payload: any
+}
+
 export const StateContext = createContext<{
   state: StateType;
-  dispatch: any
-}>({} as { state: StateType; dispatch:any  });
+  dispatch: (action:ActionType)=>void
+}>({} as { state: StateType; dispatch:(action:ActionType)=>void  });

src/pages/home/home.tsx

@@ -2,51 +2,25 @@ import './home.css';
 import Note from '../../components/note/note';
 import AddNote from '../../components/add-note/add-note';
 import { useContext } from 'react';
-import { NoteType } from '../../components/note/note-type';
 import { ThemeContext } from '../../context/theme/theme';
 import { StateContext } from '../../context/state/state';
 
 function Home() {
   const theme = useContext(ThemeContext);
-  const {state, dispatch} = useContext(StateContext);
+  const {state} = useContext(StateContext);
 
-  const addNote = (note: NoteType) => {
-      dispatch({type:'ADD_NOTE',payload:note})
-  };
-
-  const updateNote = (updatedNote: NoteType) => {
-    dispatch({type:'UPDATE_NOTE',payload:updatedNote});
-    dispatch({type:'SET_EDIT_MODE',payload:false});
-  };
-
-  const editNote = (id: string) => {
-    console.log('edit', id);
-    const note = state.notes.find((note) => note.id === id);
-    dispatch({type:'SET_EDIT_MODE',payload:true});
-    if (note) {
-      dispatch({type:'SET_NOTE_FOR_EDIT',payload:note});
-    }
-  };
-
-  const deleteNote = (id: string) => {
-       dispatch({type:'DELETE_NOTE',payload:id})
-  };
   return (
     <div className={`home ${theme}`}>
       <h2>Notes App [{state.notes.length}]</h2>
-      <AddNote
-        addNote={addNote}
-        updateNote={updateNote}
-      ></AddNote>
+      <AddNote></AddNote>
       <div>
         {state.notes.map((note) => (
           <Note
             key={note.id}
             id={note.id}
             priority={note.priority}
             text={note.text}
-            editNote={editNote}
-            deleteNote={deleteNote}
+            note={note}
           ></Note>
         ))}
       </div>