Polished homepage and added private notes functionality

src/Components/Note/Note.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { View, Text, TextInput, ScrollView } from "react-native";
+import styles from "../../styles";
+import { NoteProps } from "../../Interfaces/Interfaces";
+
+export default function Note(props: NoteProps) {
+  return (
+    <View style={styles.addnotecont}>
+      <View style={styles.tle}>
+        <TextInput
+          style={styles.title}
+          value={props.title}
+          maxLength={20}
+          editable={false}
+        />
+      </View>
+      <View style={styles.typehere}>
+        <ScrollView style={styles.typeinput} nestedScrollEnabled={true}>
+          <Text style={styles.typeinput}>{props.content}</Text>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}

src/Components/Notes/Notes.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { useQuery } from "react-query";
+import { GetNotes } 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 Notes() {
+  const navigation = useNavigation<RootDrawerParamList>();
+  const {
+    data: notes,
+    isLoading,
+    error,
+  } = useQuery("notes", GetNotes, { retry: 0 });
+  const logged_in = useSelector((state: RootState) => state.logged_in.value);
+  if (isLoading) {
+    return (
+      <Text style={{ ...styles.no, ...{ textAlign: "center" } }}>
+        Loading notes...
+      </Text>
+    );
+  } else if (!logged_in && error) {
+    return (
+      <Text style={{ ...styles.no, ...{ textAlign: "center" } }}>
+        Please login to use Clip 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 (
+      <View>
+        <Text style={styles.no}>No notes exist yet. Make one!</Text>;
+        <View style={styles.homecont}>
+          <TouchableOpacity
+            onPress={() => {
+              navigation.navigate("New Note");
+            }}
+          >
+            <Text style={styles.newnote}>+</Text>
+          </TouchableOpacity>
+          <Text style={styles.no}>New note...</Text>
+          <View style={{ margin: 16 }} />
+        </View>
+      </View>
+    );
+  }
+  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}
+          />
+        );
+      })}
+      <TouchableOpacity
+        style={{
+          ...styles.homecont,
+          ...{ display: "flex", alignSelf: "center" },
+        }}
+        onPress={() => {
+          navigation.navigate("New Note");
+        }}
+      >
+        <Text style={styles.newnote}>+</Text>
+        <Text style={styles.no}>New note...</Text>
+      </TouchableOpacity>
+
+      <View style={{ margin: 16 }} />
+    </ScrollView>
+  );
+}

src/Interfaces/Interfaces.tsx

@@ -30,6 +30,7 @@ export interface NoteProps {
   id: number;
   date_created: Date;
   owner: string;
+  public: boolean;
 }
 
 export interface IconProps {

src/Routes/Home/Home.tsx

@@ -1,16 +1,21 @@
 import * as React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View, Text } from "react-native";
 import styles from "../../styles";
 import Background from "../../Components/Background/Background";
-import AppIcon from "../../Components/Icons/AppIcon/AppIcon";
+import Notes from "../../Components/Notes/Notes";
-import { useNavigation } from "@react-navigation/native";
+import { Switch } from "react-native-gesture-handler";
-import { useDispatch } from "react-redux";
+import { useState } from "react";
-import { RootDrawerParamList } from "../../Interfaces/Interfaces";
 
 export default function Home() {
-  const navigation = useNavigation<RootDrawerParamList>();
+  const [switchLabel, setLabel] = useState("Viewing public notes");
-
+  const [togglePublic, setToggled] = useState(false);
-  const dispatch = useDispatch();
+  function Preview() {
+    if (togglePublic) {
+      return <Text>Viewing public notes</Text>;
+    } else {
+      return <Notes />;
+    }
+  }
   return (
     <Background>
       <Text style={{ ...styles.text_white, ...{ fontSize: 25 } }}>
@@ -20,22 +25,27 @@ export default function Home() {
         style={{
           display: "flex",
           flexDirection: "row",
+          justifyContent: "flex-start",
+          marginLeft: 16,
           alignItems: "center",
-          justifyContent: "center",
         }}
       >
-        <View style={styles.homecont}>
+        <Switch
-          <TouchableOpacity
+          onValueChange={() => {
-            onPress={() => {
+            setToggled(!togglePublic);
-              navigation.navigate("New Note");
+            if (togglePublic) {
-            }}
+              setLabel("Viewing own notes");
-          >
+            } else {
-            <Text style={styles.newnote}>+</Text>
+              setLabel("Viewing public notes");
-          </TouchableOpacity>
+            }
-          <Text style={styles.no}>New note...</Text>
+          }}
-          <View style={{ margin: 16 }} />
+          value={togglePublic}
-        </View>
+        />
+        <Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
+          {switchLabel}
+        </Text>
       </View>
+      <Preview />
     </Background>
   );
 }