feat: Exercise: Refactor dispatch methods to meaningful abstractions …

…inside the context

src/components/global-state.js

@@ -20,16 +20,16 @@ export const useGlobalStore = () => {
 const GlobalProvider = ({ children }) => {
   const [contacts, dispatch] = useContacts();
 
-  const removeContact = (id) => {
-    dispatch({ type: "REMOVE_CONTACT", payload: { id } });
+  const addContact = (payload) => {
+    dispatch({ type: "ADD_CONTACT", payload });
   };
 
-  const editContact = (contact) => {
-    dispatch({ type: "EDIT_CONTACT", payload: contact });
+  const editContact = (payload) => {
+    dispatch({ type: "EDIT_CONTACT", payload });
   };
 
-  const addContact = (contact) => {
-    dispatch({ type: "ADD_CONTACT", payload: contact });
+  const removeContact = (id) => {
+    dispatch({ type: "REMOVE_CONTACT", payload: { id } });
   };
 
   return (

src/components/use-contacts-storage.js

@@ -4,8 +4,8 @@ const useContactsStorage = ({ key, contacts, dispatch }) => {
   // Initial contacts loaded from localStorage
   useEffect(() => {
     if (localStorage.getItem(key)) {
-      const localContacts = JSON.parse(localStorage.getItem(key));
-      dispatch({ type: "INIT", payload: localContacts });
+      const payload = JSON.parse(localStorage.getItem(key));
+      dispatch({ type: "INIT", payload });
     }
   }, [key, dispatch]); // Load only once after the component mounts
 

src/components/use-contacts.js

@@ -41,6 +41,7 @@ const reducer = (state, action) => {
 
 const useContacts = () => {
   const [contacts, dispatch] = useReducer(reducer, []);
+
   // Save and retrieve happens here
   useContactsStorage({ key: "contacts", contacts, dispatch });