Upload 6.22

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 { getAnecdotes } from "./components/requests";
+import { useQuery, useQueryClient, useMutation } from "react-query";
+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()
-    const content = event.target.anecdote.value
-    event.target.anecdote.value = ''
-    console.log('new anecdote')
-}
+    event.preventDefault();
+    const content = event.target.anecdote.value;
+    event.target.anecdote.value = "";
+    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 = () =>
-  axios.get("http://localhost:3001/anecdotes").then((res) => res.data);
+const baseUrl = "http://localhost:3001/anecdotes";
+
+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));