user [nfc]: Clean up naming and organization of new-PM screens

src/nav/AppNavigator.js

@@ -29,7 +29,7 @@ import MessageReactionsScreen from '../reactions/MessageReactionsScreen';
 import AccountDetailsScreen from '../account-info/AccountDetailsScreen';
 import PmConversationDetailsScreen from '../chat/PmConversationDetailsScreen';
 import SearchMessagesScreen from '../search/SearchMessagesScreen';
-import UsersScreen from '../users/UsersScreen';
+import New1to1PmScreen from '../user-picker/New1to1PmScreen';
 import ChatScreen from '../chat/ChatScreen';
 import LanguageScreen from '../settings/LanguageScreen';
 import PasswordAuthScreen from '../start/PasswordAuthScreen';
@@ -39,7 +39,7 @@ import VariablesScreen from '../diagnostics/VariablesScreen';
 import TimingScreen from '../diagnostics/TimingScreen';
 import StorageScreen from '../diagnostics/StorageScreen';
 import LightboxScreen from '../lightbox/LightboxScreen';
-import CreateGroupScreen from '../user-groups/CreateGroupScreen';
+import NewGroupPmScreen from '../user-picker/NewGroupPmScreen';
 import InviteUsersScreen from '../streams/InviteUsersScreen';
 import StreamSettingsScreen from '../streams/StreamSettingsScreen';
 import CreateStreamScreen from '../streams/CreateStreamScreen';
