Implment a React Context for storing chores, and adding new ones

[jackharrhy]

Best place to follow would be: https://reactjs.org/docs/hooks-reference.html#usecontext

• create a context
• create a provider
• provider should have a useState in it, and exposes via the providers value:
  • chores state variable
  • function to add chore
  • add chore should take in a name of a chore, and store an object in the shape of: { id: uuid(), chore: "name of chore" }
  • function to remove chore
  • should take in chore id, and filter it out of the list of chores
• create a custom hook that does useContext(ChoresContext)
• export the provider and custom hook
• use the custom hook in the chore add place
• use the custom hook in the chore view place

bonus:

• use react-hot-toast to pop up nice toasts on removal and add

---

Spoiler

diff --git a/src/contexts/chores.js b/src/contexts/chores.js
new file mode 100644
index 0000000..5b84b04
--- /dev/null
+++ b/src/contexts/chores.js
@@ -0,0 +1,26 @@
+import React, { useContext, useState } from "react";
+import toast from "react-hot-toast";
+
+const ChoresContext = React.createContext();
+
+export function ChoresProvider({ children }) {
+  const [chores, setChores] = useState([]);
+
+  const addChore = (chore) => {
+    toast.success(`${chore} added to chores list!`);
+    setChores([...chores, chore]);
+  };
+
+  const removeChore = (chore) => {
+    toast.success(`${chore} removed from chores list!`);
+    setChores(chores.filter((c) => c !== chore));
+  };
+
+  return (
+    <ChoresContext.Provider value={{ chores, addChore, removeChore }}>
+      {children}
+    </ChoresContext.Provider>
+  );
+}
+
+export const useChores = () => useContext(ChoresContext);
diff --git a/src/components/Choresadd.js b/src/components/Choresadd.js
index 4328607..8380872 100644
--- a/src/components/Choresadd.js
+++ b/src/components/Choresadd.js
@@ -1,47 +1,62 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
+import { useChores } from "../contexts/chores";

-const Hero = () => {
-  const [value, setValue] = useState('');
-  const handleChange = (e) => {
-    setValue(e.target.value);
+const Hero = ({ counter, setCounter }) => {
+  const { addChore } = useChores();
+
+  const [chore, setChore] = useState("");
+
+  const handleChoresChange = (e) => {
+    setChore(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // TODO add to chore list!
+    addChore(chore);
   };

-  const chores = [
-    { label: '', value: '' },
-    { label: 'Feed Pet', value: 'Feed Family Pet', id: 1 },
-    { label: 'Make Bed', value: 'Make Bed', id: 2},
-    { label: 'Clean Bedroom', value: 'Clean Bedroom', id: 3 },
-    { label: 'Wash Dishes', value: 'Wash Dishes', id: 4 },
-    { label: 'Empty Dishwasher', value: 'Empty Diswasher', id: 5 },
-    { label: 'Fold Laundry', value: 'Fold Laundry', id: 5 },
-    { label: 'Pickup Toys', value: 'Pickup Toys', id :6 },
+  const choresChoices = [
+    { label: "", value: "" },
+    { label: "Feed Pet", value: "Feed Family Pet", id: 1 },
+    { label: "Make Bed", value: "Make Bed", id: 2 },
+    { label: "Clean Bedroom", value: "Clean Bedroom", id: 3 },
+    { label: "Wash Dishes", value: "Wash Dishes", id: 4 },
+    { label: "Empty Dishwasher", value: "Empty Diswasher", id: 5 },
+    { label: "Fold Laundry", value: "Fold Laundry", id: 6 },
+    { label: "Pickup Toys", value: "Pickup Toys", id: 7 },
   ];
+
   return (
-    <div className='choreaddContainer text-center'>
-      <div className='appInfo pt-10'>
-        <h2 className='text-2xl font-semibold p-1'>
-          Add your chores below!
-        </h2>
+    <div className="choreaddContainer text-center">
+      <div className="appInfo pt-10">
+        <h2 className="text-2xl font-semibold p-1">Add your chores below!</h2>
       </div>
-      <div className='myForm pt-5'>
-        <form onChange={handleChange} className='flex flex-col w-1/3 mx-auto'>
-          <label htmlFor='chores' className='mb-3'>
-            Choose your chore:{' '}
+      <div className="myForm pt-5">
+        <form onSubmit={handleSubmit} className="flex flex-col w-1/3 mx-auto">
+          <label htmlFor="chores" className="mb-3">
+            Choose your chore:{" "}
           </label>
           <select
-            value={value}
-            name='chores'
-            className='rounded-md py-2 border border-blue-700 rounded outline-none'
+            value={chore}
+            name="chores"
+            onChange={handleChoresChange}
+            className="rounded-md py-2 border border-blue-700 rounded outline-none"
           >
-            {chores.map((chores) => (
-              <option value={chores.value}>{chores.label}</option>
+            {choresChoices.map((choice) => (
+              <option key={choice.id} value={choice.value}>
+                {choice.label}
+              </option>
             ))}
           </select>
+          <button
+            type="submit"
+            className="bg-blue-700 mt-2 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md"
+          >
+            Add Chore
+          </button>
         </form>
       </div>
-      <div>
-        <h2>{value}</h2>
-      </div>
     </div>
   );
 };
 diff --git a/src/components/Chores.js b/src/components/Chores.js
index fbc58a8..1a12ee0 100644
--- a/src/components/Chores.js
+++ b/src/components/Chores.js
@@ -1,14 +1,35 @@
-import React from 'react'
+import React from "react";
+import { useChores } from "../contexts/chores";

 const Chores = () => {
-   return (
-     <div className='choresContainer text-center'>
-       <div className='appInfo pt-10'>
-         <h2 className='text-2xl font-semibold p-1'>Chore Area</h2>
-         <p>Area for chores to be completed</p>
-       </div>
-     </div>
-   );
-}
+  const { chores, removeChore } = useChores();

-export default Chores
\ No newline at end of file
+  return (
+    <div className="choresContainer text-center">
+      <div className="appInfo pt-10">
+        <h2 className="text-2xl font-semibold p-1">Chore Area</h2>
+        <p>Area for chores to be completed</p>
+        {chores.length === 0 && (
+          <p className="italic pt-4">No chores to do! 🎉</p>
+        )}
+        {
+          <ul>
+            {chores.map((chore) => (
+              <li>
+                {chore}
+                <button
+                  className="ml-2 bg-red-400 py-0 px-0.5"
+                  onClick={() => removeChore(chore)}
+                >
+                  x
+                </button>
+              </li>
+            ))}
+          </ul>
+        }
+      </div>
+    </div>
+  );
+};
+
+export default Chores;
diff --git a/src/App.js b/src/App.js
index f3d1bc9..18bd890 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,5 @@
-import React from 'react'
-import Header from './components/Header'
-import Navigation from './components/Navigation'
-import Hero from './components/Hero'
-import Footer from './components/Footer'
+import { ChoresProvider } from "./contexts/chores";

-const App = () => {
-  return (
-    <>
-      <Header />
-      <Navigation />
-      <Hero />
-      <Footer />
-    </>
-  );
+export default function App({ children }) {
+  return <ChoresProvider>{children}</ChoresProvider>;
 }

[millerm30]

Completion of tasks assigned as well as adding hot toast for adding / completing / deleting chores.