From 45b45c365b59ac5b7368a580885f583a58841875 Mon Sep 17 00:00:00 2001
From: Andrew Trieu <andrew.trieu@kempower.com>
Date: Sat, 24 Jun 2023 16:34:34 +0300
Subject: [PATCH] Upload 6.22

---
 part6/query-anecdotes/db.json                 |  7 +++-
 part6/query-anecdotes/src/App.js              | 28 ++++++++++++---
 .../src/components/AnecdoteForm.js            | 35 ++++++++++++++-----
 .../src/components/requests.js                | 14 ++++++--
 4 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/part6/query-anecdotes/db.json b/part6/query-anecdotes/db.json
index f195f28..96af164 100644
--- a/part6/query-anecdotes/db.json
+++ b/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
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/part6/query-anecdotes/src/App.js b/part6/query-anecdotes/src/App.js
index ac7728d..8a3acd6 100644
--- a/part6/query-anecdotes/src/App.js
+++ b/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>;
diff --git a/part6/query-anecdotes/src/components/AnecdoteForm.js b/part6/query-anecdotes/src/components/AnecdoteForm.js
index a9d7d45..a054e28 100644
--- a/part6/query-anecdotes/src/components/AnecdoteForm.js
+++ b/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;
diff --git a/part6/query-anecdotes/src/components/requests.js b/part6/query-anecdotes/src/components/requests.js
index ca1731e..4a50241 100644
--- a/part6/query-anecdotes/src/components/requests.js
+++ b/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));