From a8c14f13313f09aef5a86e09875d7ba929622bce Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Wed, 1 Mar 2023 23:28:31 +0800
Subject: [PATCH 01/13] Added token to header for get APIs to support notes by
 user

---
 src/Components/Api/Api.tsx     | 27 ++++++++++++++++++++++-----
 src/Components/Notes/Notes.tsx | 17 +++++++++++++----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index a9478b3..be99e4c 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -3,9 +3,16 @@ import axios from "axios";
 // Note APIs
 
 export function GetNotes() {
-  return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
-    return response.data;
-  });
+  const token = JSON.parse(localStorage.getItem("token") || "");
+  return axios
+    .get("http://localhost:8000/api/v1/notes/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
 }
 
 export interface note {
@@ -14,15 +21,25 @@ export interface note {
 }
 
 export function AddNote(note: note) {
+  const token = JSON.parse(localStorage.getItem("token") || "");
   return axios
-    .post("http://localhost:8000/api/v1/notes/", note)
+    .post("http://localhost:8000/api/v1/notes/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
     .then((response) => {
       return response.data;
     });
 }
 
 export function DeleteNote(id: number) {
-  return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/");
+  const token = JSON.parse(localStorage.getItem("token") || "");
+  return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/", {
+    headers: {
+      Authorization: "Token " + token,
+    },
+  });
 }
 
 // User APIs
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index 630a34a..96b7ada 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -5,6 +5,7 @@ import Note from "../Note/Note";
 import { Button } from "@mui/material";
 import { useQuery } from "react-query";
 import { GetNotes } from "../Api/Api";
+import { useSelector } from "react-redux";
 
 export default function Notes() {
   const navigate = useNavigate();
@@ -13,21 +14,29 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
+  const logged_in = useSelector(
+    (state: { Login: { logged_in: boolean } }) => state.Login.logged_in
+  );
+  if (!logged_in) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Please login to use Clip Notes</p>
+      </div>
+    );
+  }
   if (error) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium_red}>Error contacting Notes server</p>
       </div>
     );
-  }
-  if (isLoading) {
+  } else if (isLoading) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium}>Loading Notes...</p>
       </div>
     );
-  }
-  if (notes.length === 0) {
+  } else if (notes.length === 0) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium}>No notes exist yet</p>

From 132dfa496df45ccf4ef60a1abbaaa267b77bd13d Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Thu, 2 Mar 2023 00:16:28 +0800
Subject: [PATCH 02/13] Separated typescript interfaces into its own file and
 polished and cleaned up overall code

---
 src/Components/Api/Api.tsx                 | 34 +++++----------
 src/Components/AppIcon/AppIcon.tsx         |  8 +---
 src/Components/Header/Header.tsx           |  1 -
 src/Components/HomeIcon/HomeIcon.tsx       |  8 +---
 src/Components/LoginButton/LoginButton.tsx | 17 ++------
 src/Components/Note/Note.tsx               |  9 +---
 src/Components/Notes/Notes.tsx             |  5 +--
 src/Interfaces/Interfaces.tsx              | 51 ++++++++++++++++++++++
 src/Routes/Activation/Activation.tsx       |  9 ++--
 src/Routes/Login/Login.tsx                 |  6 +--
 src/Routes/Register/Register.tsx           | 14 ++----
 11 files changed, 83 insertions(+), 79 deletions(-)
 create mode 100644 src/Interfaces/Interfaces.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index be99e4c..000b057 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -1,4 +1,10 @@
 import axios from "axios";
+import {
+  ActivationParams,
+  AddNoteParams,
+  LoginParams,
+  RegistrationParams,
+} from "../../Interfaces/Interfaces";
 
 // Note APIs
 
@@ -15,12 +21,7 @@ export function GetNotes() {
     });
 }
 