@@ -70,10 +70,10 @@ export type AppNavigatorParamList = {|
   +'password-auth': RouteParamsOf<typeof PasswordAuthScreen>,
   +'realm-input': RouteParamsOf<typeof RealmInputScreen>,
   +'search-messages': RouteParamsOf<typeof SearchMessagesScreen>,
-  +users: RouteParamsOf<typeof UsersScreen>,
+  +'new-1to1-pm': RouteParamsOf<typeof New1to1PmScreen>,
   +language: RouteParamsOf<typeof LanguageScreen>,
   +lightbox: RouteParamsOf<typeof LightboxScreen>,
-  +'create-group': RouteParamsOf<typeof CreateGroupScreen>,
+  +'new-group-pm': RouteParamsOf<typeof NewGroupPmScreen>,
   +'invite-users': RouteParamsOf<typeof InviteUsersScreen>,
   +diagnostics: RouteParamsOf<typeof DiagnosticsScreen>,
   +variables: RouteParamsOf<typeof VariablesScreen>,
@@ -178,10 +178,10 @@ export default function AppNavigator(props: Props): Node {
         name="search-messages"
         component={useHaveServerDataGate(SearchMessagesScreen)}
       />
-      <Stack.Screen name="users" component={useHaveServerDataGate(UsersScreen)} />
+      <Stack.Screen name="new-1to1-pm" component={useHaveServerDataGate(New1to1PmScreen)} />
       <Stack.Screen name="language" component={useHaveServerDataGate(LanguageScreen)} />
       <Stack.Screen name="lightbox" component={useHaveServerDataGate(LightboxScreen)} />
-      <Stack.Screen name="create-group" component={useHaveServerDataGate(CreateGroupScreen)} />
+      <Stack.Screen name="new-group-pm" component={useHaveServerDataGate(NewGroupPmScreen)} />
       <Stack.Screen name="invite-users" component={useHaveServerDataGate(InviteUsersScreen)} />
       <Stack.Screen name="diagnostics" component={useHaveServerDataGate(DiagnosticsScreen)} />
       <Stack.Screen name="variables" component={useHaveServerDataGate(VariablesScreen)} />

src/pm-conversations/PmConversationsScreen.js

@@ -63,7 +63,7 @@ export default function PmConversationsScreen(props: Props): Node {
           style={styles.button}
           text="New PM"
           onPress={() => {
-            setTimeout(() => navigation.push('users'));
+            setTimeout(() => navigation.push('new-1to1-pm'));
           }}
         />
         <ZulipButton
@@ -72,7 +72,7 @@ export default function PmConversationsScreen(props: Props): Node {
           style={styles.button}
           text="New group PM"
           onPress={() => {
-            setTimeout(() => navigation.push('create-group'));
+            setTimeout(() => navigation.push('new-group-pm'));
           }}
         />
       </View>

src/users/UsersCard.js → src/user-picker/New1to1PmScreen.js

@@ -1,25 +1,26 @@
 /* @flow strict-local */
-
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { Node } from 'react';
 
+import type { RouteProp } from '../react-navigation';
+import type { AppNavigationProp } from '../nav/AppNavigator';
+import Screen from '../common/Screen';
+import UserList from '../users/UserList';
 import type { UserOrBot } from '../types';
 import { useSelector, useDispatch } from '../react-redux';
 import { pm1to1NarrowFromUser } from '../utils/narrow';
-import UserList from './UserList';
-import { getUsers, getPresence } from '../selectors';
+import { getUsers } from '../selectors';
 import { navigateBack, doNarrow } from '../actions';
 import { useNavigation } from '../react-navigation';
 
 type Props = $ReadOnly<{|
-  filter: string,
+  navigation: AppNavigationProp<'new-1to1-pm'>,
+  route: RouteProp<'new-1to1-pm', void>,
 |}>;
 
-export default function UsersCard(props: Props): Node {
-  const { filter } = props;
+export default function New1to1PmScreen(props: Props): Node {
   const dispatch = useDispatch();
   const users = useSelector(getUsers);
-  const presences = useSelector(getPresence);
 
   const navigation = useNavigation();
   const handleUserNarrow = useCallback(
@@ -30,7 +31,11 @@ export default function UsersCard(props: Props): Node {
     [dispatch, navigation],
   );
 
+  const [filter, setFilter] = useState<string>('');
+
   return (
-    <UserList users={users} filter={filter} presences={presences} onPress={handleUserNarrow} />
+    <Screen search scrollEnabled={false} searchBarOnChange={setFilter}>
+      <UserList users={users} filter={filter} onPress={handleUserNarrow} />
+    </Screen>
   );
 }

src/user-groups/CreateGroupScreen.js → src/user-picker/NewGroupPmScreen.js

@@ -10,22 +10,22 @@ import Screen from '../common/Screen';
 import { doNarrow, navigateBack } from '../actions';
 import { pmNarrowFromRecipients } from '../utils/narrow';
 import { pmKeyRecipientsFromUsers } from '../utils/recipient';
-import UserPickerCard from '../user-picker/UserPickerCard';
+import UserPickerCard from './UserPickerCard';
 import { getOwnUserId } from '../users/userSelectors';
 
 type Props = $ReadOnly<{|
-  navigation: AppNavigationProp<'create-group'>,
-  route: RouteProp<'create-group', void>,
+  navigation: AppNavigationProp<'new-group-pm'>,
+  route: RouteProp<'new-group-pm', void>,
 |}>;
 
-export default function CreateGroupScreen(props: Props): Node {
+export default function NewGroupPmScreen(props: Props): Node {
   const { navigation } = props;
   const dispatch = useDispatch();
   const ownUserId = useSelector(getOwnUserId);
 
   const [filter, setFilter] = useState<string>('');
 
-  const handleCreateGroup = useCallback(
+  const handlePickerComplete = useCallback(
     (selected: $ReadOnlyArray<UserOrBot>) => {
       navigation.dispatch(navigateBack());
       dispatch(doNarrow(pmNarrowFromRecipients(pmKeyRecipientsFromUsers(selected, ownUserId))));
@@ -35,7 +35,7 @@ export default function CreateGroupScreen(props: Props): Node {
 
   return (
     <Screen search scrollEnabled={false} searchBarOnChange={setFilter}>
-      <UserPickerCard filter={filter} onComplete={handleCreateGroup} showOwnUser={false} />
+      <UserPickerCard filter={filter} onComplete={handlePickerComplete} showOwnUser={false} />
     </Screen>
   );
 }

src/user-picker/UserPickerCard.js

@@ -14,7 +14,7 @@ import { IconDone } from '../common/Icons';
 import UserList from '../users/UserList';
 import AvatarList from './AvatarList';
 import AnimatedScaleComponent from '../animation/AnimatedScaleComponent';
-import { getUsers, getPresence } from '../selectors';
+import { getUsers } from '../selectors';
 import { getOwnUserId } from '../users/userSelectors';
 
 const styles = createStyleSheet({
@@ -51,7 +51,6 @@ export default function UserPickerCard(props: Props): Node {
   const { filter, showOwnUser } = props;
 
   const users = useSelector(state => getUsersToShow(state, showOwnUser));
-  const presences = useSelector(getPresence);
 
   const [selectedState, setSelectedState] = useState<$ReadOnlyArray<UserOrBot>>([]);
   const listRef = useRef<FlatList<UserOrBot> | null>(null);
@@ -80,7 +79,6 @@ export default function UserPickerCard(props: Props): Node {
       <UserList
         filter={filter}
         users={users}
-        presences={presences}
         selected={selectedState}
         onPress={(user: UserOrBot) => {
           setSelectedState(state => {

src/users/UserList.js

@@ -4,13 +4,14 @@ import type { Node } from 'react';
 import { SectionList } from 'react-native';
 import { useSelector } from '../react-redux';
 
-import type { PresenceState, UserOrBot } from '../types';
+import type { UserOrBot } from '../types';
 import { createStyleSheet } from '../styles';
 import SectionHeader from '../common/SectionHeader';
 import SearchEmptyState from '../common/SearchEmptyState';
 import UserItem from './UserItem';
 import { sortUserList, filterUserList, groupUsersByStatus } from './userHelpers';
 import { getMutedUsers } from '../selectors';
+import { getPresence } from '../directSelectors';
 
 const styles = createStyleSheet({
   list: {
@@ -22,13 +23,14 @@ type Props = $ReadOnly<{|
   filter: string,
   users: $ReadOnlyArray<UserOrBot>,
   selected?: $ReadOnlyArray<UserOrBot>,
-  presences: PresenceState,
   onPress: (user: UserOrBot) => void,
 |}>;
 
 export default function UserList(props: Props): Node {
-  const { filter, users, presences, onPress, selected = [] } = props;
+  const { filter, users, onPress, selected = [] } = props;
   const mutedUsers = useSelector(getMutedUsers);
+  const presences = useSelector(getPresence);
+
   const filteredUsers = filterUserList(users, filter).filter(user => !mutedUsers.has(user.user_id));
 
   if (filteredUsers.length === 0) {