From fed73b1964e60436e692f1529f68414df22eb4c5 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 20:39:01 +0800 Subject: [PATCH 1/9] Rename notemapper to notes for easier recognition --- src/Components/{NoteMapper/NoteMapper.tsx => Notes/Notes.tsx} | 2 +- src/Routes/Home/Home.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/Components/{NoteMapper/NoteMapper.tsx => Notes/Notes.tsx} (94%) diff --git a/src/Components/NoteMapper/NoteMapper.tsx b/src/Components/Notes/Notes.tsx similarity index 94% rename from src/Components/NoteMapper/NoteMapper.tsx rename to src/Components/Notes/Notes.tsx index 5334f63..6906e75 100644 --- a/src/Components/NoteMapper/NoteMapper.tsx +++ b/src/Components/Notes/Notes.tsx @@ -6,7 +6,7 @@ import Note from "../Note/Note"; import { Button } from "@mui/material"; import axios from "axios"; -export default function NoteMapper() { +export default function Notes() { const navigate = useNavigate(); const [notes, setNotes] = useState([]); const [error, setError] = useState(false); diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx index b60e7ed..a967ab8 100644 --- a/src/Routes/Home/Home.tsx +++ b/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 (
From d12d21624f71d5071667afeb80cfbdc8c03f38c5 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 20:43:31 +0800 Subject: [PATCH 2/9] Added react query client provider to index.tsx --- package-lock.json | 81 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/index.tsx | 8 ++++- 3 files changed, 89 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 9bec7d1..d701c1a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index fee4f50..bec398c 100644 --- a/package.json +++ b/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", diff --git a/src/index.tsx b/src/index.tsx index 9c855d2..320d3b5 100644 --- a/src/index.tsx +++ b/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( - + + + ); From a7b556d0dd9022b2ff8d59c525369858315281ab Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 21:18:16 +0800 Subject: [PATCH 3/9] Converted main page to use react query --- src/Components/Notes/Notes.tsx | 45 +++++++++++++++++----------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx index 6906e75..d877107 100644 --- a/src/Components/Notes/Notes.tsx +++ b/src/Components/Notes/Notes.tsx @@ -5,30 +5,21 @@ 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"; 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", () => { + return fetch("http://localhost:8000/api/v1/notes/").then((res) => { + const result = res.json(); + console.log(); + return result; + }); + }); if (error) { return (
@@ -36,6 +27,13 @@ export default function Notes() {
); } + if (isLoading) { + return ( +
+

Loading Notes...

+
+ ); + } if (notes.length === 0) { return (
@@ -53,6 +51,7 @@ export default function Notes() {
); } + return ( <> {notes.map( @@ -63,13 +62,13 @@ export default function Notes() { id: number; date_created: string; }, - i + index: number ) => { console.log(note); return ( Date: Sat, 25 Feb 2023 21:21:23 +0800 Subject: [PATCH 4/9] Moved fetch query to own function --- src/Components/Api/Api.tsx | 7 +++++++ src/Components/Notes/Notes.tsx | 13 ++----------- 2 files changed, 9 insertions(+), 11 deletions(-) create mode 100644 src/Components/Api/Api.tsx diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx new file mode 100644 index 0000000..947730c --- /dev/null +++ b/src/Components/Api/Api.tsx @@ -0,0 +1,7 @@ +export function GetNotes() { + return fetch("http://localhost:8000/api/v1/notes/").then((res) => { + const result = res.json(); + console.log(); + return result; + }); +} diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx index d877107..3ef5c35 100644 --- a/src/Components/Notes/Notes.tsx +++ b/src/Components/Notes/Notes.tsx @@ -6,20 +6,11 @@ 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 Notes() { const navigate = useNavigate(); - const { - data: notes, - isLoading, - error, - } = useQuery("notes", () => { - return fetch("http://localhost:8000/api/v1/notes/").then((res) => { - const result = res.json(); - console.log(); - return result; - }); - }); + const { data: notes, isLoading, error } = useQuery("notes", GetNotes); if (error) { return (
From 044f45e038e8b7060a5267d499eb411af8cb3413 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 21:27:26 +0800 Subject: [PATCH 5/9] Polished api and moved from axios to fetch --- src/Components/Api/Api.tsx | 8 +++++--- src/Components/Note/Note.tsx | 2 ++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index 947730c..4a71e0e 100644 --- a/src/Components/Api/Api.tsx +++ b/src/Components/Api/Api.tsx @@ -1,7 +1,9 @@ +import axios from "axios"; +import { get } from "http"; + export function GetNotes() { return fetch("http://localhost:8000/api/v1/notes/").then((res) => { - const result = res.json(); - console.log(); - return result; + console.log(res); + return res.json(); }); } diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index 6c75755..f61403c 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import styles from "../../styles"; import { Button } from "@mui/material"; import axios from "axios"; +import { useQueryClient } from "react-query"; export interface props { title: string; @@ -10,6 +11,7 @@ export interface props { date_created: string; } export default function Note(props: props) { + const queryClient = useQueryClient(); return (
From 81535618895d0d5bdec21dfcd7d02796273834ec Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 21:41:13 +0800 Subject: [PATCH 6/9] Move back to axios for api --- src/Components/Api/Api.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index 4a71e0e..52d06c3 100644 --- a/src/Components/Api/Api.tsx +++ b/src/Components/Api/Api.tsx @@ -1,9 +1,11 @@ import axios from "axios"; -import { get } from "http"; export function GetNotes() { - return fetch("http://localhost:8000/api/v1/notes/").then((res) => { - console.log(res); - return res.json(); + return axios.get("http://localhost:8000/api/v1/notes/").then((res) => { + return res.data; }); + /*return fetch("http://localhost:8000/api/v1/notes/").then((res) => { + console.log(res.body); + return res.json(); + });*/ } From fff01854ce09808ebeb654cb1346bea62edb8b25 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 21:52:38 +0800 Subject: [PATCH 7/9] Convert delete and new note into rest query syntax --- src/Components/Api/Api.tsx | 25 +++++++++++++++++++------ src/Components/Note/Note.tsx | 13 +++++++++---- src/Routes/NewNote/NewNote.tsx | 16 ++++++++++++++-- 3 files changed, 42 insertions(+), 12 deletions(-) diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index 52d06c3..007e5a1 100644 --- a/src/Components/Api/Api.tsx +++ b/src/Components/Api/Api.tsx @@ -1,11 +1,24 @@ import axios from "axios"; export function GetNotes() { - return axios.get("http://localhost:8000/api/v1/notes/").then((res) => { - return res.data; + return axios.get("http://localhost:8000/api/v1/notes/").then((response) => { + return response.data; }); - /*return fetch("http://localhost:8000/api/v1/notes/").then((res) => { - console.log(res.body); - return res.json(); - });*/ +} + +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 + "/"); } diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index f61403c..9d2aae2 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -2,7 +2,8 @@ import * as React from "react"; import styles from "../../styles"; import { Button } from "@mui/material"; import axios from "axios"; -import { useQueryClient } from "react-query"; +import { useMutation, useQueryClient } from "react-query"; +import { DeleteNote } from "../Api/Api"; export interface props { title: string; @@ -12,6 +13,12 @@ export interface props { } export default function Note(props: props) { const queryClient = useQueryClient(); + const mutation = useMutation({ + mutationFn: DeleteNote, + onSuccess: () => { + queryClient.invalidateQueries("notes"); + }, + }); return (
@@ -24,9 +31,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 diff --git a/src/Routes/NewNote/NewNote.tsx b/src/Routes/NewNote/NewNote.tsx index bf9b67a..dc5a93c 100644 --- a/src/Routes/NewNote/NewNote.tsx +++ b/src/Routes/NewNote/NewNote.tsx @@ -4,6 +4,8 @@ import { useNavigate } from "react-router-dom"; import { useState } from "react"; import Header from "../../Components/Header/Header"; import axios from "axios"; +import { AddNote } from "../../Components/Api/Api"; +import { useMutation, useQueryClient } from "react-query"; import { title } from "process"; export interface input { @@ -15,6 +17,14 @@ export default function NewNote() { title: "", content: "", }); + const queryClient = useQueryClient(); + const mutation = useMutation({ + mutationFn: AddNote, + onSuccess: () => { + queryClient.invalidateQueries("notes"); + }, + }); + return (
@@ -43,8 +53,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("/"); }} > From 028a14342737a95d1d09bcabba623f8d4fdd9c1d Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 21:55:58 +0800 Subject: [PATCH 8/9] Removed unused imports --- src/Components/Note/Note.tsx | 1 - src/Components/Notes/Notes.tsx | 2 -- src/Routes/NewNote/NewNote.tsx | 2 -- 3 files changed, 5 deletions(-) diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index 9d2aae2..346a5d5 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -1,7 +1,6 @@ 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"; diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx index 3ef5c35..929f5d0 100644 --- a/src/Components/Notes/Notes.tsx +++ b/src/Components/Notes/Notes.tsx @@ -1,10 +1,8 @@ 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"; diff --git a/src/Routes/NewNote/NewNote.tsx b/src/Routes/NewNote/NewNote.tsx index dc5a93c..12485e9 100644 --- a/src/Routes/NewNote/NewNote.tsx +++ b/src/Routes/NewNote/NewNote.tsx @@ -3,10 +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 { AddNote } from "../../Components/Api/Api"; import { useMutation, useQueryClient } from "react-query"; -import { title } from "process"; export interface input { e: React.ChangeEvent; From 02af182539b1ad099368d1b325df64dc6ddace08 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sat, 25 Feb 2023 22:03:02 +0800 Subject: [PATCH 9/9] Removed unused console.log() --- src/Components/Notes/Notes.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx index 929f5d0..ee57414 100644 --- a/src/Components/Notes/Notes.tsx +++ b/src/Components/Notes/Notes.tsx @@ -53,7 +53,6 @@ export default function Notes() { }, index: number ) => { - console.log(note); return (