Added token to header for get APIs to support notes by user

src/Components/Api/Api.tsx

@@ -3,7 +3,14 @@ import axios from "axios";
 // Note APIs
 
 export function GetNotes() {
-  return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
+  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;
     });
 }
@@ -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

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>