Enable tray to indicate when there's new notifications

src/components/navigation/tray.js

@@ -1,5 +1,8 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Image } from "react-native";
+
+import { checkUnreadNotifications } from "src/requests";
+
 import { activeOrNot } from "src/interface/interactions"
 import { TouchableWithoutFeedback, View } from "react-native";
 
@@ -18,6 +21,19 @@ const TrayButtonJsx = (props) => {
 
 const TrayJsx = (props) => {
     const nav = props.navigation;
+    const [state, setState] = useState({
+        unreadNotifications: false
+    });
+
+    useEffect(() => {
+        checkUnreadNotifications()
+            .then(isUnread => {
+                setState({...state,
+                    unreadNotifications: isUnread,
+                });
+            });
+    }, []);
+
 
     const icons = {
         feed: {
@@ -40,8 +56,12 @@ const TrayJsx = (props) => {
             active: require("assets/eva-icons/person-black.png"),
             inactive: require("assets/eva-icons/person-grey.png")
         },
+        profileNotif: {
+            active: require("assets/eva-icons/person-black-notif.png"),
+            inactive: require("assets/eva-icons/person-grey-notif.png")
+        },
     }
-    
+
     return (
         <View style = { styles.tray }>
             <View style = { styles.iconList }>
@@ -67,7 +87,11 @@ const TrayJsx = (props) => {
                         nav = { nav } />
                     <TrayButtonJsx
                         where = "Profile"
-                        pack = { icons.profile }
+                        pack = {
+                            state.unreadNotifications ?
+                                icons.profileNotif
+                                : icons.profile
+                        }
                         active = { props.active }
                         nav = { nav } />
             </View>
@@ -103,4 +127,4 @@ const styles = {
     }
 };
 
-export default TrayJsx;
+export default TrayJsx;

src/components/pages/authenticate.js

@@ -44,9 +44,9 @@ const AuthenticateJsx = ({navigation}) => {
     });
 
     useEffect(() => {
-        const profile = AsyncStorage.getItem("@user_profile").then((profile) => {
-            if (profile != null) {
-                navigation.navigate("feed");
+        AsyncStorage.getItem("@user_profile").then((profile) => {
+            if (profile) {
+                navigation.navigate("Feed");
             }
 
             setState({...state, authChecked: true});
@@ -55,9 +55,17 @@ const AuthenticateJsx = ({navigation}) => {
 
     const loginCallback = async () => {
         const profileJSON = JSON.stringify(TEST_PROFILE);
-        AsyncStorage.setItem("@user_profile", profileJSON).then(() => {
-            navigation.navigate("Feed");
+
+        // TODO: Should fetch initial notifications to prevent bugging a newly
+        // logged in user about the notifications already on their account
+        const notificationsJSON = JSON.stringify({
+            unread: false,
+            memory: [{ id: 1 }, { id: 2 }],
         });
+        await AsyncStorage.setItem("@user_profile", profileJSON);
+        await AsyncStorage.setItem("@user_notifications", notificationsJSON);
+
+        navigation.navigate("Feed");
     };
 
     return (

src/components/pages/profile/settings.js

@@ -10,6 +10,8 @@ import {
     Dimensions,
 } from "react-native";
 
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
 import { withoutHTML } from "src/interface/rendering";
 
 import { ScreenWithBackBarJsx } from "src/components/navigation/navigators";
@@ -203,7 +205,17 @@ const SettingsJsx = (props) => {
                 <TouchableOpacity style = { styles.largeButton }>
                     <Text> Save Profile </Text>
                 </TouchableOpacity>
-                <TouchableOpacity style = { styles.largeButton }>
+                <TouchableOpacity
+                      style = { styles.largeButton }
+                      onPress = {
+                        () => {
+                            AsyncStorage.multiRemove(
+                                ["@user_profile", "@user_notifications"]
+                            ).then(() => {
+                                props.navigation.navigate("Authenticate");
+                            });
+                        }
+                      }>
                     <Text style = { styles.textWarning }> Log out </Text>
                 </TouchableOpacity>
             </View>

src/requests.js

@@ -0,0 +1,33 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const TEST_NOTIFICATIONS = [{ id: 1 }, { id: 2 }];
+const TEST_NEW_NOTIFICATIONS_1 = [{ id: 1 }, { id: 2 }];
+const TEST_NEW_NOTIFICATIONS_2 = [{ id: 1 }, { id: 2 }, { id: 3 }];
+
+export async function checkUnreadNotifications() {
+    // If the check has already been made since the last time notifications.js
+    // has been opened
+    const notifications = JSON.parse(await AsyncStorage.getItem("@user_notifications"));
+
+    if (notifications.unread) {
+        return true;
+    } else {
+        // Some promise to get new notifications
+        const newNotifs = await Promise.resolve(TEST_NEW_NOTIFICATIONS_2);
+
+        const isUnread = JSON.stringify(newNotifs) != JSON.stringify(notifications.memory);
+
+        console.log(JSON.stringify(newNotifs));
+        console.log(JSON.stringify(notifications.memory));
+
+        // Update stored notifications
+        await AsyncStorage.setItem(
+            "@user_notifications",
+            JSON.stringify({...notifications,
+                unread: isUnread,
+            })
+        );
+
+        return isUnread;
+    }
+}