Merge pull request #14 from lemeow125/feature/public_notes

Feature/public notes

src/Components/Api/Api.tsx

@@ -10,7 +10,7 @@ import {
 // Note APIs
 
 const instance = axios.create({
-  baseURL: "https://keannu126.pythonanywhere.com",
+  baseURL: "https://keannu125.pythonanywhere.com",
 });
 
 export function GetNotes() {
@@ -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/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}

src/Components/Notes/Notes.tsx

@@ -16,9 +16,7 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
-  const logged_in = useSelector(
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
-    (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}
           />
         );
       })}

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,63 @@
+import * as React from "react";
+import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@mui/material";
+import { useQuery } from "react-query";
+import { GetPublicNotes } from "../Api/Api";
+import { NoteProps } from "../../Interfaces/Interfaces";
+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/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;
 }

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>
   );
 }

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

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) {}

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",
+    title: "",
-    content: "test",
+    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) {}