Editing & deleting

Author: samselikoff

src/App.js

@@ -29,12 +29,19 @@ function App() {
     setData({ ...data });
   }
 
+  function removeResource(resourceName, id) {
+    let rest = data[resourceName].filter(resource => resource.id !== id);
+    data[resourceName] = [...rest];
+    setData({ ...data });
+  }
+
   let storeContextValue = {
     data,
     fetched,
     updateCollection,
     addToCollection,
-    replaceResource
+    replaceResource,
+    removeResource
   };
 
   return (

src/hooks/resources.js

@@ -29,7 +29,7 @@ export function useCreate(resourceName) {
     return new Promise((resolve, reject) => {
       fetch(`/api/${resourceName}s`, {
         method: "POST",
-        body: JSON.stringify({ resource })
+        body: JSON.stringify({ [resourceName]: resource })
       })
         .then(response => response.json())
         .then(json => {
@@ -46,7 +46,7 @@ export function useCreate(resourceName) {
 
 export function useResource(resourceName, id) {
   let [isSaving, setIsSaving] = useState(false);
-  let { data, replaceResource } = useContext(StoreContext);
+  let { data, replaceResource, removeResource } = useContext(StoreContext);
 
   let resource = data[resourceName].find(resource => resource.id === id);
 
@@ -68,5 +68,13 @@ export function useResource(resourceName, id) {
     });
   }
 
-  return [resource, { save, isSaving }];
+  function destroy() {
+    return fetch(`/api/${resourceName}s/${id}`, {
+      method: "DELETE"
+    }).then(() => {
+      removeResource(resourceName, id);
+    });
+  }
+
+  return [resource, { save, isSaving, destroy }];
 }

src/pages/admin.js

@@ -121,11 +121,10 @@ function TodoList({ todos, updateTodos, removeTodo }) {
 
 function Todo({ todo: seedTodo, didSave, didDelete }) {
   let [isEditing, setIsEditing] = useState(false);
-  // let [isSaving, setIsSaving] = useState(false);
   let [localTodo, setLocalTodo] = useState({ ...seedTodo });
   let [isChecked, setIsChecked] = useState(false);
 
-  let [todo, { save, isSaving }] = useResource("todo", seedTodo.id);
+  let [todo, { save, isSaving, destroy }] = useResource("todo", seedTodo.id);
 
   function handleCheckboxChange(event) {
     setIsChecked(event.target.checked);
@@ -134,16 +133,12 @@ function Todo({ todo: seedTodo, didSave, didDelete }) {
   useEffect(() => {
     if (isChecked) {
       let id = setTimeout(() => {
-        fetch(`/api/todos/${todo.id}`, {
-          method: "DELETE"
-        }).then(() => {
-          didDelete(todo);
-        });
+        destroy();
       }, 1000);
 
       return () => clearTimeout(id);
     }
-  }, [isChecked, todo, didDelete]);
+  }, [isChecked, destroy]);
 
   function handleCheckboxClick(event) {
     event.stopPropagation();