Upload 6.20

part6/query-anecdotes/src/App.js

@@ -0,0 +1,41 @@
+import AnecdoteForm from "./components/AnecdoteForm";
+import Notification from "./components/Notification";
+import { useQuery } from "react-query";
+import { getAnecdotes } from "./components/requests";
+
+const App = () => {
+  const handleVote = (anecdote) => {
+    console.log("vote");
+  };
+
+  const { data: anecdotes, status } = useQuery("anecdotes", getAnecdotes);
+
+  if (status === "loading") {
+    return <div>loading...</div>;
+  }
+
+  if (status === "error") {
+    return <div>error</div>;
+  }
+
+  return (
+    <div>
+      <h3>Anecdote app</h3>
+
+      <Notification />
+      <AnecdoteForm />
+
+      {anecdotes.map((anecdote) => (
+        <div key={anecdote.id}>
+          <div>{anecdote.content}</div>
+          <div>
+            has {anecdote.votes}
+            <button onClick={() => handleVote(anecdote)}>vote</button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default App;

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

@@ -0,0 +1,21 @@
+const AnecdoteForm = () => {
+
+  const onCreate = (event) => {
+    event.preventDefault()
+    const content = event.target.anecdote.value
+    event.target.anecdote.value = ''
+    console.log('new anecdote')
+}
+
+  return (
+    <div>
+      <h3>create new</h3>
+      <form onSubmit={onCreate}>
+        <input name='anecdote' />
+        <button type="submit">create</button>
+      </form>
+    </div>
+  )
+}
+
+export default AnecdoteForm

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

@@ -0,0 +1,18 @@
+const Notification = () => {
+  const style = {
+    border: 'solid',
+    padding: 10,
+    borderWidth: 1,
+    marginBottom: 5
+  }
+  
+  if (true) return null
+
+  return (
+    <div style={style}>
+      
+    </div>
+  )
+}
+
+export default Notification

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

@@ -0,0 +1,4 @@
+import axios from "axios";
+
+export const getAnecdotes = () =>
+  axios.get("http://localhost:3001/anecdotes").then((res) => res.data);

part6/query-anecdotes/src/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+import App from "./App";
+
+const queryClient = new QueryClient();
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>
+);