Added edit note page

src/Components/Api/Api.tsx

@@ -1,6 +1,7 @@
 import axios from "axios";
 import {
   ActivationParams,
+  UpdateNoteParams,
   AddNoteParams,
   LoginParams,
   RegistrationParams,
@@ -21,6 +22,36 @@ export function GetNotes() {
     });
 }
 
+export function GetNote(id: number) {
+  const token = JSON.parse(localStorage.getItem("token") || "");
+  return axios
+    .get("http://localhost:8000/api/v1/notes/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function UpdateNote(note: UpdateNoteParams) {
+  const token = JSON.parse(localStorage.getItem("token") || "");
+  return axios
+    .patch("http://localhost:8000/api/v1/notes/" + note.id + "/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log("Error updating note", error);
+      return error;
+    });
+}
+
 export function AddNote(note: AddNoteParams) {
   const token = JSON.parse(localStorage.getItem("token") || "");
   return axios

src/Components/Note/Note.tsx

@@ -4,8 +4,10 @@ import { Button } from "@mui/material";
 import { useMutation, useQueryClient } from "react-query";
 import { DeleteNote } from "../Api/Api";
 import { NoteProps } from "../../Interfaces/Interfaces";
+import { useNavigate } from "react-router-dom";
 
 export default function Note(props: NoteProps) {
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: DeleteNote,
@@ -28,15 +30,26 @@ export default function Note(props: NoteProps) {
         <p style={styles.text_medium}>
           Timestamp: {String(props.date_created)}
         </p>
-        <Button
-          style={styles.button_red}
-          variant="contained"
-          onClick={() => {
-            mutation.mutate(props.id);
-          }}
-        >
-          Remove Note
-        </Button>
+        <div style={styles.flex_row}>
+          <Button
+            style={styles.button_red}
+            variant="contained"
+            onClick={() => {
+              mutation.mutate(props.id);
+            }}
+          >
+            Remove Note
+          </Button>
+          <Button
+            style={styles.button_yellow}
+            variant="contained"
+            onClick={() => {
+              navigate("/Note/" + props.id);
+            }}
+          >
+            Edit Note
+          </Button>
+        </div>
       </div>
     </div>
   );

src/Interfaces/Interfaces.tsx

@@ -50,3 +50,9 @@ export interface AddNoteParams {
   title: string;
   content: string;
 }
+
+export interface UpdateNoteParams {
+  id: number;
+  title: string;
+  content: string;
+}

src/Routes/ViewEditNote/ViewEditNote.tsx

@@ -0,0 +1,115 @@
+import styles from "../../styles";
+import { Button } from "@mui/material";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import Header from "../../Components/Header/Header";
+import { AddNote, GetNote, UpdateNote } from "../../Components/Api/Api";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { NoteProps } from "../../Interfaces/Interfaces";
+
+export interface input {
+  e: React.ChangeEvent;
+}
+export default function ViewNote() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: UpdateNote,
+    onSuccess: () => {
+      queryClient.invalidateQueries("notes");
+    },
+  });
+  const [note, setNote] = useState({
+    title: "test",
+    content: "test",
+  });
+  async function retrieve() {
+    let a = await GetNote(Number(id));
+    setNote(a);
+    return a;
+  }
+  const { data, isLoading, error } = useQuery("note", retrieve, {
+    retry: 0,
+  });
+  useEffect(() => {
+    setNote(data);
+  }, []);
+  if (error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <div style={styles.note}>
+          <p style={styles.text_medium_red}>Error retrieving specific note</p>
+        </div>
+      </div>
+    );
+  }
+  if (isLoading) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Loading Note...</p>
+      </div>
+    );
+  }
+  if (data) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium}>Edit Note</p>
+        <div style={styles.flex_column}>
+          <div style={styles.note}>
+            <div style={styles.flex_row}>
+              <p style={styles.text_small}>Title:&nbsp;</p>
+              <input
+                style={styles.input_notetitle}
+                value={note.title}
+                onChange={(e: { target: { value: any } }) => {
+                  setNote({ ...note, title: e.target.value });
+                }}
+                maxLength={20}
+              />
+            </div>
+            <div style={styles.note_content}>
+              <textarea
+                style={styles.input_notebody}
+                value={note.content}
+                onChange={async (e: { target: { value: any } }) => {
+                  await setNote({ ...note, content: e.target.value });
+                }}
+              />
+            </div>
+            <Button
+              style={styles.button_green}
+              variant="contained"
+              onClick={async () => {
+                try {
+                  await mutation.mutate({
+                    id: Number(id),
+                    title: note.title,
+                    content: note.content,
+                  });
+                  navigate("/");
+                } catch (error) {}
+              }}
+            >
+              Update Note
+            </Button>
+          </div>
+        </div>
+        <div style={styles.flex_row}>
+          <Button
+            style={styles.button_red}
+            variant="contained"
+            onClick={() => {
+              navigate("/");
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    );
+  }
+  return <div>heh</div>;
+}

src/index.tsx

@@ -14,6 +14,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 
 import { Provider } from "react-redux";
 import Store from "./Features/Redux/Store/Store";
+import ViewEditNote from "./Routes/ViewEditNote/ViewEditNote";
 
 const queryClient = new QueryClient();
 
@@ -38,6 +39,10 @@ const router = createBrowserRouter([
     path: "/Activation/:uid/:token",
     element: <Activation />,
   },
+  {
+    path: "/Note/:id",
+    element: <ViewEditNote />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(

src/styles.tsx

@@ -81,7 +81,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     height: "100%",
     width: "100%",
     minWidth: "100%",
-    minHeight: "512px",
+    minHeight: "256px",
+    maxHeight: "768px",
     fontSize: "2vh",
     fontWeight: "bold",
   },
@@ -91,8 +92,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256x",
-    marginTop: 4,
-    marginBottom: 4,
+    margin: 4,
   },
   button_yellow: {
     backgroundColor: "#e2b465",
@@ -100,8 +100,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256px",
-    marginTop: 4,
-    marginBottom: 4,
+    margin: 4,
   },
   button_red: {
     backgroundColor: "#bc231e",
@@ -109,8 +108,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256px",
-    marginTop: 4,
-    marginBottom: 4,
+    margin: 4,
   },
   text_small: {
     color: "white",