Enable loading posts from a grid view
This commit is contained in:
parent
c754892156
commit
1dc775004e
|
|
@ -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 = {
|
||||
(id) => {
|
||||
props.navigation.navigate("ViewPost", {
|
||||
id: id,
|
||||
originTab: "Profile"
|
||||
});
|
||||
}
|
||||
} />
|
||||
navigation = { props.navigation }/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import { ScreenWithFullNavigationJsx } from "src/components/navigation/navigators";
|
||||
import { PostByIdJsx } from "src/components/posts/post";
|
||||
import { ScreenWithBackBarJsx } from "src/components/navigation/navigators";
|
||||
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) {
|
||||
throw Error("ID not specified when navigating to ViewPost!");
|
||||
if (state.post == null) {
|
||||
throw Error("Post not given when navigating to ViewPost!");
|
||||
}
|
||||
|
||||
return (
|
||||
<ScreenWithFullNavigationJsx
|
||||
active = { navigation.getParam("originTab", "Timeline") }
|
||||
<ScreenWithBackBarJsx
|
||||
navigation = { navigation }>
|
||||
<PostByIdJsx
|
||||
<PostByDataJsx
|
||||
navigation = { navigation }
|
||||
id = { id } />
|
||||
</ScreenWithFullNavigationJsx>
|
||||
data = { state.post } />
|
||||
</ScreenWithBackBarJsx>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 }
|
||||
previewUrl = { post_url }
|
||||
openPostCallback = {
|
||||
(id) => props.openPostCallback(id)
|
||||
}
|
||||
/>
|
||||
navigation = { props.navigation }
|
||||
data = { post } />
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue