From 9bd19b2bafe1debc9aef73f81278184cbf203943 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Wed, 29 Mar 2023 18:59:35 +0800
Subject: [PATCH 1/4] Switch to local backend and polish login page

---
 src/Components/Api/Api.tsx | 2 +-
 src/Routes/Login/Login.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index d93144c..e2aa672 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -10,7 +10,7 @@ import {
 // Note APIs
 
 const instance = axios.create({
-  baseURL: "https://keannu126.pythonanywhere.com",
+  baseURL: "http://localhost:8000",
 });
 
 export function GetNotes() {
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index 9b5bf95..98be5f3 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -32,6 +32,7 @@ export default function Login() {
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, username: e.target.value });
             }}
+            value={user.username}
           />
         </div>
         <div style={styles.flex_row}>
@@ -43,6 +44,7 @@ export default function Login() {
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, password: e.target.value });
             }}
+            value={user.password}
           />
         </div>
         <Button

From 906063a2a27d1083e58ceaa32a3d7af9bcbd9fcf Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Wed, 29 Mar 2023 19:37:17 +0800
Subject: [PATCH 2/4] Added logic to support adding and editing of public notes

---
 src/Components/Note/Note.tsx             |  2 ++
 src/Components/Notes/Notes.tsx           |  5 ++---
 src/Interfaces/Interfaces.tsx            |  3 +++
 src/Routes/NewNote/NewNote.tsx           | 14 +++++++++++++-
 src/Routes/ViewEditNote/ViewEditNote.tsx | 21 +++++++++++++++++----
 5 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index 59003e7..b382b84 100644
--- a/src/Components/Note/Note.tsx
+++ b/src/Components/Note/Note.tsx
@@ -13,6 +13,7 @@ export default function Note(props: NoteProps) {
     mutationFn: DeleteNote,
     onSuccess: () => {
       queryClient.invalidateQueries("notes");
+      queryClient.invalidateQueries("public_notes");
     },
   });
   return (
@@ -30,6 +31,7 @@ export default function Note(props: NoteProps) {
         <p style={styles.text_medium}>
           Timestamp: {String(props.date_created)}
         </p>
+        <p style={styles.text_medium}>Public: {props.public ? "Yes" : "No"}</p>
         <div style={styles.flex_row}>
           <Button
             style={styles.button_red}
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index 8f54b46..5254bd2 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/src/Components/Notes/Notes.tsx
@@ -16,9 +16,7 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
-  const logged_in = useSelector(
-    (state: RootState) => state.logged_in.value
-    );
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
   if (isLoading) {
     return (
       <div style={styles.note}>
@@ -65,6 +63,7 @@ export default function Notes() {
             content={note.content}
             date_created={note.date_created}
             owner={note.owner}
+            public={note.public}
           />
         );
       })}
diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx
index 768ae65..24576c1 100644
--- a/src/Interfaces/Interfaces.tsx
+++ b/src/Interfaces/Interfaces.tsx
@@ -6,6 +6,7 @@ export interface NoteProps {
   id: number;
   date_created: Date;
   owner: string;
+  public: boolean;
 }
 
 export interface IconProps {
@@ -34,10 +35,12 @@ export interface ActivationParams {
 export interface AddNoteParams {
   title: string;
   content: string;
+  public: boolean;
 }
 
 export interface UpdateNoteParams {
   id: number;
   title: string;
   content: string;
+  public: boolean;
 }
diff --git a/src/Routes/NewNote/NewNote.tsx b/src/Routes/NewNote/NewNote.tsx
index 730b7b5..9b78b59 100644
--- a/src/Routes/NewNote/NewNote.tsx
+++ b/src/Routes/NewNote/NewNote.tsx
@@ -1,5 +1,5 @@
 import styles from "../../styles";
-import { Button } from "@mui/material";
+import { Button, Checkbox } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import Header from "../../Components/Header/Header";
@@ -14,12 +14,14 @@ export default function NewNote() {
   const [note, setNote] = useState({
     title: "",
     content: "",
+    public: false,
   });
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: AddNote,
     onSuccess: () => {
       queryClient.invalidateQueries("notes");
+      queryClient.invalidateQueries("public_notes");
     },
   });
 
@@ -47,6 +49,15 @@ export default function NewNote() {
               }}
             />
           </div>
+          <div style={styles.flex_row}>
+            <p style={styles.text_small}>Public Note?</p>
+            <input
+              type="checkbox"
+              onClick={() => {
+                setNote({ ...note, public: !note.public });
+              }}
+            />
+          </div>
           <Button
             style={styles.button_green}
             variant="contained"
@@ -55,6 +66,7 @@ export default function NewNote() {
                 await mutation.mutate({
                   title: note.title,
                   content: note.content,
+                  public: note.public,
                 });
                 navigate("/");
               } catch (error) {}
diff --git a/src/Routes/ViewEditNote/ViewEditNote.tsx b/src/Routes/ViewEditNote/ViewEditNote.tsx
index e8a0a9e..084b1ab 100644
--- a/src/Routes/ViewEditNote/ViewEditNote.tsx
+++ b/src/Routes/ViewEditNote/ViewEditNote.tsx
@@ -1,5 +1,5 @@
 import styles from "../../styles";
-import { Button } from "@mui/material";
+import { Button, Checkbox } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import Header from "../../Components/Header/Header";
@@ -17,11 +17,13 @@ export default function ViewNote() {
     mutationFn: UpdateNote,
     onSuccess: () => {
       queryClient.invalidateQueries("notes");
+      queryClient.invalidateQueries("public_notes");
     },
   });
   const [note, setNote] = useState({
-    title: "test",
-    content: "test",
+    title: "",
+    content: "",
+    public: true,
   });
   async function retrieve() {
     let a = await GetNote(Number(id));
@@ -53,7 +55,7 @@ export default function ViewNote() {
       </div>
     );
   }
-  if (data) {
+  if (data && note) {
     return (
       <div style={styles.background}>
         <Header />
@@ -80,6 +82,16 @@ export default function ViewNote() {
                 }}
               />
             </div>
+            <div style={styles.flex_row}>
+              <p style={styles.text_small}>Public Note?</p>
+              <input
+                type="checkbox"
+                defaultChecked={note.public}
+                onClick={() => {
+                  setNote({ ...note, public: !note.public });
+                }}
+              />
+            </div>
             <Button
               style={styles.button_green}
               variant="contained"
@@ -89,6 +101,7 @@ export default function ViewNote() {
                     id: Number(id),
                     title: note.title,
                     content: note.content,
+                    public: note.public,
                   });
                   navigate("/");
                 } catch (error) {}

From d0879f7eecf5fb8dca686d1dc6f5f06ef32fea68 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Wed, 29 Mar 2023 20:08:56 +0800
Subject: [PATCH 3/4] Added component for viewing public notes

---
 src/Components/Api/Api.tsx               | 13 +++++
 src/Components/PublicNote/Note.tsx       | 25 +++++++++
 src/Components/PublicNotes/Notes.tsx     | 66 ++++++++++++++++++++++++
 src/Components/ViewToggle/ViewToggle.tsx | 65 +++++++++++++++++++++++
 src/Routes/Home/Home.tsx                 |  4 +-
 5 files changed, 171 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/PublicNote/Note.tsx
 create mode 100644 src/Components/PublicNotes/Notes.tsx
 create mode 100644 src/Components/ViewToggle/ViewToggle.tsx

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index e2aa672..e5ec623 100644
--- a/src/Components/Api/Api.tsx
+++ b/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
diff --git a/src/Components/PublicNote/Note.tsx b/src/Components/PublicNote/Note.tsx
new file mode 100644
index 0000000..a1454c9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/Components/PublicNotes/Notes.tsx b/src/Components/PublicNotes/Notes.tsx
new file mode 100644
index 0000000..6889c29
--- /dev/null
+++ b/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}
+          />
+        );
+      })}
+    </>
+  );
+}
diff --git a/src/Components/ViewToggle/ViewToggle.tsx b/src/Components/ViewToggle/ViewToggle.tsx
new file mode 100644
index 0000000..ced5423
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx
index ddc9770..e069b13 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 Notes from "../../Components/Notes/Notes";
+import ViewToggle from "../../Components/ViewToggle/ViewToggle";
 export default function Home() {
   return (
     <div style={styles.background}>
       <Header />
-      <Notes />
+      <ViewToggle />
     </div>
   );
 }

From 9c512829cf84f78bbfea9b13cb68b64fb9327aaf Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Wed, 29 Mar 2023 20:10:16 +0800
Subject: [PATCH 4/4] Revert to connection to online backend to prepare for
 deployment

---
 src/Components/Api/Api.tsx           | 2 +-
 src/Components/PublicNotes/Notes.tsx | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx
index e5ec623..cb3e0b2 100644
--- a/src/Components/Api/Api.tsx
+++ b/src/Components/Api/Api.tsx
@@ -10,7 +10,7 @@ import {
 // Note APIs
 
 const instance = axios.create({
-  baseURL: "http://localhost:8000",
+  baseURL: "https://keannu125.pythonanywhere.com",
 });
 
 export function GetNotes() {
diff --git a/src/Components/PublicNotes/Notes.tsx b/src/Components/PublicNotes/Notes.tsx
index 6889c29..5f497f8 100644
--- a/src/Components/PublicNotes/Notes.tsx
+++ b/src/Components/PublicNotes/Notes.tsx
@@ -1,13 +1,10 @@
 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() {