Add rendering for profile metadata
This commit is contained in:
parent
764efd73ca
commit
93415948c2
|
|
@ -1,5 +1,13 @@
|
|||
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"
|
||||
|
||||
|
|
@ -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}) => {
|
||||
return (
|
||||
<ScreenWithTrayJsx
|
||||
|
|
@ -61,15 +117,6 @@ const ViewProfileJsx = ({navigation}) => {
|
|||
const ProfileDisplayJsx = ({navigation}) => {
|
||||
const accountName = navigation.getParam("acct", "");
|
||||
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
|
||||
});
|
||||
|
||||
|
|
@ -80,21 +127,11 @@ const ProfileDisplayJsx = ({navigation}) => {
|
|||
|
||||
useEffect(() => {
|
||||
// do something to get the profile based on given account name
|
||||
if (!state.loaded) {
|
||||
setState({
|
||||
avatar: TEST_IMAGE,
|
||||
displayName: "Nat🔆",
|
||||
username: "njms",
|
||||
statusesCount: 334,
|
||||
followersCount: "1 jillion",
|
||||
followingCount: 7,
|
||||
note: "Yeah heart emoji.",
|
||||
own: true,
|
||||
unread_notifs: false,
|
||||
profile: TEST_PROFILE,
|
||||
loaded: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
let profileButton;
|
||||
if (state.own) {
|
||||
|
|
@ -117,17 +154,21 @@ const ProfileDisplayJsx = ({navigation}) => {
|
|||
|
||||
return (
|
||||
<View>
|
||||
{ state.loaded ?
|
||||
<>
|
||||
<View style = { styles.jumbotron }>
|
||||
<View style = { styles.profileHeader }>
|
||||
<Image
|
||||
source = { { uri: state.avatar } }
|
||||
source = { { uri: state.profile.avatar } }
|
||||
style = { styles.avatar } />
|
||||
<View>
|
||||
<Text
|
||||
style = { styles.displayName }>
|
||||
{state.displayName}
|
||||
{state.profile.display_name}
|
||||
</Text>
|
||||
<Text style={ styles.strong }>
|
||||
@{state.profile.username }
|
||||
</Text>
|
||||
<Text><Text style={ styles.strong}> @{state.username} </Text></Text>
|
||||
</View>
|
||||
<TouchableWithoutFeedback>
|
||||
<Image
|
||||
|
|
@ -136,13 +177,32 @@ const ProfileDisplayJsx = ({navigation}) => {
|
|||
</TouchableWithoutFeedback>
|
||||
</View>
|
||||
<Text style = { styles.accountStats }>
|
||||
{ state.statusesCount } posts •
|
||||
{ state.followersCount } followers •
|
||||
{ state.followingCount } following
|
||||
{ state.profile.statuses_count } posts •
|
||||
{ state.profile.followers_count } followers •
|
||||
{ state.profile.following_count } following
|
||||
</Text>
|
||||
<Text style = { styles.note }>
|
||||
{state.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>
|
||||
|
||||
|
|
@ -156,6 +216,9 @@ const ProfileDisplayJsx = ({navigation}) => {
|
|||
});
|
||||
}
|
||||
} />
|
||||
</>
|
||||
: <View></View>
|
||||
}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
|
@ -171,7 +234,6 @@ const styles = {
|
|||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
|
||||
marginBottom: screen_width / 20
|
||||
},
|
||||
displayName: {
|
||||
|
|
@ -199,6 +261,23 @@ const styles = {
|
|||
fontSize: 16,
|
||||
marginTop: 10,
|
||||
},
|
||||
|
||||
metaData: {
|
||||
marginTop: 20
|
||||
},
|
||||
row: {
|
||||
padding: 10
|
||||
},
|
||||
rowName: {
|
||||
width: "33%",
|
||||
textAlign: "center"
|
||||
},
|
||||
rowValue: { width: "67%" },
|
||||
anchor: {
|
||||
color: "#888",
|
||||
textDecoration: "underline"
|
||||
},
|
||||
|
||||
button: {
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
|
|
|
|||
Loading…
Reference in New Issue