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 };