diff --git a/src/App.js b/src/App.js index 9b7d6db..6e909b7 100644 --- a/src/App.js +++ b/src/App.js @@ -15,23 +15,25 @@ import DiscoverJsx from 'src/components/pages/discover'; import SearchJsx from 'src/components/pages/discover/search'; import ViewHashtagJsx from 'src/components/pages/discover/view-hashtag'; import NotificationsJsx from 'src/components/pages/profile/notifications'; +import UserListJsx from "src/components/pages/user-list.js"; const Stack = createStackNavigator({ - Feed: { screen: FeedJsx, }, - Discover: { screen: DiscoverJsx }, - Notifications: { screen: NotificationsJsx }, - Profile: { screen: ProfileJsx, }, - Search: { screen: SearchJsx }, - ViewPost: { screen: ViewPostJsx }, - ViewComments: { screen: ViewCommentsJsx }, - ViewProfile: { screen: ViewProfileJsx }, - ViewHashtag: { screen: ViewHashtagJsx } + Feed: { screen: FeedJsx, }, + Discover: { screen: DiscoverJsx }, + Notifications: { screen: NotificationsJsx }, + Profile: { screen: ProfileJsx, }, + Search: { screen: SearchJsx }, + ViewPost: { screen: ViewPostJsx }, + ViewComments: { screen: ViewCommentsJsx }, + ViewProfile: { screen: ViewProfileJsx }, + ViewHashtag: { screen: ViewHashtagJsx }, + UserList: { screen: UserListJsx } }, { - initialRouteKey: "Feed", - headerMode: "none", - navigationOptions: { - headerVisible: false - } + initialRouteKey: "Feed", + headerMode: "none", + navigationOptions: { + headerVisible: false + } }); const App = createAppContainer(Stack); diff --git a/src/components/pages/profile.js b/src/components/pages/profile.js index d9f2c28..c8f761c 100644 --- a/src/components/pages/profile.js +++ b/src/components/pages/profile.js @@ -217,7 +217,17 @@ const ProfileDisplayJsx = ({navigation}) => { { state.profile.statuses_count } posts •  - { state.mutuals.length } mutuals + { + navigation.navigate("UserList", { + data: [/*Some array of users*/], + context: "Your mutual followers with " + state.profile.display_name + }); + } + }> + { state.mutuals.length } mutuals + {state.profile.note} diff --git a/src/components/pages/user-list.js b/src/components/pages/user-list.js new file mode 100644 index 0000000..74616b1 --- /dev/null +++ b/src/components/pages/user-list.js @@ -0,0 +1,145 @@ +import React from "react"; +import { + SafeAreaView, + View, + Image, + Text, + FlatList, + Dimensions, + TouchableOpacity, +} from "react-native"; + +import { ScreenWithBackBarJsx } from "src/components/navigation/navigators.js"; +import ModerateMenuJsx from "src/components/moderate-menu.js"; + +const TEST_PROFILE = { + username: "njms", + acct: "njms", + display_name: "Nat🔆", + locked: false, + bot: false, + note: "Yeah heart emoji.", + avatar: "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg", + followers_count: "1 jillion", + statuses_count: 334, + fields: [ + { + name: "Blog", + value: "https://njms.ca", + verified_at: "some time" + }, + { + name: "Github", + value: "https://github.com/natjms", + verified_at: null + } + ] +}; + +const TEST_DATA = [ + {...TEST_PROFILE, id: 1}, + {...TEST_PROFILE, id: 2}, + {...TEST_PROFILE, id: 3}, + {...TEST_PROFILE, id: 4}, + {...TEST_PROFILE, id: 5}, + {...TEST_PROFILE, id: 6} +] + +function renderItemFactory(navigation) { + // Returns a renderItem function with the context of props.navigation so + // that it can enable the person to navigate to the selected account. + return ({item}) => ( + + { + navigation.navigate("Profile", { acct: item.acct }); + } + }> + + + + + @{ item.acct } + + + { item.display_name } + + + + + + + ); +} + +const UserListJsx = ({navigation}) => { + // const data = navigation.getParam("data", []) + const data = TEST_DATA; + const context = navigation.getParam("context", ""); + + const renderItem = renderItemFactory(navigation); + + return ( + + { + context ? + + { context }: + + : <> + } + item.id }/> + + ); +}; + +const SCREEN_WIDTH = Dimensions.get("window").width; + +const styles = { + context: { + fontSize: 18, + //color: "#888", + padding: 10, + }, + flexContainer: { + flex: 1, + flexDirection: "row", + alignItems: "center", + }, + itemContainer: { padding: 10 }, + accountButton: { + flexGrow: 1, + }, + bottomBorder: { + borderBottomWidth: 1, + borderBottomColor: "#888", + }, + avatar: { + width: SCREEN_WIDTH / 8, + height: SCREEN_WIDTH / 8, + borderRadius: SCREEN_WIDTH / 16, + marginRight: 10, + }, + acct: { + fontWeight: "bold", + }, + moderateMenu: { + marginLeft: "auto", + marginRight: 10, + }, + ellipsis: { + width: 20, + height: 20, + }, +}; + +export { UserListJsx as default };