Merge pull request #1 from lemeow125/feature/api

Feature/api

package-lock.json

@@ -24,6 +24,7 @@
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-query": "^3.39.3",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
         "sort-by": "^1.2.0",
@@ -5618,6 +5619,14 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -5730,6 +5739,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -11852,6 +11876,11 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12282,6 +12311,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -12447,6 +12481,14 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -12708,6 +12750,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -14676,6 +14723,31 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16575,6 +16647,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-query": "^3.39.3",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",

src/Components/Api/Api.tsx

@@ -0,0 +1,24 @@
+import axios from "axios";
+
+export function GetNotes() {
+  return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
+    return response.data;
+  });
+}
+
+export interface note {
+  title: string;
+  content: string;
+}
+
+export function AddNote(note: note) {
+  return axios
+    .post("http://localhost:8000/api/v1/notes/", note)
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function DeleteNote(id: number) {
+  return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/");
+}

src/Components/Note/Note.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import styles from "../../styles";
 import { Button } from "@mui/material";
-import axios from "axios";
+import { useMutation, useQueryClient } from "react-query";
+import { DeleteNote } from "../Api/Api";
 
 export interface props {
   title: string;
@@ -10,6 +11,13 @@ export interface props {
   date_created: string;
 }
 export default function Note(props: props) {
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: DeleteNote,
+    onSuccess: () => {
+      queryClient.invalidateQueries("notes");
+    },
+  });
   return (
     <div style={styles.flex_column}>
       <div style={styles.note}>
@@ -22,9 +30,7 @@ export default function Note(props: props) {
           style={styles.button_remove}
           variant="contained"
           onClick={() => {
-            axios.delete(
-              "http://localhost:8000/api/v1/notes/" + props.id + "/"
-            );
+            mutation.mutate(props.id);
           }}
         >
           Remove Note

src/Components/Notes/Notes.tsx

@@ -1,34 +1,14 @@
 import * as React from "react";
 import styles from "../../styles";
-import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Note from "../Note/Note";
 import { Button } from "@mui/material";
-import axios from "axios";
+import { useQuery } from "react-query";
+import { GetNotes } from "../Api/Api";
 
-export default function NoteMapper() {
+export default function Notes() {
   const navigate = useNavigate();
-  const [notes, setNotes] = useState([]);
-  const [error, setError] = useState(false);
-  function server_get() {
-    axios
-      .get("http://localhost:8000/api/v1/notes/", { timeout: 50 })
-      .then((res) => {
-        console.log("Server Response", res.data);
-        setError(false);
-        setNotes(res.data);
-      })
-      .catch((err) => {
-        setError(true);
-      });
-  }
-  useEffect(() => {
-    server_get();
-    const interval = setInterval(() => {
-      server_get();
-    }, 1000);
-    return () => clearInterval(interval);
-  }, []);
+  const { data: notes, isLoading, error } = useQuery("notes", GetNotes);
   if (error) {
     return (
       <div style={styles.note}>
@@ -36,6 +16,13 @@ export default function NoteMapper() {
       </div>
     );
   }
+  if (isLoading) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Loading Notes...</p>
+      </div>
+    );
+  }
   if (notes.length === 0) {
     return (
       <div style={styles.note}>
@@ -53,6 +40,7 @@ export default function NoteMapper() {
       </div>
     );
   }
+
   return (
     <>
       {notes.map(
@@ -63,13 +51,12 @@ export default function NoteMapper() {
             id: number;
             date_created: string;
           },
-          i
+          index: number
         ) => {
-          console.log(note);
           return (
             <Note
               id={note.id}
-              key={i}
+              key={index}
               title={note.title}
               content={note.content}
               date_created={note.date_created}

src/Routes/Home/Home.tsx

@@ -1,6 +1,6 @@
 import styles from "../../styles";
 import Header from "../../Components/Header/Header";
-import NoteMapper from "../../Components/NoteMapper/NoteMapper";
+import NoteMapper from "../../Components/Notes/Notes";
 export default function Home() {
   return (
     <div style={styles.background}>

src/Routes/NewNote/NewNote.tsx

@@ -3,8 +3,8 @@ import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import Header from "../../Components/Header/Header";
-import axios from "axios";
-import { title } from "process";
+import { AddNote } from "../../Components/Api/Api";
+import { useMutation, useQueryClient } from "react-query";
 
 export interface input {
   e: React.ChangeEvent;
@@ -15,6 +15,14 @@ export default function NewNote() {
     title: "",
     content: "",
   });
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: AddNote,
+    onSuccess: () => {
+      queryClient.invalidateQueries("notes");
+    },
+  });
+
   return (
     <div style={styles.background}>
       <Header />
@@ -43,8 +51,10 @@ export default function NewNote() {
             style={styles.button_add}
             variant="contained"
             onClick={async () => {
-              axios.post("http://localhost:8000/api/v1/notes/", note);
-              console.log("foo");
+              mutation.mutate({
+                title: note.title,
+                content: note.content,
+              });
               navigate("/");
             }}
           >

src/index.tsx

@@ -7,6 +7,10 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./Routes/Home/Home";
 import NewNote from "./Routes/NewNote/NewNote";
 
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient();
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -24,7 +28,9 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </React.StrictMode>
 );