nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add rendering for profile metadata

This commit is contained in:
Nat 2021-03-15 13:07:55 -03:00
parent 764efd73ca
commit 93415948c2
1 changed files with 142 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/pages/profile.js
View File

@ -1,5 +1,13 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { View, Dimensions, Image, Text, TouchableWithoutFeedback } from "react-native"; import {
View,
Dimensions,
Image,
Text,
TouchableWithoutFeedback
} from "react-native";
import * as Linking from "expo-linking";
import { activeOrNot } from "src/interface/interactions" import { activeOrNot } from "src/interface/interactions"
@ -37,6 +45,54 @@ const TEST_POSTS = [
} }
]; ];
const TEST_PROFILE = {
username: "njms",
acct: "njms",
display_name: "Nat🔆",
locked: false,
bot: false,
note: "Yeah heart emoji.",
avatar: TEST_IMAGE,
followers_count: "1 jillion",
statuses_count: 334,
fields: [
{
name: "Blog",
value: "<a href=\"https://njms.ca\">https://njms.ca</a>",
verified_at: "some time"
},
{
name: "Github",
value: "<a href=\"https://github.com/natjms\">https://github.com/natjms</a>",
verified_at: null
}
]
};
function withoutHTML(string) {
return string.replaceAll(/<[^>]*>/ig, "");
}
const HTMLLink = ({link}) => {
let url = link.match(/https?:\/\/\w+\.\w+/);
if (url) {
return (
<Text
style = { styles.anchor }
onPress = {
() => {
Linking.openURL(url[0]);
}
}>
{ withoutHTML(link) }
</Text>
);
} else {
return (<Text> { withoutHTML(link) } </Text>);
}
}
const ProfileJsx = ({navigation}) => { const ProfileJsx = ({navigation}) => {
return ( return (
<ScreenWithTrayJsx <ScreenWithTrayJsx
@ -61,15 +117,6 @@ const ViewProfileJsx = ({navigation}) => {
const ProfileDisplayJsx = ({navigation}) => { const ProfileDisplayJsx = ({navigation}) => {
const accountName = navigation.getParam("acct", ""); const accountName = navigation.getParam("acct", "");
let [state, setState] = useState({ let [state, setState] = useState({
avatar: "",
displayName: "Somebody",
username: "somebody",
statusesCount: 0,
followersCount: 0,
followingCount: 0,
note: "Not much here...",
unread_notifications: false,
own: false,
loaded: false loaded: false
}); });
@ -80,21 +127,11 @@ const ProfileDisplayJsx = ({navigation}) => {
useEffect(() => { useEffect(() => {
// do something to get the profile based on given account name // do something to get the profile based on given account name
if (!state.loaded) { setState({
setState({ profile: TEST_PROFILE,
avatar: TEST_IMAGE, loaded: true
displayName: "Nat🔆", });
username: "njms", }, []);
statusesCount: 334,
followersCount: "1 jillion",
followingCount: 7,
note: "Yeah heart emoji.",
own: true,
unread_notifs: false,
loaded: true
});
}
});
let profileButton; let profileButton;
if (state.own) { if (state.own) {
@ -117,45 +154,71 @@ const ProfileDisplayJsx = ({navigation}) => {
return ( return (
<View> <View>
<View style = { styles.jumbotron }> { state.loaded ?
<View style = { styles.profileHeader }> <>
<Image <View style = { styles.jumbotron }>
source = { { uri: state.avatar } } <View style = { styles.profileHeader }>
style = { styles.avatar } /> <Image
<View> source = { { uri: state.profile.avatar } }
<Text style = { styles.avatar } />
style = { styles.displayName }> <View>
{state.displayName} <Text
style = { styles.displayName }>
{state.profile.display_name}
</Text>
<Text style={ styles.strong }>
@{state.profile.username }
</Text>
</View>
<TouchableWithoutFeedback>
<Image
source = { activeOrNot(state.unread_notifs, notif_pack) }
style = { styles.bell } />
</TouchableWithoutFeedback>
</View>
<Text style = { styles.accountStats }>
{ state.profile.statuses_count } posts &#8226;&nbsp;
{ state.profile.followers_count } followers &#8226;&nbsp;
{ state.profile.following_count } following
</Text> </Text>
<Text><Text style={ styles.strong}> @{state.username} </Text></Text> <Text style = { styles.note }>
{state.profile.note}
</Text>
<table style = { styles.metaData }>
{
state.profile.fields.map((row, i) =>
<tr
key = { i }
style = { styles.row }>
<td style = { styles.rowName } >
<Text>{ row.name }</Text>
</td>
<td style = { styles.rowValue }>
<Text>
<HTMLLink
link = { row.value } />
</Text>
</td>
</tr>
)
}
</table>
{profileButton}
</View> </View>
<TouchableWithoutFeedback>
<Image
source = { activeOrNot(state.unread_notifs, notif_pack) }
style = { styles.bell } />
</TouchableWithoutFeedback>
</View>
<Text style = { styles.accountStats }>
{ state.statusesCount } posts &#8226;&nbsp;
{ state.followersCount } followers &#8226;&nbsp;
{ state.followingCount } following
</Text>
<Text style = { styles.note }>
{state.note}
</Text>
{profileButton}
</View>
<GridViewJsx <GridViewJsx
posts = { TEST_POSTS } posts = { TEST_POSTS }
openPostCallback = { openPostCallback = {
(id) => { (id) => {
navigation.navigate("ViewPost", { navigation.navigate("ViewPost", {
id: id, id: id,
originTab: "Profile" originTab: "Profile"
}); });
} }
} /> } />
</>
: <View></View>
}
</View> </View>
); );
}; };
@ -171,7 +234,6 @@ const styles = {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
marginBottom: screen_width / 20 marginBottom: screen_width / 20
}, },
displayName: { displayName: {
@ -199,6 +261,23 @@ const styles = {
fontSize: 16, fontSize: 16,
marginTop: 10, marginTop: 10,
}, },
metaData: {
marginTop: 20
},
row: {
padding: 10
},
rowName: {
width: "33%",
textAlign: "center"
},
rowValue: { width: "67%" },
anchor: {
color: "#888",
textDecoration: "underline"
},
button: { button: {
borderWidth: 1, borderWidth: 1,
borderStyle: "solid", borderStyle: "solid",
@ -217,4 +296,4 @@ const styles = {
}; };
export { ViewProfileJsx, ProfileDisplayJsx }; export { ViewProfileJsx, ProfileDisplayJsx };
export default ProfileJsx; export default ProfileJsx;