Enable loading posts from a grid view

src/components/pages/profile.js

@@ -244,12 +244,6 @@ const ProfileJsx = ({ navigation }) => {
 };
 
 const RawProfileJsx = (props) => {
-    let [state, setState] = useState({
-        own: props.own,
-        profile: props.profile,
-        notifs: props.notifs,
-    });
-
     const notif_pack = {
         active: require("assets/eva-icons/bell-unread.png"),
         inactive: require("assets/eva-icons/bell-black.png")
@@ -298,7 +292,7 @@ const RawProfileJsx = (props) => {
                         </Text>
                     </View>
                     {
-                        state.own ?
+                        props.own ?
                             <View style = { styles.profileContextContainer }>
                                 <TouchableOpacity
                                       onPress = {
@@ -334,7 +328,7 @@ const RawProfileJsx = (props) => {
                             }
                           }>
                         {
-                            state.own ?
+                            props.own ?
                                 <>View followers</>
                                 : <>{ props.mutuals + " mutuals" }</>
                         }
@@ -370,14 +364,7 @@ const RawProfileJsx = (props) => {
 
             <GridViewJsx
                 posts = { props.posts }
-                openPostCallback = {
+                navigation = { props.navigation }/>
-                    (id) => {
-                        props.navigation.navigate("ViewPost", {
-                            id: id,
-                            originTab: "Profile"
-                        });
-                    }
-                } />
         </View>
     );
 };

src/components/pages/view-post.js

@@ -1,23 +1,25 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
-import { ScreenWithFullNavigationJsx } from "src/components/navigation/navigators";
+import { ScreenWithBackBarJsx } from "src/components/navigation/navigators";
-import { PostByIdJsx } from "src/components/posts/post";
+import { PostByDataJsx } from "src/components/posts/post";
 
 const ViewPostJsx = ({navigation}) => {
-    const id = navigation.getParam("id", undefined);
+    const [state, setState] = useState({
+        post: navigation.getParam("post", null),
+        loaded: false,
+    });
 
-    if (id == undefined) {
+    if (state.post == null) {
-        throw Error("ID not specified when navigating to ViewPost!");
+        throw Error("Post not given when navigating to ViewPost!");
     }
 
     return (
-        <ScreenWithFullNavigationJsx
+        <ScreenWithBackBarJsx
-            active = { navigation.getParam("originTab", "Timeline") }
+              navigation = { navigation }>
-            navigation = { navigation }>
+            <PostByDataJsx
-            <PostByIdJsx
                 navigation = { navigation }
-                id = { id } />
+                data = { state.post } />
-        </ScreenWithFullNavigationJsx>
+        </ScreenWithBackBarJsx>
     );
 }
 

src/components/posts/grid-post.js

@@ -1,23 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Image, Dimensions, TouchableWithoutFeedback } from "react-native";
-
-const GridPostJsx = (props) => {
-    return (
-        <TouchableWithoutFeedback
-            onPress={ () => props.openPostCallback(props.id)}>
-            <Image
-                source = { { uri: props.previewUrl } }
-                style = { styles.gridImage } />
-        </TouchableWithoutFeedback>
-    )
-}
-
-const screen_width = Dimensions.get("window").width;
-const styles = {
-    gridImage: {
-        width: screen_width / 3,
-        height: screen_width / 3
-    }
-};
-
-export default GridPostJsx;

src/components/posts/grid-view.js

@@ -3,10 +3,9 @@ import {
     View,
     Dimensions,
     Image,
+    TouchableOpacity,
 } from "react-native";
 
-import GridPostJsx from "src/components/posts/grid-post";
-
 function partition(arr, size) {
     let newArray = [];
     for (let i = 0; i < arr.length; i += size) {
@@ -17,6 +16,23 @@ function partition(arr, size) {
     return newArray
 }
 
+const GridPostJsx = (props) => {
+    return (
+        <TouchableOpacity
+            onPress={ () => {
+                props.navigation.navigate("ViewPost", {
+                    post: props.data,
+                });
+            }}>
+            <Image
+                  source = {
+                      { uri: props.data.media_attachments[0].preview_url }
+                  }
+                style = { styles.gridImage } />
+        </TouchableOpacity>
+    )
+}
+
 const GridViewJsx = (props) => {
     let rows = partition(props.posts, 3);
     return (
@@ -28,19 +44,11 @@ const GridViewJsx = (props) => {
                             key = { i }>
                             {
                                 row.map((post) => {
-                                    const post_url = post
-                                        .media_attachments[0]
-                                        .preview_url;
-
                                     return (
                                         <View key = { post.id }>
                                             <GridPostJsx
-                                                id = { post.id }
+                                                navigation = { props.navigation }
-                                                previewUrl = { post_url }
+                                                data = { post } />
-                                                openPostCallback = {
-                                                    (id) => props.openPostCallback(id)
-                                                }
-                                                />
                                         </View>
                                     );
                                 })
@@ -59,7 +67,11 @@ const styles = {
         padding: 0,
         margin: 0,
         flexDirection: "row"
-    }
+    },
+    gridImage: {
+        width: screen_width / 3,
+        height: screen_width / 3
+    },
 };
 
 export default GridViewJsx;

src/components/posts/post.js

@@ -171,56 +171,6 @@ export const PostByDataJsx = (props) => {
     );
 }
 
-export const PostByIdJsx = (props) => {
-    /*
-    Renders a post given the post's ID in the properties, as is done when
-    retrieving an individual post on someone's profile.
-    */
-    let [state, setState] = useState({
-        avatar: "",
-        username: "",
-        media_attachments: [],
-        favourited: false,
-        reblogged: false,
-        content: "",
-        timestamp: 0,
-        loaded: false,
-        dimensions: []
-    });
-
-    useEffect(() => {
-        // TODO: Make API request using props.id, set it as the state
-        (() => {
-            Promise.all(getDimensionsPromises([{ url: TEST_IMAGE }]))
-                  .then(dimensions => {
-                setState({
-                    avatar: TEST_IMAGE,
-                    username: "njms",
-                    media_attachments: [{ url: TEST_IMAGE }],
-                    favourited: false,
-                    reblogged: false,
-                    content: "Also learning Claire de Lune feels a lot like reading the communist manifesto",
-                    timestamp: 1596745156000,
-                    loaded: true,
-                    dimensions: dimensions
-                });
-            });
-        })();
-    }, []);
-
-    return (
-        <View>
-            { state.loaded ?
-                <RawPostJsx
-                    data = { state }
-                    dimensions = { state.dimensions }
-                    navigation = { props.navigation }/>
-                : <View></View>
-            }
-        </View>
-    )
-}
-
 const styles = {
     postHeader: {
         display: "flex",