feat: Exercise: Refactor dispatch methods to meaningful abstractions …

…inside the context

src/components/add-contact.js

@@ -3,18 +3,18 @@ import ContactForm from "./contact-form";
 import { useGlobalStore } from "./global-state";
 
 const AddContactForm = (props) => {
-  const { dispatch } = useGlobalStore();
+  const { addContact } = useGlobalStore();
 
   const onSubmit = (submitData) => {
-    dispatch({ type: "ADD_CONTACT", payload: { ...submitData } });
+    addContact({ ...submitData });
   };
 
   return (
     <ContactForm title={"Add new contact"} onSubmit={onSubmit} {...props} />
   );
 };
 
-const AddContact = ({ dispatch }) => {
+const AddContact = () => {
   const [isFormActive, setFormActive] = useState(false);
 
   return (

src/components/contact.js

@@ -3,7 +3,7 @@ import EditContact from "./edit-contact";
 import { useGlobalStore } from "./global-state";
 
 const Contact = (props) => {
-  const { dispatch } = useGlobalStore();
+  const { removeContact } = useGlobalStore();
   const { name, email, phone, id } = props;
   const [isFormActive, setFormActive] = useState(false);
 
@@ -16,7 +16,7 @@ const Contact = (props) => {
       "Are you sure, you want to remove the contact?"
     );
     if (confirm) {
-      dispatch({ type: "REMOVE_CONTACT", payload: { id } });
+      removeContact(id);
     }
   };
 

src/components/edit-contact.js

@@ -3,10 +3,10 @@ import ContactForm from "./contact-form";
 import { useGlobalStore } from "./global-state";
 
 const EditContact = ({ id, ...props }) => {
-  const { dispatch } = useGlobalStore();
+  const { editContact } = useGlobalStore();
 
   const onSubmit = (submitData) => {
-    dispatch({ type: "EDIT_CONTACT", payload: { id, ...submitData } });
+    editContact({ id, ...submitData });
   };
 
   return <ContactForm title={"Edit contact"} onSubmit={onSubmit} {...props} />;

src/components/global-state.js

@@ -20,8 +20,22 @@ export const useGlobalStore = () => {
 const GlobalProvider = ({ children }) => {
   const [contacts, dispatch] = useContacts();
 
+  const removeContact = (id) => {
+    dispatch({ type: "REMOVE_CONTACT", payload: { id } });
+  };
+
+  const editContact = (contact) => {
+    dispatch({ type: "EDIT_CONTACT", payload: contact });
+  };
+
+  const addContact = (contact) => {
+    dispatch({ type: "ADD_CONTACT", payload: contact });
+  };
+
   return (
-    <GlobalContext.Provider value={{ contacts, dispatch }}>
+    <GlobalContext.Provider
+      value={{ contacts, removeContact, editContact, addContact }}
+    >
       {children}
     </GlobalContext.Provider>
   );