-export interface note {
-  title: string;
-  content: string;
-}
-
-export function AddNote(note: note) {
+export function AddNote(note: AddNoteParams) {
   const token = JSON.parse(localStorage.getItem("token") || "");
   return axios
     .post("http://localhost:8000/api/v1/notes/", note, {
@@ -43,13 +44,8 @@ export function DeleteNote(id: number) {
 }
 
 // User APIs
-export interface register {
-  email: string;
-  username: string;
-  password: string;
-}
 
-export function UserRegister(register: register) {
+export function UserRegister(register: RegistrationParams) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/users/", register)
     .then(async (response) => {
@@ -62,12 +58,7 @@ export function UserRegister(register: register) {
     });
 }
 
-export interface user {
-  username: string;
-  password: string;
-}
-
-export function UserLogin(user: user) {
+export function UserLogin(user: LoginParams) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/token/login/", user)
     .then(async (response) => {
@@ -101,12 +92,7 @@ export function UserInfo() {
     });
 }
 
-export interface activation {
-  uid: string;
-  token: string;
-}
-
-export function UserActivate(activation: activation) {
+export function UserActivate(activation: ActivationParams) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
     .then(async (response) => {
diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx
index 56d5c80..78e60e2 100644
--- a/src/Components/AppIcon/AppIcon.tsx
+++ b/src/Components/AppIcon/AppIcon.tsx
@@ -1,11 +1,7 @@
 import * as React from "react";
+import { IconProps } from "../../Interfaces/Interfaces";
 
-export interface props {
-  size: number;
-  color: string;
-}
-
-export default function AppIcon(props: props) {
+export default function AppIcon(props: IconProps) {
   return (
     <>
       <svg
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 687ce92..3ba2bdc 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -18,7 +18,6 @@ export default function Header() {
           <HomeIcon size={32} color="white" />
           <HomeIcon size={32} color="white" />
           <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
         </div>
         <div
           style={{
diff --git a/src/Components/HomeIcon/HomeIcon.tsx b/src/Components/HomeIcon/HomeIcon.tsx
index 38e6d07..303e4f5 100644
--- a/src/Components/HomeIcon/HomeIcon.tsx
+++ b/src/Components/HomeIcon/HomeIcon.tsx
@@ -1,13 +1,9 @@
 import { Button } from "@mui/material";
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
+import { IconProps } from "../../Interfaces/Interfaces";
 
-export interface props {
-  size: number;
-  color: string;
-}
-
-export default function HomeIcon(props: props) {
+export default function HomeIcon(props: IconProps) {
   const navigate = useNavigate();
   return (
     <Button
diff --git a/src/Components/LoginButton/LoginButton.tsx b/src/Components/LoginButton/LoginButton.tsx
index cb1746f..6df15b5 100644
--- a/src/Components/LoginButton/LoginButton.tsx
+++ b/src/Components/LoginButton/LoginButton.tsx
@@ -5,23 +5,14 @@ import styles from "../../styles";
 import { useDispatch, useSelector } from "react-redux";
 import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-
-export interface user {
-  LoggedInUser: {
-    value: {
-      email: string;
-      id: number;
-      username: string;
-    };
-  };
-}
+import { LoggedInUserState, LoginState } from "../../Interfaces/Interfaces";
 
 export default function LoginButton() {
   const dispatch = useDispatch();
-  const logged_in = useSelector(
-    (state: { Login: { logged_in: boolean } }) => state.Login.logged_in
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  const logged_in_user = useSelector(
+    (state: LoggedInUserState) => state.LoggedInUser.value
   );
-  const logged_in_user = useSelector((state: user) => state.LoggedInUser.value);
   const navigate = useNavigate();
   if (!logged_in) {
     return (
diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index 153e424..b8bd090 100644
--- a/src/Components/Note/Note.tsx
+++ b/src/Components/Note/Note.tsx
@@ -3,14 +3,9 @@ import styles from "../../styles";
 import { Button } from "@mui/material";
 import { useMutation, useQueryClient } from "react-query";
 import { DeleteNote } from "../Api/Api";
+import { NoteProps } from "../../Interfaces/Interfaces";
 
-export interface props {
-  title: string;
-  content: string;
-  id: number;
-  date_created: string;
-}
-export default function Note(props: props) {
+export default function Note(props: NoteProps) {
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: DeleteNote,
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index 96b7ada..e1c2d2a 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -6,6 +6,7 @@ import { Button } from "@mui/material";
 import { useQuery } from "react-query";
 import { GetNotes } from "../Api/Api";
 import { useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
 
 export default function Notes() {
   const navigate = useNavigate();
@@ -14,9 +15,7 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
-  const logged_in = useSelector(
-    (state: { Login: { logged_in: boolean } }) => state.Login.logged_in
-  );
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
   if (!logged_in) {
     return (
       <div style={styles.note}>
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
new file mode 100644
index 0000000..ea68b14
--- /dev/null
+++ b/src/Interfaces/Interfaces.tsx
@@ -0,0 +1,51 @@
+// Redux Interfaces
+export interface LoginState {
+  Login: { logged_in: boolean };
+}
+
+export interface LoggedInUserState {
+  LoggedInUser: {
+    value: {
+      email: string;
+      id: number;
+      username: string;
+    };
+  };
+}
+
+// Component Props Interfaces
+
+export interface NoteProps {
+  title: string;
+  content: string;
+  id: number;
+  date_created: string;
+}
+
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+// API Interfaces
+
+export interface RegistrationParams {
+  email: string;
+  username: string;
+  password: string;
+}
+
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface ActivationParams {
+  uid: string;
+  token: string;
+}
+
+export interface AddNoteParams {
+  title: string;
+  content: string;
+}
diff --git a/src/Routes/Activation/Activation.tsx b/src/Routes/Activation/Activation.tsx
index 972baf5..18d1629 100644
--- a/src/Routes/Activation/Activation.tsx
+++ b/src/Routes/Activation/Activation.tsx
@@ -3,15 +3,12 @@ import Header from "../../Components/Header/Header";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { UserActivate } from "../../Components/Api/Api";
+import { ActivationParams } from "../../Interfaces/Interfaces";
 
-export interface activation {
-  uid: string;
-  token: string;
-}
 export default function Activation() {
   let { uid, token } = useParams();
   const [status, setStatus] = useState(0);
-  async function verify(activation: activation) {
+  async function verify(activation: ActivationParams) {
     let status = await UserActivate(activation);
     if (status) {
       setStatus(1);
@@ -23,7 +20,7 @@ export default function Activation() {
     if (uid && token) {
       verify({ uid, token });
     }
-  }, []);
+  }, [uid, token]);
   if (status === 1) {
     return (
       <div style={styles.background}>
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index a4ed28b..371e094 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -7,7 +7,7 @@ import { useState } from "react";
 import { Button } from "@mui/material";
 import { UserInfo, UserLogin } from "../../Components/Api/Api";
 
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 
@@ -29,7 +29,7 @@ export default function Login() {
           <div style={{ margin: 4 }} />
           <input
             style={styles.input_notetitle}
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, username: e.target.value });
             }}
             maxLength={20}
@@ -41,7 +41,7 @@ export default function Login() {
           <input
             style={styles.input_notetitle}
             type="password"
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, password: e.target.value });
             }}
             maxLength={20}
diff --git a/src/Routes/Register/Register.tsx b/src/Routes/Register/Register.tsx
index ecff80a..147f2f0 100644
--- a/src/Routes/Register/Register.tsx
+++ b/src/Routes/Register/Register.tsx
@@ -1,16 +1,12 @@
 import * as React from "react";
 import styles from "../../styles";
 
-import { useNavigate } from "react-router-dom";
 import Header from "../../Components/Header/Header";
 import { useState } from "react";
 import { Button } from "@mui/material";
-import { UserInfo, UserLogin } from "../../Components/Api/Api";
-
 import { UserRegister } from "../../Components/Api/Api";
 
 export default function Register() {
-  const navigate = useNavigate();
   const [user, setUser] = useState({
     email: "",
     username: "",
@@ -27,7 +23,7 @@ export default function Register() {
           <div style={{ margin: 4 }} />
           <input
             style={styles.input_notetitle}
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, email: e.target.value });
             }}
             maxLength={20}
@@ -38,7 +34,7 @@ export default function Register() {
           <div style={{ margin: 4 }} />
           <input
             style={styles.input_notetitle}
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, username: e.target.value });
             }}
             maxLength={20}
@@ -50,7 +46,7 @@ export default function Register() {
           <input
             style={styles.input_notetitle}
             type="password"
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, password: e.target.value });
             }}
             maxLength={20}
@@ -61,9 +57,7 @@ export default function Register() {
           variant="contained"
           onClick={async () => {
             setUser({
-              email: "",
-              username: "",
-              password: "",
+              ...user,
             });
             if (await UserRegister(user)) {
               setFeedback(

From 2e6c5fbef80e761cfdb7828a640a471c97aa63f7 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Thu, 2 Mar 2023 00:43:26 +0800
Subject: [PATCH 03/13] Show owner on note

---
 src/Components/Note/Note.tsx   | 3 ++-
 src/Components/Notes/Notes.tsx | 2 ++
 src/Interfaces/Interfaces.tsx  | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index b8bd090..6924a83 100644
--- a/src/Components/Note/Note.tsx
+++ b/src/Components/Note/Note.tsx
@@ -16,7 +16,8 @@ export default function Note(props: NoteProps) {
   return (
     <div style={styles.flex_column}>
       <div style={styles.note}>
-        <p style={styles.text_medium}>{props.title}</p>
+        <p style={styles.text_medium}>Owner: {props.owner}</p>
+        <p style={styles.text_medium}>Title: {props.title}</p>
         <div style={styles.note_content}>
           <p style={styles.text_small}>{props.content}</p>
         </div>
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index e1c2d2a..b275869 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -58,6 +58,7 @@ export default function Notes() {
       {notes.map(
         (
           note: {
+            owner: string;
             title: string;
             content: string;
             id: number;
@@ -72,6 +73,7 @@ export default function Notes() {
               title={note.title}
               content={note.content}
               date_created={note.date_created}
+              owner={note.owner}
             />
           );
         }
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
index ea68b14..7ec33f0 100644
--- a/src/Interfaces/Interfaces.tsx
+++ b/src/Interfaces/Interfaces.tsx
@@ -20,6 +20,7 @@ export interface NoteProps {
   content: string;
   id: number;
   date_created: string;
+  owner: string;
 }
 
 export interface IconProps {

From d73da74004894353116d911f8b35edb893ee932c Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 3 Mar 2023 23:46:07 +0800
Subject: [PATCH 04/13] Made note input and note body preview bigger

---
 src/Components/Note/Note.tsx   |  6 +++++-
 src/Routes/NewNote/NewNote.tsx | 16 +++++++++-------
 src/styles.tsx                 |  4 +++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index 6924a83..bb2c6df 100644
--- a/src/Components/Note/Note.tsx
+++ b/src/Components/Note/Note.tsx
@@ -19,7 +19,11 @@ export default function Note(props: NoteProps) {
         <p style={styles.text_medium}>Owner: {props.owner}</p>
         <p style={styles.text_medium}>Title: {props.title}</p>
         <div style={styles.note_content}>
-          <p style={styles.text_small}>{props.content}</p>
+          <textarea
+            style={styles.input_notebody}
+            disabled={true}
+            value={props.content}
+          />
         </div>
         <p style={styles.text_medium}>Timestamp: {props.date_created}</p>
         <Button
diff --git a/src/Routes/NewNote/NewNote.tsx b/src/Routes/NewNote/NewNote.tsx
index 77c3510..730b7b5 100644
--- a/src/Routes/NewNote/NewNote.tsx
+++ b/src/Routes/NewNote/NewNote.tsx
@@ -42,8 +42,8 @@ export default function NewNote() {
           <div style={styles.note_content}>
             <textarea
               style={styles.input_notebody}
-              onChange={(e: { target: { value: any } }) => {
-                setNote({ ...note, content: e.target.value });
+              onChange={async (e: { target: { value: any } }) => {
+                await setNote({ ...note, content: e.target.value });
               }}
             />
           </div>
@@ -51,11 +51,13 @@ export default function NewNote() {
             style={styles.button_green}
             variant="contained"
             onClick={async () => {
-              mutation.mutate({
-                title: note.title,
-                content: note.content,
-              });
-              navigate("/");
+              try {
+                await mutation.mutate({
+                  title: note.title,
+                  content: note.content,
+                });
+                navigate("/");
+              } catch (error) {}
             }}
           >
             Add Note
diff --git a/src/styles.tsx b/src/styles.tsx
index 19fac7a..1b78839 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -47,6 +47,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   note_content: {
     display: "flex",
+    flexWrap: "wrap",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
@@ -80,7 +81,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     height: "100%",
     width: "100%",
     minWidth: "100%",
-    maxHeight: "200px",
+    minHeight: "512px",
+
     fontSize: "2vh",
     fontWeight: "bold",
   },

From b3653f5a01072640c92c7a1c98342644db0554ca Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 3 Mar 2023 23:46:46 +0800
Subject: [PATCH 05/13] Removed extra line in styles.tsx

---
 src/styles.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles.tsx b/src/styles.tsx
index 1b78839..ab9d01f 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -82,7 +82,6 @@ const styles: { [key: string]: React.CSSProperties } = {
     width: "100%",
     minWidth: "100%",
     minHeight: "512px",
-
     fontSize: "2vh",
     fontWeight: "bold",
   },

From e6b07438d454fab0d1de58b90ce15fae2b17509c Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 17:18:43 +0800
Subject: [PATCH 06/13] Changed date_created format to Date from String

---
 src/Components/Note/Note.tsx   | 4 +++-
 src/Components/Notes/Notes.tsx | 2 +-
 src/Interfaces/Interfaces.tsx  | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index bb2c6df..39685da 100644
--- a/src/Components/Note/Note.tsx
+++ b/src/Components/Note/Note.tsx
@@ -25,7 +25,9 @@ export default function Note(props: NoteProps) {
             value={props.content}
           />
         </div>
-        <p style={styles.text_medium}>Timestamp: {props.date_created}</p>
+        <p style={styles.text_medium}>
+          Timestamp: {String(props.date_created)}
+        </p>
         <Button
           style={styles.button_red}
           variant="contained"
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index b275869..f8e0eda 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -62,7 +62,7 @@ export default function Notes() {
             title: string;
             content: string;
             id: number;
-            date_created: string;
+            date_created: Date;
           },
           index: number
         ) => {
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
index 7ec33f0..58219e8 100644
--- a/src/Interfaces/Interfaces.tsx
+++ b/src/Interfaces/Interfaces.tsx
@@ -19,7 +19,7 @@ export interface NoteProps {
   title: string;
   content: string;
   id: number;
-  date_created: string;
+  date_created: Date;
   owner: string;
 }
 

From 0f18c0be9eeb6426230ad4b846c870a3a99d4d26 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 17:21:00 +0800
Subject: [PATCH 07/13] Made note mapping use a common interface

---
 src/Components/Notes/Notes.tsx | 37 ++++++++++++----------------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index f8e0eda..cee1589 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -6,7 +6,7 @@ import { Button } from "@mui/material";
 import { useQuery } from "react-query";
 import { GetNotes } from "../Api/Api";
 import { useSelector } from "react-redux";
-import { LoginState } from "../../Interfaces/Interfaces";
+import { LoginState, NoteProps } from "../../Interfaces/Interfaces";
 
 export default function Notes() {
   const navigate = useNavigate();
@@ -55,29 +55,18 @@ export default function Notes() {
 
   return (
     <>
-      {notes.map(
-        (
-          note: {
-            owner: string;
-            title: string;
-            content: string;
-            id: number;
-            date_created: Date;
-          },
-          index: number
-        ) => {
-          return (
-            <Note
-              id={note.id}
-              key={index}
-              title={note.title}
-              content={note.content}
-              date_created={note.date_created}
-              owner={note.owner}
-            />
-          );
-        }
-      )}
+      {notes.map((note: NoteProps, index: number) => {
+        return (
+          <Note
+            id={note.id}
+            key={index}
+            title={note.title}
+            content={note.content}
+            date_created={note.date_created}
+            owner={note.owner}
+          />
+        );
+      })}
       <Button
         style={styles.button_green}
         variant="contained"

From c222ab0078c031666af35636b2d9450c464a87c2 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 19:27:24 +0800
Subject: [PATCH 08/13] Added edit note page

---
 src/Components/Api/Api.tsx               |  31 ++++++
 src/Components/Note/Note.tsx             |  31 ++++--
 src/Interfaces/Interfaces.tsx            |   6 ++
 src/Routes/ViewEditNote/ViewEditNote.tsx | 115 +++++++++++++++++++++++
 src/index.tsx                            |   5 +
 src/styles.tsx                           |  12 +--
 6 files changed, 184 insertions(+), 16 deletions(-)
 create mode 100644 src/Routes/ViewEditNote/ViewEditNote.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index 000b057..84bd8b3 100644
--- a/src/Components/Api/Api.tsx
+++ b/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
diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index 39685da..59003e7 100644
--- a/src/Components/Note/Note.tsx
+++ b/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>
   );
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
index 58219e8..afd5f25 100644
--- a/src/Interfaces/Interfaces.tsx
+++ b/src/Interfaces/Interfaces.tsx
@@ -50,3 +50,9 @@ export interface AddNoteParams {
   title: string;
   content: string;
 }
+
+export interface UpdateNoteParams {
+  id: number;
+  title: string;
+  content: string;
+}
diff --git a/src/Routes/ViewEditNote/ViewEditNote.tsx b/src/Routes/ViewEditNote/ViewEditNote.tsx
new file mode 100644
index 0000000..62b5009
--- /dev/null
+++ b/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>;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 2adba04..0407eef 100644
--- a/src/index.tsx
+++ b/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(
diff --git a/src/styles.tsx b/src/styles.tsx
index ab9d01f..b24c487 100644
--- a/src/styles.tsx
+++ b/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",

From 05c78044218fc1563c8451501774a397d649b606 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 21:37:15 +0800
Subject: [PATCH 09/13] Fixed harmless icon svg errors

---
 src/Components/AppIcon/AppIcon.tsx   |  6 +++---
 src/Components/HomeIcon/HomeIcon.tsx |  6 +++---
 src/Components/Notes/Notes.tsx       | 14 +++++++-------
 src/Routes/Home/Home.tsx             |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx
index 78e60e2..5d1afa7 100644
--- a/src/Components/AppIcon/AppIcon.tsx
+++ b/src/Components/AppIcon/AppIcon.tsx
@@ -9,11 +9,11 @@ export default function AppIcon(props: IconProps) {
         width={props.size + "px"}
         height={props.size + "px"}
         viewBox="0 0 24 24"
-        stroke-width="2"
+        strokeWidth="2"
         stroke={props.color}
         fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
diff --git a/src/Components/HomeIcon/HomeIcon.tsx b/src/Components/HomeIcon/HomeIcon.tsx
index 303e4f5..3c5a30c 100644
--- a/src/Components/HomeIcon/HomeIcon.tsx
+++ b/src/Components/HomeIcon/HomeIcon.tsx
@@ -24,11 +24,11 @@ export default function HomeIcon(props: IconProps) {
         width={props.size - 4 + "px"}
         height={props.size - 4 + "px"}
         viewBox="0 0 24 24"
-        stroke-width="2"
+        strokeWidth="2"
         stroke={props.color}
         fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index cee1589..2fd6689 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -16,13 +16,6 @@ export default function Notes() {
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
   const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
-  if (!logged_in) {
-    return (
-      <div style={styles.note}>
-        <p style={styles.text_medium}>Please login to use Clip Notes</p>
-      </div>
-    );
-  }
   if (error) {
     return (
       <div style={styles.note}>
@@ -35,6 +28,13 @@ export default function Notes() {
         <p style={styles.text_medium}>Loading Notes...</p>
       </div>
     );
+  }
+  if (!logged_in) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Please login to use Clip Notes</p>
+      </div>
+    );
   } else if (notes.length === 0) {
     return (
       <div style={styles.note}>
diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx
index a967ab8..ddc9770 100644
--- a/src/Routes/Home/Home.tsx
+++ b/src/Routes/Home/Home.tsx
@@ -1,11 +1,11 @@
 import styles from "../../styles";
 import Header from "../../Components/Header/Header";
-import NoteMapper from "../../Components/Notes/Notes";
+import Notes from "../../Components/Notes/Notes";
 export default function Home() {
   return (
     <div style={styles.background}>
       <Header />
-      <NoteMapper />
+      <Notes />
     </div>
   );
 }

From 16176aea9f8f90808896b5524bd8467d64b364a2 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 22:32:02 +0800
Subject: [PATCH 10/13] Fixed offline error indicator for homepage

---
 src/Components/Notes/Notes.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index 2fd6689..bc3a4f5 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -16,25 +16,24 @@ export default function Notes() {
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
   const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
-  if (error) {
-    return (
-      <div style={styles.note}>
-        <p style={styles.text_medium_red}>Error contacting Notes server</p>
-      </div>
-    );
-  } else if (isLoading) {
+  if (isLoading) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium}>Loading Notes...</p>
       </div>
     );
-  }
-  if (!logged_in) {
+  } else if (!logged_in && !error) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium}>Please login to use Clip Notes</p>
       </div>
     );
+  } else if (error) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium_red}>Error contacting Notes server</p>
+      </div>
+    );
   } else if (notes.length === 0) {
     return (
       <div style={styles.note}>

From eea71c8370cde5718923ee08ebb094c8250342e3 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 22:49:06 +0800
Subject: [PATCH 11/13] Added user info page

---
 src/Components/Api/Api.tsx           |  1 +
 src/Components/Header/Header.tsx     |  4 +--
 src/Components/UserIcon/UserIcon.tsx | 39 ++++++++++++++++++++++++++
 src/Routes/UserPage/UserPage.tsx     | 41 ++++++++++++++++++++++++++++
 src/index.tsx                        |  7 ++++-
 5 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 src/Components/UserIcon/UserIcon.tsx
 create mode 100644 src/Routes/UserPage/UserPage.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index 84bd8b3..70d018b 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -115,6 +115,7 @@ export function UserInfo() {
       },
     })
     .then((response) => {
+      console.log(response.data);
       return response.data;
     })
     .catch((error) => {
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 3ba2bdc..3acb0b8 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -4,6 +4,7 @@ import styles from "../../styles";
 import AppIcon from "../AppIcon/AppIcon";
 import Login from "../LoginButton/LoginButton";
 import HomeIcon from "../HomeIcon/HomeIcon";
+import UserIcon from "../UserIcon/UserIcon";
 
 export default function Header() {
   return (
@@ -16,8 +17,7 @@ export default function Header() {
           }}
         >
           <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
+          <UserIcon size={32} color="white" />
         </div>
         <div
           style={{
diff --git a/src/Components/UserIcon/UserIcon.tsx b/src/Components/UserIcon/UserIcon.tsx
new file mode 100644
index 0000000..454ff54
--- /dev/null
+++ b/src/Components/UserIcon/UserIcon.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@mui/material";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { IconProps } from "../../Interfaces/Interfaces";
+
+export default function UserIcon(props: IconProps) {
+  const navigate = useNavigate();
+  return (
+    <Button
+      variant="contained"
+      style={{
+        backgroundColor: "#005997",
+        borderRadius: 16,
+        width: props.size + "px",
+        height: props.size + "px",
+        margin: 4,
+        alignContent: "center",
+        alignItems: "center",
+      }}
+      onClick={() => navigate("/User")}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
+        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
+      </svg>
+    </Button>
+  );
+}
diff --git a/src/Routes/UserPage/UserPage.tsx b/src/Routes/UserPage/UserPage.tsx
new file mode 100644
index 0000000..0085caf
--- /dev/null
+++ b/src/Routes/UserPage/UserPage.tsx
@@ -0,0 +1,41 @@
+import styles from "../../styles";
+import Header from "../../Components/Header/Header";
+import { UserInfo } from "../../Components/Api/Api";
+import { useQuery } from "react-query";
+import { useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
+
+export default function UserPage() {
+  const { data, isLoading, error } = useQuery("user", UserInfo, { retry: 0 });
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  if (isLoading && !error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium}>Loading...</p>
+      </div>
+    );
+  } else if (error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium_red}>An error has occured</p>
+      </div>
+    );
+  } else if (!logged_in) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium_red}>Please login to view user info</p>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <Header />
+      <p style={styles.text_medium}>Username: {data.username}</p>
+      <p style={styles.text_medium}>Email: {data.email}</p>
+      <p style={styles.text_medium}>User ID: {data.id}</p>
+    </div>
+  );
+}
diff --git a/src/index.tsx b/src/index.tsx
index 0407eef..04f137a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,12 +9,13 @@ import NewNote from "./Routes/NewNote/NewNote";
 import Login from "./Routes/Login/Login";
 import Activation from "./Routes/Activation/Activation";
 import Register from "./Routes/Register/Register";
+import UserPage from "./Routes/UserPage/UserPage";
+import ViewEditNote from "./Routes/ViewEditNote/ViewEditNote";
 
 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();
 
@@ -43,6 +44,10 @@ const router = createBrowserRouter([
     path: "/Note/:id",
     element: <ViewEditNote />,
   },
+  {
+    path: "/User",
+    element: <UserPage />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(

From cfc9a7e1f0a637eb8c57187a635345ce7939c7eb Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 4 Mar 2023 23:04:02 +0800
Subject: [PATCH 12/13] Fixed prompts for when there no connection to backend

---
 src/Components/Api/Api.tsx       | 37 ++++++++++++++++++--------------
 src/Components/Notes/Notes.tsx   | 13 ++++++-----
 src/Routes/UserPage/UserPage.tsx | 20 +++++++++++------
 3 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index 70d018b..18cce4c 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -10,7 +10,7 @@ import {
 // Note APIs
 
 export function GetNotes() {
-  const token = JSON.parse(localStorage.getItem("token") || "");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .get("http://localhost:8000/api/v1/notes/", {
       headers: {
@@ -23,7 +23,7 @@ export function GetNotes() {
 }
 
 export function GetNote(id: number) {
-  const token = JSON.parse(localStorage.getItem("token") || "");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .get("http://localhost:8000/api/v1/notes/" + id + "/", {
       headers: {
@@ -36,7 +36,7 @@ export function GetNote(id: number) {
 }
 
 export function UpdateNote(note: UpdateNoteParams) {
-  const token = JSON.parse(localStorage.getItem("token") || "");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .patch("http://localhost:8000/api/v1/notes/" + note.id + "/", note, {
       headers: {
@@ -53,7 +53,7 @@ export function UpdateNote(note: UpdateNoteParams) {
 }
 
 export function AddNote(note: AddNoteParams) {
-  const token = JSON.parse(localStorage.getItem("token") || "");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .post("http://localhost:8000/api/v1/notes/", note, {
       headers: {
@@ -62,16 +62,25 @@ export function AddNote(note: AddNoteParams) {
     })
     .then((response) => {
       return response.data;
+    })
+    .catch((error) => {
+      console.log("Error adding note", error);
+      return error;
     });
 }
 
 export function DeleteNote(id: number) {
-  const token = JSON.parse(localStorage.getItem("token") || "");
-  return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/", {
-    headers: {
-      Authorization: "Token " + token,
-    },
-  });
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .delete("http://localhost:8000/api/v1/notes/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .catch((error) => {
+      console.log("Error deleting note", error);
+      return error;
+    });
 }
 
 // User APIs
@@ -96,7 +105,7 @@ export function UserLogin(user: LoginParams) {
       localStorage.setItem("token", JSON.stringify(response.data.auth_token));
       console.log(
         "Login Success! Stored Token: ",
-        JSON.parse(localStorage.getItem("token") || "")
+        JSON.parse(localStorage.getItem("token") || "{}")
       );
       return true;
     })
@@ -107,7 +116,7 @@ export function UserLogin(user: LoginParams) {
 }
 
 export function UserInfo() {
-  const token = JSON.parse(localStorage.getItem("token") || "");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .get("http://localhost:8000/api/v1/accounts/users/me/", {
       headers: {
@@ -117,10 +126,6 @@ export function UserInfo() {
     .then((response) => {
       console.log(response.data);
       return response.data;
-    })
-    .catch((error) => {
-      console.log("Error in fetching user data");
-      console.log(error);
     });
 }
 
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index bc3a4f5..4cccaf2 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -22,18 +22,18 @@ export default function Notes() {
         <p style={styles.text_medium}>Loading Notes...</p>
       </div>
     );
-  } else if (!logged_in && !error) {
-    return (
-      <div style={styles.note}>
-        <p style={styles.text_medium}>Please login to use Clip Notes</p>
-      </div>
-    );
   } else if (error) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium_red}>Error contacting Notes server</p>
       </div>
     );
+  } else if (!logged_in) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Please login to use Clip Notes</p>
+      </div>
+    );
   } else if (notes.length === 0) {
     return (
       <div style={styles.note}>
@@ -51,7 +51,6 @@ export default function Notes() {
       </div>
     );
   }
-
   return (
     <>
       {notes.map((note: NoteProps, index: number) => {
diff --git a/src/Routes/UserPage/UserPage.tsx b/src/Routes/UserPage/UserPage.tsx
index 0085caf..33a84c7 100644
--- a/src/Routes/UserPage/UserPage.tsx
+++ b/src/Routes/UserPage/UserPage.tsx
@@ -12,30 +12,38 @@ export default function UserPage() {
     return (
       <div style={styles.background}>
         <Header />
-        <p style={styles.text_medium}>Loading...</p>
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Loading...</p>
+        </div>
       </div>
     );
   } else if (error) {
     return (
       <div style={styles.background}>
         <Header />
-        <p style={styles.text_medium_red}>An error has occured</p>
+        <div style={styles.note}>
+          <p style={styles.text_medium_red}>An error has occured</p>
+        </div>
       </div>
     );
   } else if (!logged_in) {
     return (
       <div style={styles.background}>
         <Header />
-        <p style={styles.text_medium_red}>Please login to view user info</p>
+        <div style={styles.note}>
+          <p style={styles.text_medium_red}>Please login to view user info</p>
+        </div>
       </div>
     );
   }
   return (
     <div style={styles.background}>
       <Header />
-      <p style={styles.text_medium}>Username: {data.username}</p>
-      <p style={styles.text_medium}>Email: {data.email}</p>
-      <p style={styles.text_medium}>User ID: {data.id}</p>
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Username: {data.username}</p>
+        <p style={styles.text_medium}>Email: {data.email}</p>
+        <p style={styles.text_medium}>User ID: {data.id}</p>
+      </div>
     </div>
   );
 }

From 0279e503ff81cb241cd22e60a1261c5a08b348a0 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sun, 5 Mar 2023 14:09:10 +0800
Subject: [PATCH 13/13] Fixed error prompt and not logged in prompt

---
 src/Components/Notes/Notes.tsx   | 12 ++++++------
 src/Routes/UserPage/UserPage.tsx | 20 +++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index 4cccaf2..3a20f1c 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -22,18 +22,18 @@ export default function Notes() {
         <p style={styles.text_medium}>Loading Notes...</p>
       </div>
     );
+  } else if (!logged_in && error) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Please login to use Clip Notes</p>
+      </div>
+    );
   } else if (error) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium_red}>Error contacting Notes server</p>
       </div>
     );
-  } else if (!logged_in) {
-    return (
-      <div style={styles.note}>
-        <p style={styles.text_medium}>Please login to use Clip Notes</p>
-      </div>
-    );
   } else if (notes.length === 0) {
     return (
       <div style={styles.note}>
diff --git a/src/Routes/UserPage/UserPage.tsx b/src/Routes/UserPage/UserPage.tsx
index 33a84c7..6d3be48 100644
--- a/src/Routes/UserPage/UserPage.tsx
+++ b/src/Routes/UserPage/UserPage.tsx
@@ -4,6 +4,7 @@ import { UserInfo } from "../../Components/Api/Api";
 import { useQuery } from "react-query";
 import { useSelector } from "react-redux";
 import { LoginState } from "../../Interfaces/Interfaces";
+import LoginButton from "../../Components/LoginButton/LoginButton";
 
 export default function UserPage() {
   const { data, isLoading, error } = useQuery("user", UserInfo, { retry: 0 });
@@ -17,6 +18,16 @@ export default function UserPage() {
         </div>
       </div>
     );
+  } else if (!logged_in && error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Please login to view user info</p>
+          <LoginButton />
+        </div>
+      </div>
+    );
   } else if (error) {
     return (
       <div style={styles.background}>
@@ -26,15 +37,6 @@ export default function UserPage() {
         </div>
       </div>
     );
-  } else if (!logged_in) {
-    return (
-      <div style={styles.background}>
-        <Header />
-        <div style={styles.note}>
-          <p style={styles.text_medium_red}>Please login to view user info</p>
-        </div>
-      </div>
-    );
   }
   return (
     <div style={styles.background}>