Merge pull request #18 from natjms/discover

Implementing discover

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",

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"

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,18 +44,28 @@ const AuthenticateJsx = ({navigation}) => {
     });
 
     useEffect(() => {
-        const profile = AsyncStorage.getItem("@user_profile").then((profile) => {
+        AsyncStorage.getItem("@user_profile").then((profile) => {
-            if (profile != null) {
+            if (profile) {
-                navigation.navigate("feed");
+                navigation.navigate("Feed");
             }
 
             setState({...state, authChecked: true});
         });
     }, []);
 
-    const loginCallback = async () => {
+    const loginCallback = () => {
-        const profileJSON = JSON.stringify(TEST_PROFILE);
+        const initialization = [
-        AsyncStorage.setItem("@user_profile", profileJSON).then(() => {
+            [ "@user_profile", JSON.stringify(TEST_PROFILE) ],
+            [
+                "@user_notifications",
+                JSON.stringify({
+                    unread: false,
+                    memory: [{ id: 1 }, { id: 2 }],
+                })
+            ]
+        ];
+
+        AsyncStorage.multiSet(initialization).then(() => {
             navigation.navigate("Feed");
         });
     };

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
+            <TabView
-                navigation = { props.navigation }
+                navigationState = { { index, routes } }
-                originTab = "Discover" />
+                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;
+export default DiscoverJsx;

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;
+export default SearchJsx;

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;
+export default ViewHashtagJsx;

src/components/pages/profile.js

@@ -150,14 +150,21 @@ const ProfileDisplayJsx = ({navigation}) => {
     }
 
     useEffect(() => {
-        AsyncStorage.getItem("@user_profile").then((profileJSON) => {
+        AsyncStorage.multiGet(["@user_profile", "@user_notifications"])
-            setState({
+            .then(values => {
-                profile: JSON.parse(profileJSON),
+                const [profileJSON, notificationsJSON] = values;
-                mutuals: getMutuals(TEST_YOUR_FOLLOWERS, TEST_THEIR_FOLLOWERS),
+
-                own: true,
+                const profile = JSON.parse(profileJSON[1]);
-                loaded: true,
+                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;
@@ -205,9 +212,19 @@ const ProfileDisplayJsx = ({navigation}) => {
                             {
                                 state.own ?
                                     <View style = { styles.profileContextContainer }>
-                                        <TouchableOpacity>
+                                        <TouchableOpacity
+                                              onPress = {
+                                                () => {
+                                                    navigation.navigate("Notifications");
+                                                }
+                                              }>
                                             <Image
-                                                source = { activeOrNot(state.unread_notifs, notif_pack) }
+                                                source = {
+                                                    activeOrNot(
+                                                        state.unreadNotifications,
+                                                        notif_pack
+                                                    )
+                                                }
                                                 style = { styles.profileHeaderIcon } />
                                         </TouchableOpacity>
                                     </View>

src/components/pages/profile/notifications.js

@@ -1,14 +1,439 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
-import { ScreenWithTrayJsx } from "src/components/navigation/navigators";
+
+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
+        <ScreenWithBackBarJsx
-             active = "Notifications"
+              navigation = { navigation }>
-             navigation = { navigation }>
+            { state.loaded ?
-            
+                <View>
-        </ScreenWithTrayJsx>
+                    {
+                        state.notifications.map(notif =>
+                            renderNotification(notif, navigation)
+                        )
+                    }
+                </View>
+                : <></>
+            }
+        </ScreenWithBackBarJsx>
     );
 }
 
-export default NotificationsJsx;
+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;

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/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") }
+            active = { navigation.getParam("originTab", "Timeline") }
-            navigation = { props.navigation }>
+            navigation = { navigation }>
             <PostByIdJsx
-                navigation = { props.navigation }
+                navigation = { navigation }
-                id = { props.id } />
+                id = { id } />
         </ScreenWithFullNavigationJsx>
     );
 }

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;
+export default GridViewJsx;

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

src/requests.js

@@ -0,0 +1,30 @@
+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);
+
+        // Update stored notifications
+        await AsyncStorage.setItem(
+            "@user_notifications",
+            JSON.stringify({...notifications,
+                unread: isUnread,
+            })
+        );
+
+        return isUnread;
+    }
+}