From 83313ce9a8a148159e72021523e62dc69df2cbbc Mon Sep 17 00:00:00 2001
From: manila <3621543+manila@users.noreply.github.com>
Date: Sun, 25 Sep 2022 18:50:40 -0700
Subject: [PATCH] MainTabsScreen: Add Users icon to bottom nav

Fixes: #5495
---
 src/main/MainTabsScreen.js      | 13 +++++++++++--
 src/users/UsersProfileCard.js   | 32 ++++++++++++++++++++++++++++++++
 src/users/UsersProfileScreen.js | 19 +++++++++++++++++++
 3 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/users/UsersProfileCard.js
 create mode 100644 src/users/UsersProfileScreen.js

diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index cc9c41d3c2f..dcd7a48a994 100644
--- a/src/main/MainTabsScreen.js
+++ b/src/main/MainTabsScreen.js
@@ -13,12 +13,13 @@ import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigato
 import { bottomTabNavigatorConfig } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
 import PmConversationsScreen from '../pm-conversations/PmConversationsScreen';
-import { IconInbox, IconStream, IconPeople } from '../common/Icons';
+import { IconInbox, IconStream, IconPeople, IconPrivateChat } from '../common/Icons';
 import OwnAvatar from '../common/OwnAvatar';
 import OfflineNotice from '../common/OfflineNotice';
 import ProfileScreen from '../account-info/ProfileScreen';
 import styles, { BRAND_COLOR, ThemeContext } from '../styles';
 import SubscriptionsScreen from '../streams/SubscriptionsScreen';
+import UsersProfileScreen from '../users/UsersProfileScreen';
 
 export type MainTabsNavigatorParamList = {|
   +home: RouteParamsOf<typeof HomeScreen>,
@@ -77,7 +78,7 @@ export default function MainTabsScreen(props: Props): Node {
           component={PmConversationsScreen}
           options={{
             tabBarLabel: 'Private messages',
-            tabBarIcon: ({ color }) => <IconPeople size={24} color={color} />,
+            tabBarIcon: ({ color }) => <IconPrivateChat size={24} color={color} />,
             tabBarBadge: unreadPmsCount > 0 ? unreadPmsCount : undefined,
             tabBarBadgeStyle: {
               color: 'white',
@@ -85,6 +86,14 @@ export default function MainTabsScreen(props: Props): Node {
             },
           }}
         />
+        <Tab.Screen
+          name="users"
+          component={UsersProfileScreen}
+          options={{
+            tabBarLabel: 'Users',
+            tabBarIcon: ({ color }) => <IconPeople size={24} color={color} />,
+          }}
+        />
         <Tab.Screen
           name="profile"
           component={ProfileScreen}
diff --git a/src/users/UsersProfileCard.js b/src/users/UsersProfileCard.js
new file mode 100644
index 00000000000..c21947e35f8
--- /dev/null
+++ b/src/users/UsersProfileCard.js
@@ -0,0 +1,32 @@
+/* @flow strict-local */
+
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
+
+import type { UserOrBot } from '../types';
+import { useSelector } from '../react-redux';
+import UserList from './UserList';
+import { getUsers, getPresence } from '../selectors';
+import { useNavigation } from '../react-navigation';
+
+type Props = $ReadOnly<{|
+  filter: string,
+|}>;
+
+export default function UsersProfileCard(props: Props): Node {
+  const { filter } = props;
+  const users = useSelector(getUsers);
+  const presences = useSelector(getPresence);
+
+  const navigation = useNavigation();
+  const handleUserNarrow = useCallback(
+    (user: UserOrBot) => {
+      navigation.push('account-details', { userId: user.user_id });
+    },
+    [navigation],
+  );
+
+  return (
+    <UserList users={users} filter={filter} presences={presences} onPress={handleUserNarrow} />
+  );
+}
diff --git a/src/users/UsersProfileScreen.js b/src/users/UsersProfileScreen.js
new file mode 100644
index 00000000000..07a74aadaf6
--- /dev/null
+++ b/src/users/UsersProfileScreen.js
@@ -0,0 +1,19 @@
+/* @flow strict-local */
+import React from 'react';
+import type { Node } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { AppNavigationProp } from '../nav/AppNavigator';
+import UsersProfileCard from './UsersProfileCard';
+
+type Props = $ReadOnly<{|
+  navigation: AppNavigationProp<'users'>,
+|}>;
+
+export default function UsersInfoScreen(props: Props): Node {
+  return (
+    <SafeAreaView mode="padding" edges={['top']} style={{ flex: 1 }} scrollEnabled={false}>
+      <UsersProfileCard filter="" />
+    </SafeAreaView>
+  );
+}