Added component for viewing public notes

src/Components/Api/Api.tsx

@@ -26,6 +26,19 @@ export function GetNotes() {
     });
 }
 
+export function GetPublicNotes() {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return instance
+    .get("/api/v1/public_notes/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
 export function GetNote(id: number) {
   const token = JSON.parse(localStorage.getItem("token") || "{}");
   return instance

src/Components/PublicNote/Note.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import styles from "../../styles";
+import { NoteProps } from "../../Interfaces/Interfaces";
+
+export default function PublicNote(props: NoteProps) {
+  return (
+    <div style={styles.flex_column}>
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Owner: {props.owner}</p>
+        <p style={styles.text_medium}>Title: {props.title}</p>
+        <div style={styles.note_content}>
+          <textarea
+            style={styles.input_notebody}
+            disabled={true}
+            value={props.content}
+          />
+        </div>
+        <p style={styles.text_medium}>
+          Timestamp: {String(props.date_created)}
+        </p>
+        <p style={styles.text_medium}>Public: {props.public ? "Yes" : "No"}</p>
+      </div>
+    </div>
+  );
+}

src/Components/PublicNotes/Notes.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
+import Note from "../Note/Note";
+import { Button } from "@mui/material";
+import { useQuery } from "react-query";
+import { GetPublicNotes } from "../Api/Api";
+import { useSelector } from "react-redux";
+import { NoteProps } from "../../Interfaces/Interfaces";
+import { RootState } from "../../Features/Redux/Store/Store";
+import PublicNote from "../PublicNote/Note";
+
+export default function PublicNotes() {
+  const navigate = useNavigate();
+  const {
+    data: notes,
+    isLoading,
+    error,
+  } = useQuery("public_notes", GetPublicNotes, { retry: 0 });
+  if (isLoading) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Loading 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}>
+        <p style={styles.text_medium}>No notes exist yet</p>
+        <p style={styles.text_medium}>Make one!</p>
+        <Button
+          style={styles.button_green}
+          variant="contained"
+          onClick={() => {
+            navigate("/NewNote");
+          }}
+        >
+          Add Note
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <>
+      {notes.map((note: NoteProps, index: number) => {
+        return (
+          <PublicNote
+            id={note.id}
+            key={index}
+            title={note.title}
+            content={note.content}
+            date_created={note.date_created}
+            owner={note.owner}
+            public={note.public}
+          />
+        );
+      })}
+    </>
+  );
+}

src/Components/ViewToggle/ViewToggle.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { useState } from "react";
+import styles from "../../styles";
+import { Switch } from "@mui/material";
+import Notes from "../Notes/Notes";
+import PublicNotes from "../PublicNotes/Notes";
+
+export default function ViewToggle() {
+  const [switchLabel, setLabel] = useState("Viewing public notes");
+  const [togglePublic, setToggled] = useState(true);
+  if (togglePublic) {
+    return (
+      <div style={styles.background}>
+        <div
+          style={{
+            marginLeft: 16,
+            flexDirection: "row",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <Switch
+            checked={togglePublic}
+            onClick={() => {
+              setToggled(!togglePublic);
+              if (togglePublic) {
+                setLabel("Viewing own notes");
+              } else {
+                setLabel("Viewing public notes");
+              }
+            }}
+          />
+          <p style={styles.text_small}>{switchLabel}</p>
+        </div>
+        <PublicNotes />
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <div
+        style={{
+          marginLeft: 16,
+          flexDirection: "row",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <Switch
+          checked={togglePublic}
+          onClick={() => {
+            setToggled(!togglePublic);
+            if (togglePublic) {
+              setLabel("Viewing own notes");
+            } else {
+              setLabel("Viewing public notes");
+            }
+          }}
+        />
+        <p style={styles.text_small}>{switchLabel}</p>
+      </div>
+      <Notes />
+    </div>
+  );
+}

src/Routes/Home/Home.tsx

@@ -1,11 +1,11 @@
 import styles from "../../styles";
 import Header from "../../Components/Header/Header";
-import Notes from "../../Components/Notes/Notes";
+import ViewToggle from "../../Components/ViewToggle/ViewToggle";
 export default function Home() {
   return (
     <div style={styles.background}>
       <Header />
-      <Notes />
+      <ViewToggle />
     </div>
   );
 }