Convert delete and new note into rest query syntax

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 + "/");
 }

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 (
     <div style={styles.flex_column}>
       <div style={styles.note}>
@@ -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

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 (
     <div style={styles.background}>
       <Header />
@@ -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("/");
             }}
           >