From fad68bd97ffbbe2eb01ef72989b702ba6cf173bb Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 14 Apr 2023 22:03:18 +0800
Subject: [PATCH] Added public notes functionality to homepage

---
 src/Components/PublicNotes/Notes.tsx | 55 ++++++++++++++++++++++++++++
 src/Routes/Home/Home.tsx             |  5 ++-
 2 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/Components/PublicNotes/Notes.tsx

diff --git a/src/Components/PublicNotes/Notes.tsx b/src/Components/PublicNotes/Notes.tsx
new file mode 100644
index 0000000..efc4850
--- /dev/null
+++ b/src/Components/PublicNotes/Notes.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { useQuery } from "react-query";
+import { GetNotes, GetPublicNotes } from "../Api/Api";
+import styles from "../../styles";
+import { useSelector } from "react-redux";
+import { RootState } from "../../Features/Redux/Store/Store";
+import { NoteProps, RootDrawerParamList } from "../../Interfaces/Interfaces";
+import { useNavigation } from "@react-navigation/native";
+import Note from "../Note/Note";
+
+export default function PublicNotes() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  const {
+    data: notes,
+    isLoading,
+    error,
+  } = useQuery("public_notes", GetPublicNotes, { retry: 0 });
+  if (isLoading) {
+    return (
+      <Text style={{ ...styles.no, ...{ textAlign: "center" } }}>
+        Loading public notes...
+      </Text>
+    );
+  } else if (error) {
+    return (
+      <Text style={{ ...styles.no, ...{ textAlign: "center", color: "red" } }}>
+        Error contacting Notes server
+      </Text>
+    );
+  } else if (notes.length === 0) {
+    return (
+      <Text style={{ ...styles.no, ...{ textAlign: "center" } }}>
+        There are no public notes...
+      </Text>
+    );
+  }
+  return (
+    <ScrollView contentContainerStyle={{ justifyContent: "center" }}>
+      {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}
+            public={note.public}
+          />
+        );
+      })}
+    </ScrollView>
+  );
+}
diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx
index 0e171f8..50bc561 100644
--- a/src/Routes/Home/Home.tsx
+++ b/src/Routes/Home/Home.tsx
@@ -5,13 +5,14 @@ import Background from "../../Components/Background/Background";
 import Notes from "../../Components/Notes/Notes";
 import { Switch } from "react-native-gesture-handler";
 import { useState } from "react";
+import PublicNotes from "../../Components/PublicNotes/Notes";
 
 export default function Home() {
   const [switchLabel, setLabel] = useState("Viewing public notes");
-  const [togglePublic, setToggled] = useState(false);
+  const [togglePublic, setToggled] = useState(true);
   function Preview() {
     if (togglePublic) {
-      return <Text>Viewing public notes</Text>;
+      return <PublicNotes />;
     } else {
       return <Notes />;
     }