From b6ee403eb90ae824926678225f62f646e3123be1 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 3 Apr 2021 00:44:51 -0300
Subject: [PATCH 1/8] Enable tray to indicate when there's new notifications

---
 assets/eva-icons/person-black-notif.png  | Bin 0 -> 10021 bytes
 assets/eva-icons/person-grey-notif.png   | Bin 0 -> 10549 bytes
 src/components/navigation/tray.js        |  32 +++++++++++++++++++---
 src/components/pages/authenticate.js     |  18 +++++++++----
 src/components/pages/profile/settings.js |  14 +++++++++-
 src/requests.js                          |  33 +++++++++++++++++++++++
 6 files changed, 87 insertions(+), 10 deletions(-)
 create mode 100644 assets/eva-icons/person-black-notif.png
 create mode 100644 assets/eva-icons/person-grey-notif.png
 create mode 100644 src/requests.js

diff --git a/assets/eva-icons/person-black-notif.png b/assets/eva-icons/person-black-notif.png
new file mode 100644
index 0000000000000000000000000000000000000000..95af55d49889f416d0da471d76f4757b3f14e1a7
GIT binary patch
literal 10021
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%0AEB?MbX%2bY;T8eMW&)wKu!t
z<h8a}LaO^4o5_r$jA6#{0@M@kfB-z4`5&+Gyd>&6E*Tkd?x~S-{`Wm`W}5z9<64_9
zZOv%2*qYn;A&;PkFK5i}WwBi~Qjm=A{ZW}%y?NiA=t@1Y{|R%QSWW$j3wg)g-WxG>
zdeji@&3>lNXZX+XV^3!Jv+=`Tc74-ZTabF4r$O|QAPB$?5DjK+EF;z@0^pHi9$nm(
zA~fe!EC#R+y}aw$5uOmpAw}a&ITZZ3?x;$JFH_U9X<BV>hYSKrR1LBM4z~72u^R<R
z!KA{Ici+C+N0P4((fTN;6p<F%eC05h+R*Z0w2m>V1eB5{GBW|(wD~+s=;whSuOhh{
zg7R5d7>Qpbf4CZ?_@1XR7qCkc1%yBjxR@_g$z2h_Bj(8>1mCL?7=9JRj(2$X$9%p)
z^M`uAd7^J*RLR$gNK1*i4@PLuv0D+s6nxOQnVAtVu-C8_0j37nJz2~z9e>Z`+819s
zSzfcmc$ow(CcjyJ0myoI^Mg<!4Xu?W(Wgs+JyFG>4}-Jlo|nd_RDj^M8{YEjw1#aY
zM*hteeCx&5V#}=w7+~hR+!4GQNTjAj#PcG2S88f`wRt>kJT<k=ayhQ9lkWvV7*Yj*
z1OB|Y>XZ1FU<Lpo08as6<%n-|zM;IW6h8%D0kD7<-W9qCe(BCh>MhVvucmnTsB?N(
lx<KBjL4@ItmB;<AeI*$LTcmCUHHe?~YO3n0JXg9I@?SLfz<~e&

literal 0
HcmV?d00001

diff --git a/assets/eva-icons/person-grey-notif.png b/assets/eva-icons/person-grey-notif.png
new file mode 100644
index 0000000000000000000000000000000000000000..755b41e171859c4224825751baa1c1fc3ddfa695
GIT binary patch
literal 10549
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
RXc0V_)YZJIQK9A-_Fn)~ro;dM

literal 0
HcmV?d00001

diff --git a/src/components/navigation/tray.js b/src/components/navigation/tray.js
index 5d0c921..831862e 100644
--- a/src/components/navigation/tray.js
+++ b/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;
\ No newline at end of file
+export default TrayJsx;
diff --git a/src/components/pages/authenticate.js b/src/components/pages/authenticate.js
index 1d51162..2f58806 100644
--- a/src/components/pages/authenticate.js
+++ b/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 (
diff --git a/src/components/pages/profile/settings.js b/src/components/pages/profile/settings.js
index 0f6d11a..698cf3a 100644
--- a/src/components/pages/profile/settings.js
+++ b/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>
diff --git a/src/requests.js b/src/requests.js
new file mode 100644
index 0000000..64c075d
--- /dev/null
+++ b/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;
+    }
+}

