Upload 6.22

part6/query-anecdotes/db.json

@@ -29,6 +29,11 @@
       "content": "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.",
       "id": "98312",
       "votes": 0
+    },
+    {
+      "content": "Another anecdote",
+      "id": "35036",
+      "votes": 0
     }
   ]
 }

part6/query-anecdotes/src/App.js

@@ -1,14 +1,34 @@
 import AnecdoteForm from "./components/AnecdoteForm";
 import Notification from "./components/Notification";
-import { useQuery } from "react-query";
+import { useQuery, useQueryClient, useMutation } from "react-query";
-import { getAnecdotes } from "./components/requests";
+import { getAnecdotes, updateAnecdote } from "./components/requests";
 
 const App = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation(updateAnecdote, {
+    onSuccess: (newAnecdote) => {
+      const anecdotes = queryClient.getQueryData("anecdotes");
+      queryClient.setQueryData(
+        "anecdotes",
+        anecdotes.map((oldAnecdote) =>
+          oldAnecdote.id === newAnecdote.id ? newAnecdote : oldAnecdote
+        )
+      );
+    },
+  });
+
   const handleVote = (anecdote) => {
-    console.log("vote");
+    mutation.mutate({
+      ...anecdote,
+      votes: anecdote.votes + 1,
+    });
   };
 
-  const { data: anecdotes, status } = useQuery("anecdotes", getAnecdotes);
+  const { data: anecdotes, status } = useQuery("anecdotes", getAnecdotes, {
+    retry: 1,
+    refetchOnWindowFocus: false,
+  });
 
   if (status === "loading") {
     return <div>loading...</div>;

part6/query-anecdotes/src/components/AnecdoteForm.js

@@ -1,21 +1,38 @@
+import { useQueryClient, useMutation } from "react-query";
+import { createAnecdote } from "./requests";
+
 const AnecdoteForm = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation(createAnecdote, {
+    onSuccess: (newAnecdote) => {
+      const anecdotes = queryClient.getQueryData("anecdotes");
+      queryClient.setQueryData("anecdotes", [...anecdotes, newAnecdote]);
+    },
+  });
+
+  const getId = () => (100000 * Math.random()).toFixed(0);
 
   const onCreate = (event) => {
-    event.preventDefault()
+    event.preventDefault();
-    const content = event.target.anecdote.value
+    const content = event.target.anecdote.value;
-    event.target.anecdote.value = ''
+    event.target.anecdote.value = "";
-    console.log('new anecdote')
+    mutation.mutate({
-}
+      content,
+      id: getId(),
+      votes: 0,
+    });
+  };
 
   return (
     <div>
       <h3>create new</h3>
       <form onSubmit={onCreate}>
-        <input name='anecdote' />
+        <input name="anecdote" />
         <button type="submit">create</button>
       </form>
     </div>
-  )
+  );
-}
+};
 
-export default AnecdoteForm
+export default AnecdoteForm;

part6/query-anecdotes/src/components/requests.js

@@ -1,4 +1,14 @@
 import axios from "axios";
 
-export const getAnecdotes = () =>
+const baseUrl = "http://localhost:3001/anecdotes";
-  axios.get("http://localhost:3001/anecdotes").then((res) => res.data);
+
+export const getAnecdotes = () => axios.get(baseUrl).then((res) => res.data);
+
+export const createAnecdote = (newAnecdote) =>
+  axios.post(baseUrl, newAnecdote).then((res) => res.data);
+
+export const updateAnecdote = (updatedAnecdote) =>
+  axios
+    .put(`${baseUrl}/${updatedAnecdote.id}`, updatedAnecdote)
+    .then((res) => res.data)
+    .catch((err) => console.log(err));