From 4713f43c1f357922a731540a922ab44787801618 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 3 Apr 2021 00:51:08 -0300
Subject: [PATCH 2/8] Enable bell in profile.js to activate as per report from
 AsyncStorage

---
 src/components/pages/profile.js | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/profile.js b/src/components/pages/profile.js
index 98362ed..5854c73 100644
--- a/src/components/pages/profile.js
+++ b/src/components/pages/profile.js
@@ -149,14 +149,18 @@ const ProfileDisplayJsx = ({navigation}) => {
         inactive: require("assets/eva-icons/bell-black.png")
     }
 
-    useEffect(() => {
-        AsyncStorage.getItem("@user_profile").then((profileJSON) => {
-            setState({
-                profile: JSON.parse(profileJSON),
-                mutuals: getMutuals(TEST_YOUR_FOLLOWERS, TEST_THEIR_FOLLOWERS),
-                own: true,
-                loaded: true,
-            });
+    useEffect(async () => {
+        const profile = JSON.parse(await AsyncStorage.getItem("@user_profile"));
+        const notifications = JSON.parse(
+            await AsyncStorage.getItem("@user_notifications")
+        );
+
+        setState({
+            profile: profile,
+            unreadNotifications: notifications.unread,
+            mutuals: getMutuals(TEST_YOUR_FOLLOWERS, TEST_THEIR_FOLLOWERS),
+            own: true,
+            loaded: true,
         });
     }, []);
 
@@ -207,7 +211,12 @@ const ProfileDisplayJsx = ({navigation}) => {
                                     <View style = { styles.profileContextContainer }>
                                         <TouchableOpacity>
                                             <Image
-                                                source = { activeOrNot(state.unread_notifs, notif_pack) }
+                                                source = {
+                                                    activeOrNot(
+                                                        state.unreadNotifications,
+                                                        notif_pack
+                                                    )
+                                                }
                                                 style = { styles.profileHeaderIcon } />
                                         </TouchableOpacity>
                                     </View>

From 8e3c6b14d9374ba970be865f86d947ef5f27bf5c Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 3 Apr 2021 03:44:00 -0300
Subject: [PATCH 3/8] Complete notifications.js to list notifications

---
 src/components/pages/profile.js               |  34 +-
 src/components/pages/profile/notifications.js | 441 +++++++++++++++++-
 src/components/pages/view-post.js             |  16 +-
 src/requests.js                               |   3 -
 4 files changed, 465 insertions(+), 29 deletions(-)

diff --git a/src/components/pages/profile.js b/src/components/pages/profile.js
index 5854c73..a671a8f 100644
--- a/src/components/pages/profile.js
+++ b/src/components/pages/profile.js
@@ -149,19 +149,22 @@ const ProfileDisplayJsx = ({navigation}) => {
         inactive: require("assets/eva-icons/bell-black.png")
     }
 
-    useEffect(async () => {
-        const profile = JSON.parse(await AsyncStorage.getItem("@user_profile"));
-        const notifications = JSON.parse(
-            await AsyncStorage.getItem("@user_notifications")
-        );
+    useEffect(() => {
+        AsyncStorage.multiGet(["@user_profile", "@user_notifications"])
+            .then(values => {
+                const [profileJSON, notificationsJSON] = values;
 
-        setState({
-            profile: profile,
-            unreadNotifications: notifications.unread,
-            mutuals: getMutuals(TEST_YOUR_FOLLOWERS, TEST_THEIR_FOLLOWERS),
-            own: true,
-            loaded: true,
-        });
+                const profile = JSON.parse(profileJSON[1]);
+                const notifications = JSON.parse(notificationsJSON[1]);
+                console.log(notifications);
+                setState({
+                    profile: profile,
+                    unreadNotifications: notifications.unread,
+                    mutuals: getMutuals(TEST_YOUR_FOLLOWERS, TEST_THEIR_FOLLOWERS),
+                    own: true,
+                    loaded: true,
+                });
+            });
     }, []);
 
     let profileButton;
@@ -209,7 +212,12 @@ const ProfileDisplayJsx = ({navigation}) => {
                             {
                                 state.own ?
                                     <View style = { styles.profileContextContainer }>
-                                        <TouchableOpacity>
+                                        <TouchableOpacity
+                                              onPress = {
+                                                () => {
+                                                    navigation.navigate("Notifications");
+                                                }
+                                              }>
                                             <Image
                                                 source = {
                                                     activeOrNot(
diff --git a/src/components/pages/profile/notifications.js b/src/components/pages/profile/notifications.js
index 94f9034..42bd3bb 100644
--- a/src/components/pages/profile/notifications.js
+++ b/src/components/pages/profile/notifications.js
@@ -1,14 +1,439 @@
-import React, { useState } from "react";
-import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
+import React, { useState, useEffect } from "react";
+
+import {
+    Dimensions,
+    View,
+    TouchableOpacity,
+    Image,
+    Text,
+} from "react-native";
+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import { ScreenWithBackBarJsx } from "src/components/navigation/navigators";
+
+const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
+const TEST_NOTIFICATIONS = [
+    {
+        id: 1,
+        type: "follow",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+    },
+    {
+        id: 2,
+        type: "follow_request",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+    },
+    {
+        id: 3,
+        type: "mention",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+        status: {
+            id: 1,
+            media_attachments: [],
+            content: "This is a message",
+        }
+    },
+    {
+        id: 4,
+        type: "mention",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+        status: {
+            id: 1,
+            media_attachments: [
+                { url: TEST_IMAGE }
+            ],
+            content: "This is a message",
+        }
+    },
+    {
+        id: 5,
+        type: "mention",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+        status: {
+            id: 1,
+            media_attachments: [
+                { url: TEST_IMAGE }
+            ],
+            content: "This is a really really really really really really"
+                + " really really really really really really long message",
+        }
+    },
+    {
+        id: 6,
+        type: "reblog",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+        status: {
+            id: 1,
+            media_attachments: [
+                { url: TEST_IMAGE }
+            ],
+        }
+    },
+    {
+        id: 7,
+        type: "favourite",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+        status: {
+            id: 1,
+            media_attachments: [
+                { url: TEST_IMAGE }
+            ],
+        }
+    },
+    {
+        id: 8,
+        type: "status",
+        account: {
+            acct: "njms",
+            avatar: TEST_IMAGE,
+        },
+        status: {
+            id: 1,
+            media_attachments: [
+                { url: TEST_IMAGE }
+            ],
+        }
+    },
+]
+
+function navigateProfileFactory(nav, acct) {
+    return () => {
+        nav.navigate("ViewProfile", {
+            acct: acct,
+        });
+    };
+}
+
+function navigatePostFactory(nav, id) {
+    return () => {
+        nav.navigate("ViewPost", {
+            originTab: "Profile",
+            id: id,
+        });
+    }
+}
+
+function renderNotification(notif, navigation) {
+    switch(notif.type) {
+        case "follow":
+            return <FollowJsx
+                data = { notif }
+                key = { notif.id }
+                navigation = { navigation } />
+        case "follow_request":
+            return <FollowRequestJsx
+                data = { notif }
+                key = { notif.id }
+                navigation = { navigation } />
+        case "mention":
+            return <MentionJsx
+                data = { notif }
+                key = { notif.id }
+                navigation = { navigation } />
+        case "reblog":
+            return <ReblogJsx
+                data = { notif }
+                key = { notif.id }
+                navigation = { navigation } />
+        case "favourite":
+            return <FavouriteJsx
+                data = { notif }
+                key = { notif.id }
+                navigation = { navigation } />
+        case "status":
+            return <StatusJsx
+                data = { notif }
+                key = { notif.id }
+                navigation = { navigation } />
+        default:
+            // We're not expecting polls to be super popular on Pixelfed
+            return <></>
+    }
+}
+
+const UserTextJsx = (props) => {
+    return (
+        <Text
+              style = { styles.bold }
+              onPress = {
+                () => {
+                    props.navigation.navigate("ViewProfile", {
+                        acct: props.acct
+                    });
+                }
+              }>
+            { props.acct }&nbsp;
+        </Text>
+    );
+};
+
+const NotificationJsx = (props) => {
+    return (
+        <View style = { styles.notif.container }>
+            <View style = { styles.notif.thumbnailContainer }>
+                <TouchableOpacity
+                      onPress = { props.thumbnailPressCallback }>
+                    <Image
+                        style = {
+                            [
+                                styles.notif.thumbnail,
+                                props.thumbnailStyles
+                            ]
+                        }
+                        source = { { uri: props.thumbnail } } />
+                </TouchableOpacity>
+            </View>
+            <View style = { styles.notif.contentContainer }>
+                { props.children }
+            </View>
+            { props.button ?
+                <View style = { styles.notif.buttonContainer }>
+                   <TouchableOpacity
+                          style = { styles.notif.button }
+                          onPress = { props.buttonCallback }>
+                        <Text>{ props.buttonLabel }</Text>
+                    </TouchableOpacity>
+                </View>
+                : <></>
+            }
+        </View>
+    );
+};
+
+const FollowJsx = (props) => {
+    return (
+        <NotificationJsx
+              thumbnail = { props.data.account.avatar }
+              thumbnailStyles = { styles.notif.circularThumbnail }
+              thumbnailPressCallback = {
+                navigateProfileFactory(props.navigation, props.data.account.acct)
+              }>
+            <Text style = { styles.notif.content }>
+                <UserTextJsx acct = { props.data.account.acct } />
+                has followed you.
+            </Text>
+        </NotificationJsx>
+    );
+};
+
+const FollowRequestJsx = (props) => {
+    return (
+        <NotificationJsx
+              thumbnail = { props.data.account.avatar }
+              thumbnailStyles = { styles.notif.circularThumbnail }
+              thumbnailPressCallback = {
+                navigateProfileFactory(props.navigation, props.data.account.acct)
+              }
+              button = { true }
+              buttonLabel = { "Accept" }
+              buttonCallback = { () => console.log("Request accepted") }>
+            <Text style = { styles.notif.content }>
+                <UserTextJsx acct = { props.data.account.acct } />
+                has requested to follow you.
+            </Text>
+        </NotificationJsx>
+    );
+};
+
+const MentionJsx = (props) => {
+    let uri;
+    let imageStyle;
+    let thumbnailCallback;
+
+    if (props.data.status.media_attachments.length > 0) {
+        // If it's a comment...
+        uri = props.data.status.media_attachments[0].url;
+        imageStyle = {};
+        thumbnailCallback = navigatePostFactory(
+            props.navigation,
+            props.data.status.id
+        );
+    } else {
+        // If it's a reply to your comment...
+        uri = props.data.account.avatar;
+        imageStyle = styles.notif.circularThumbnail;
+        thumbnailCallback = navigateProfileFactory(
+            props.navigation,
+            props.data.account.acct
+        );
+    }
+
+    return (
+        <NotificationJsx
+              thumbnail = { uri }
+              thumbnailStyles = { imageStyle }i
+              thumbnailPressCallback = { thumbnailCallback }>
+            <Text style = { styles.notif.content }>
+                <UserTextJsx acct = { props.data.account.acct } />
+                mentioned you:
+                <Text style = { styles.notif.status }>
+                   "{ props.data.status.content }"
+                </Text>
+            </Text>
+        </NotificationJsx>
+    );
+};
+
+const ReblogJsx = (props) => {
+    return (
+        <NotificationJsx
+              thumbnail = { props.data.status.media_attachments[0].url }
+              thumbnailPressCallback = {
+                navigatePostFactory(props.navigation, props.data.status.id)
+              }>
+            <Image
+                style = { styles.notif.inlineIcon }
+                source = { require("assets/eva-icons/post-actions/boost-full.png") } />
+            <Text style = { styles.notif.content }>
+                <UserTextJsx acct = { props.data.account.acct } />
+                shared your post.
+            </Text>
+        </NotificationJsx>
+    );
+};
+
+const FavouriteJsx = (props) => {
+    return (
+        <NotificationJsx
+              thumbnail = { props.data.status.media_attachments[0].url }
+              thumbnailPressCallback = {
+                navigatePostFactory(props.navigation, props.data.status.id)
+              }>
+            <Image
+                style = { styles.notif.inlineIcon }
+                source = { require("assets/eva-icons/post-actions/heart-active.png") } />
+            <Text style = { styles.notif.content }>
+                <UserTextJsx acct = { props.data.account.acct } />
+                liked your post.
+            </Text>
+        </NotificationJsx>
+    );
+};
+
+const StatusJsx = (props) => {
+    return (
+        <NotificationJsx
+              thumbnail = { props.data.status.media_attachments[0].url }
+              thumbnailPressCallback = {
+                navigatePostFactory(props.navigation, props.data.status.id)
+              }>
+            <Text style = { styles.notif.content }>
+                <UserTextJsx acct = { props.data.account.acct } />
+                just posted.
+            </Text>
+        </NotificationJsx>
+    );
+};
 
 const NotificationsJsx = ({navigation}) => {
+    const [state, setState] = useState({
+        loaded: false,
+    });
+
+    useEffect(() => {
+        const read = JSON.stringify({
+            unread: false,
+            memory: [
+                { id: 1 },
+                { id: 2 },
+                { id: 3 },
+            ]
+        });
+
+        AsyncStorage.mergeItem("@user_notifications", read)
+            .then(() => {
+                setState({...state,
+                    notifications: TEST_NOTIFICATIONS,
+                    loaded: true
+                })
+            });
+
+    }, []);
+
     return (
-        <ScreenWithTrayJsx
-             active = "Notifications"
-             navigation = { navigation }>
-            
-        </ScreenWithTrayJsx>
+        <ScreenWithBackBarJsx
+              navigation = { navigation }>
+            { state.loaded ?
+                <View>
+                    {
+                        state.notifications.map(notif =>
+                            renderNotification(notif, navigation)
+                        )
+                    }
+                </View>
+                : <></>
+            }
+        </ScreenWithBackBarJsx>
     );
 }
 
-export default NotificationsJsx;
\ No newline at end of file
+const SCREEN_WIDTH = Dimensions.get("window").width;
+
+const styles = {
+    notif: {
+        container: {
+            flexDirection: "row",
+            alignItems: "center",
+            paddingLeft: 20,
+            marginTop: 10,
+            marginBottom: 10,
+        },
+
+        circularThumbnail: { borderRadius: SCREEN_WIDTH / 16 },
+        thumbnailContainer: {
+            marginRight: 10,
+        },
+        thumbnail: {
+            width: SCREEN_WIDTH / 8,
+            height: SCREEN_WIDTH / 8,
+        },
+
+        contentContainer: {
+            flexShrink: 1,
+            flexDirection: "row",
+            alignItems: "center",
+        },
+        inlineIcon: {
+            width: 20,
+            height: 20,
+            marginRight: 10,
+        },
+        status: { fontStyle: "italic" },
+
+        buttonContainer: {
+            marginLeft: "auto",
+            marginRight: 10,
+        },
+        button: {
+            borderWidth: 1,
+            borderColor: "#888",
+            borderRadius: 10,
+            padding: 10,
+        },
+    },
+    bold: { fontWeight: "bold" },
+};
+
+export default NotificationsJsx;
diff --git a/src/components/pages/view-post.js b/src/components/pages/view-post.js
index 5cc87ce..481ba1b 100644
--- a/src/components/pages/view-post.js
+++ b/src/components/pages/view-post.js
@@ -3,14 +3,20 @@ import React from "react";
 import { ScreenWithFullNavigationJsx } from "src/components/navigation/navigators";
 import { PostByIdJsx } from "src/components/posts/post";
 
-const ViewPostJsx = (props) => {
+const ViewPostJsx = ({navigation}) => {
+    const id = navigation.getParam("id", undefined);
+
+    if (id == undefined) {
+        throw Error("ID not specified when navigating to ViewPost!");
+    }
+
     return (
         <ScreenWithFullNavigationJsx
-            active = { props.navigation.getParam("originTab", "Timeline") }
-            navigation = { props.navigation }>
+            active = { navigation.getParam("originTab", "Timeline") }
+            navigation = { navigation }>
             <PostByIdJsx
-                navigation = { props.navigation }
-                id = { props.id } />
+                navigation = { navigation }
+                id = { id } />
         </ScreenWithFullNavigationJsx>
     );
 }
diff --git a/src/requests.js b/src/requests.js
index 64c075d..9e8349a 100644
--- a/src/requests.js
+++ b/src/requests.js
@@ -17,9 +17,6 @@ export async function checkUnreadNotifications() {
 
         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",

From c78fcda9123e852321e19fc0392e4e39e7956d86 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 3 Apr 2021 04:29:54 -0300
Subject: [PATCH 4/8] Improve async workflow in authenticate.js

---
 src/components/pages/authenticate.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/pages/authenticate.js b/src/components/pages/authenticate.js
index 2f58806..d10d2ed 100644
--- a/src/components/pages/authenticate.js
+++ b/src/components/pages/authenticate.js
@@ -53,19 +53,21 @@ const AuthenticateJsx = ({navigation}) => {
         });
     }, []);
 
-    const loginCallback = async () => {
-        const profileJSON = JSON.stringify(TEST_PROFILE);
+    const loginCallback = () => {
+        const initialization = [
+            [ "@user_profile", JSON.stringify(TEST_PROFILE) ],
+            [
+                "@user_notifications",
+                JSON.stringify({
+                    unread: false,
+                    memory: [{ id: 1 }, { id: 2 }],
+                })
+            ]
+        ];
 
-        // 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 }],
+        AsyncStorage.multiSet(initialization).then(() => {
+            navigation.navigate("Feed");
         });
-        await AsyncStorage.setItem("@user_profile", profileJSON);
-        await AsyncStorage.setItem("@user_notifications", notificationsJSON);
-
-        navigation.navigate("Feed");
     };
 
     return (

From c4f01f4939aca5e5362aebde751a497cda36586f Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 3 Apr 2021 04:30:16 -0300
Subject: [PATCH 5/8] Fix minor styling issues in search.js

---
 src/components/pages/discover/search.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/discover/search.js b/src/components/pages/discover/search.js
index 779374d..0592ba2 100644
--- a/src/components/pages/discover/search.js
+++ b/src/components/pages/discover/search.js
@@ -67,11 +67,11 @@ const SearchJsx = ({navigation}) => {
             { state.query == "" ?
                 <View></View>
                 : <View>
-                        <Text>Accounts</Text>
+                        <Text style = { styles.label }>Accounts</Text>
                         <AccountsListJsx
                             data = { TEST_ACCOUNTS }
                             callback = { accountCallback } />
-                        <Text>Hashtags</Text>
+                        <Text style = { styles.label }>Hashtags</Text>
                         <HashtagListJsx 
                             data = { TEST_HASHTAGS }
                             callback = { hashtagCallback } />
@@ -156,6 +156,10 @@ const styles = {
         fontSize: 17,
         color: "#888"
     },
+    label: {
+        padding: 10,
+        fontSize: 15,
+    },
     searchList: { padding: 0 },
     searchResultContainer: {
         display: "flex",
@@ -177,4 +181,4 @@ const styles = {
     }
 }
 
-export default SearchJsx;
\ No newline at end of file
+export default SearchJsx;

From c1537a327bbb81e270a3b63e0f74d8a27a1a48d6 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 10 Apr 2021 13:31:32 -0300
Subject: [PATCH 6/8] Add a home and federated tab to discover.js

---
 package-lock.json                | 10 +++++
 package.json                     |  2 +
 src/components/pages/discover.js | 71 +++++++++++++++++++++++++++++---
 3 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a0d6e83..d612379 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6137,6 +6137,11 @@
       "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
       "integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
     },
+    "react-native-pager-view": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-5.1.2.tgz",
+      "integrity": "sha512-UvPvjtuIkiI9Ti8NoMH+fiFj0ehfFv4WkNUGM46dOJfOxmE6Z/hoyJjymOHU//iLkQSMO+YNherZs0HcijdA2A=="
+    },
     "react-native-popup-menu": {
       "version": "0.15.10",
       "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz",
@@ -6168,6 +6173,11 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz",
       "integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg=="
     },
+    "react-native-tab-view": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz",
+      "integrity": "sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg=="
+    },
     "react-native-web": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.11.7.tgz",
diff --git a/package.json b/package.json
index e0fe5c7..831158c 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,12 @@
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
+    "react-native-pager-view": "^5.1.2",
     "react-native-popup-menu": "^0.15.10",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
+    "react-native-tab-view": "^2.16.0",
     "react-native-web": "~0.11.7",
     "react-navigation": "^4.4.0",
     "react-navigation-stack": "^2.8.2"
diff --git a/src/components/pages/discover.js b/src/components/pages/discover.js
index d44f68c..097862c 100644
--- a/src/components/pages/discover.js
+++ b/src/components/pages/discover.js
@@ -1,11 +1,61 @@
 import React, { useEffect, useState } from "react";
 import { View, TextInput, Text, Dimensions } from "react-native";
 
+import { TabView, TabBar, SceneMap } from "react-native-tab-view";
+
+import { Ionicons } from "@expo/vector-icons";
+
 import PagedGridJsx from "src/components/posts/paged-grid";
 import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 
 const DiscoverJsx = (props) => {
+    const [index, setIndex] = useState(0);
+    const [routes] = useState([
+        {
+            key: "home",
+            icon: "md-home",
+        },
+        {
+            key: "federated",
+            icon: "md-planet",
+        },
+    ]);
+
+    const HomeTimeline = () => (
+        <PagedGridJsx
+            navigation = { props.navigation }
+            originTab = "Discover" />
+    );
+
+    const FederatedTimeline = () => (
+        <PagedGridJsx
+            navigation = { props.navigation }
+            originTab = "Discover" />
+    );
+
+    const renderScene = SceneMap({
+        home: HomeTimeline,
+        federated: FederatedTimeline,
+    });
+
+    const renderTabBar = (props) => (
+        <TabBar
+            {...props}
+            indicatorStyle = { styles.tabBar.indicator }
+            activeColor = "#000"
+            inactiveColor = "#888"
+            renderIcon = { renderIcon }
+            style = { styles.tabBar.tab } />
+    );
+
+    const renderIcon = ({ route, color }) => (
+        <Ionicons
+            name = { route.icon }
+            size = { 24 }
+            color = { color } />
+    );
+
     return (
         <ScreenWithTrayJsx
                 active = "Discover"
@@ -20,13 +70,17 @@ const DiscoverJsx = (props) => {
                     </View>
                 </View>
             </TouchableWithoutFeedback>
-            <PagedGridJsx
-                navigation = { props.navigation }
-                originTab = "Discover" />
+            <TabView
+                navigationState = { { index, routes } }
+                renderScene = { renderScene }
+                renderTabBar =  { renderTabBar }
+                onIndexChange = { setIndex }
+                initialLayout = { { width: SCREEN_WIDTH } } />
         </ScreenWithTrayJsx>
     );
 };
 
+const SCREEN_WIDTH = Dimensions.get("window").width;
 const styles = {
     form: {
         display: "flex",
@@ -37,8 +91,15 @@ const styles = {
     searchBar: {
         padding: 10,
         fontSize: 17,
-        color: "#888"
+        color: "#888",
+        borderBottomWidth: 1,
+        borderBottomColor: "#CCC",
+    },
+
+    tabBar: {
+        indicator: { backgroundColor: "black" },
+        tab: { backgroundColor: "white" },
     },
 };
 
-export default DiscoverJsx;
\ No newline at end of file
+export default DiscoverJsx;

From d6fb9eb2e1494c616c28920d447540e777558d0f Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 10 Apr 2021 13:40:38 -0300
Subject: [PATCH 7/8] Improve the styling of the paging button in discover.js

---
 src/components/posts/grid-view.js  |  6 +++---
 src/components/posts/paged-grid.js | 13 +++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/posts/grid-view.js b/src/components/posts/grid-view.js
index e992582..0e9e3e0 100644
--- a/src/components/posts/grid-view.js
+++ b/src/components/posts/grid-view.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Dimensions, Image } from "react-native";
 
-import GridPostJsx from "src/components/posts/grid-post"
+import GridPostJsx from "src/components/posts/grid-post";
 
 function partition(arr, size) {
     let newArray = [];
@@ -17,7 +17,7 @@ const GridViewJsx = (props) => {
     let rows = partition(props.posts, 3);
     return (
         <View>
-            {   
+            {
                 rows.map((row, i) => {
                     return (
                         <View style = { styles.gridRow }
@@ -62,4 +62,4 @@ const styles = {
     }
 };
 
-export default GridViewJsx;
\ No newline at end of file
+export default GridViewJsx;
diff --git a/src/components/posts/paged-grid.js b/src/components/posts/paged-grid.js
index 50e964c..1ce0058 100644
--- a/src/components/posts/paged-grid.js
+++ b/src/components/posts/paged-grid.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, TouchableWithoutFeedback, Text } from "react-native";
+import { View, TouchableOpacity, Text } from "react-native";
 
 import GridViewJsx from "src/components/posts/grid-view";
 
@@ -49,7 +49,7 @@ const PagedGridJSX = (props) => {
 
     return (
         <View>
-            <GridViewJsx 
+            <GridViewJsx
                     posts = { state.posts }
                     openPostCallback = {
                         (id) => {
@@ -60,16 +60,16 @@ const PagedGridJSX = (props) => {
                         }
                     } />
             <View style = { styles.buttonContainer }>
-                <TouchableWithoutFeedback
+                <TouchableOpacity
                         onPress = { () => {
                             // TODO: actually get more posts :)
                             let morePosts = state.posts.concat(TEST_POSTS);
-                            setState({ posts: morePosts, loaded: true });
+                            setState({...state, posts: morePosts});
                         } }>
                     <View style = { styles.buttonMore }>
                         <Text>Show more?</Text>
                     </View>
-                </TouchableWithoutFeedback>
+                </TouchableOpacity>
             </View>
         </View>
     );
@@ -82,7 +82,8 @@ const styles = {
         alignItems: "center"
     },
     buttonMore: {
-        border: "2px solid black",
+        borderWidth: 1,
+        borderColor: "#888",
         borderRadius: 5,
         padding: 10,
         margin: 20

From a5694fea670730384276fe41c857a9ff185f33f4 Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 10 Apr 2021 13:48:17 -0300
Subject: [PATCH 8/8] Overhaul the look of view-hashtag.js

---
 src/components/pages/discover/view-hashtag.js | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/pages/discover/view-hashtag.js b/src/components/pages/discover/view-hashtag.js
index 48519aa..d095133 100644
--- a/src/components/pages/discover/view-hashtag.js
+++ b/src/components/pages/discover/view-hashtag.js
@@ -2,15 +2,15 @@ import React, { useState } from "react";
 import { View, Image, Dimensions, Text } from "react-native";
 import { ScreenWithFullNavigationJsx } from "src/components/navigation/navigators";
 import PagedGridJsx from "src/components/posts/paged-grid";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 const FollowHashtagButtonJsx = ({followed, onPress}) => {
     return (
-        <TouchableWithoutFeedback
+        <TouchableOpacity
              style = {
                 [
                     styles.button,
-                    followed ? { backgroundColor: "black" } : {}
+                    followed ? { backgroundColor: "#888" } : {}
                 ]
              }
              onPress = { onPress }>
@@ -18,7 +18,7 @@ const FollowHashtagButtonJsx = ({followed, onPress}) => {
                 style = { followed ? { color: "white" } : {} }>
                 { followed ? "Followed" : "Follow" }
             </Text>
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
     );
 };
 
@@ -43,13 +43,13 @@ const ViewHashtagJsx = ({navigation}) => {
                     </View>
                     <View style = { styles.headerText }>
                         <Text style = { styles.hashtag}>
-                            #{ state.name } 
+                            #{ state.name }
                         </Text>
                         <Text>
                             <Text style = { styles.strong}>{ state.nPosts }</Text> posts
                         </Text>
 
-                        <FollowHashtagButtonJsx 
+                        <FollowHashtagButtonJsx
                             followed = { state.followed }
                             onPress = { () => {
                                 // Send request to follow hashtag and such...
@@ -69,34 +69,34 @@ const ViewHashtagJsx = ({navigation}) => {
 const screen_width = Dimensions.get("window").width;
 const styles = {
     headerContainer: {
-        display: "flex",
         flexDirection: "row",
         alignItems: "center",
         padding: 15,
-        borderBottom: "2px solid black"
     },
     image: {
         width: screen_width / 3,
         height: screen_width / 3,
-        border: "2px solid black",
+        borderWidth: 1,
+        borderColor: "#888",
         borderRadius: "100%",
-        marginRight: 20
+        marginRight: 20,
     },
     hashtag: {
         fontWeight: "bold",
         fontSize: 20
     },
     button: {
-        border: "2px solid black",
+        borderWidth: 1,
+        borderColor: "#888",
         borderRadius: 5,
         padding: 10,
         paddingLeft: 30,
         paddingRight: 30,
-        marginTop: 10
+        marginTop: 10,
     },
     strong: {
-        fontWeight: "bold"
+        fontWeight: "bold",
     },
 }
 
-export default ViewHashtagJsx;
\ No newline at end of file
+export default ViewHashtagJsx;