From b20263b71e2dfda5570394343ba1fdf500f71ca9 Mon Sep 17 00:00:00 2001 From: Greg Price Date: Mon, 7 Nov 2022 13:22:58 -0800 Subject: [PATCH 1/4] user [nfc]: Inline "card" into trivial "screen" wrapper UsersScreen --- src/users/UsersCard.js | 36 ------------------------------------ src/users/UsersScreen.js | 25 ++++++++++++++++++++++--- 2 files changed, 22 insertions(+), 39 deletions(-) delete mode 100644 src/users/UsersCard.js diff --git a/src/users/UsersCard.js b/src/users/UsersCard.js deleted file mode 100644 index cc559b158a4..00000000000 --- a/src/users/UsersCard.js +++ /dev/null @@ -1,36 +0,0 @@ -/* @flow strict-local */ - -import React, { useCallback } from 'react'; -import type { Node } from 'react'; - -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 { navigateBack, doNarrow } from '../actions'; -import { useNavigation } from '../react-navigation'; - -type Props = $ReadOnly<{| - filter: string, -|}>; - -export default function UsersCard(props: Props): Node { - const { filter } = props; - const dispatch = useDispatch(); - const users = useSelector(getUsers); - const presences = useSelector(getPresence); - - const navigation = useNavigation(); - const handleUserNarrow = useCallback( - (user: UserOrBot) => { - navigation.dispatch(navigateBack()); - dispatch(doNarrow(pm1to1NarrowFromUser(user))); - }, - [dispatch, navigation], - ); - - return ( - - ); -} diff --git a/src/users/UsersScreen.js b/src/users/UsersScreen.js index 3ad120bb7b6..74a5b816338 100644 --- a/src/users/UsersScreen.js +++ b/src/users/UsersScreen.js @@ -1,11 +1,17 @@ /* @flow strict-local */ -import React, { useState } 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 UsersCard from './UsersCard'; +import UserList from './UserList'; +import type { UserOrBot } from '../types'; +import { useSelector, useDispatch } from '../react-redux'; +import { pm1to1NarrowFromUser } from '../utils/narrow'; +import { getUsers, getPresence } from '../selectors'; +import { navigateBack, doNarrow } from '../actions'; +import { useNavigation } from '../react-navigation'; type Props = $ReadOnly<{| navigation: AppNavigationProp<'users'>, @@ -13,11 +19,24 @@ type Props = $ReadOnly<{| |}>; export default function UsersScreen(props: Props): Node { + const dispatch = useDispatch(); + const users = useSelector(getUsers); + const presences = useSelector(getPresence); + + const navigation = useNavigation(); + const handleUserNarrow = useCallback( + (user: UserOrBot) => { + navigation.dispatch(navigateBack()); + dispatch(doNarrow(pm1to1NarrowFromUser(user))); + }, + [dispatch, navigation], + ); + const [filter, setFilter] = useState(''); return ( - + ); } From 15373b11f4ec99b5de1dc26c16f0f9db7f2780c1 Mon Sep 17 00:00:00 2001 From: Greg Price Date: Mon, 7 Nov 2022 13:31:23 -0800 Subject: [PATCH 2/4] user [nfc]: Rename NewGroupPmScreen from CreateGroupScreen The old name was highly misleading about what this does. Not to mention the directory it was in -- Zulip user groups are completely unrelated to group-PM threads, which is what this screen is actually about. --- src/nav/AppNavigator.js | 6 +++--- src/pm-conversations/PmConversationsScreen.js | 2 +- .../NewGroupPmScreen.js} | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) rename src/{user-groups/CreateGroupScreen.js => user-picker/NewGroupPmScreen.js} (76%) diff --git a/src/nav/AppNavigator.js b/src/nav/AppNavigator.js index ed116bdb5f7..bcbedfc6081 100644 --- a/src/nav/AppNavigator.js +++ b/src/nav/AppNavigator.js @@ -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'; @@ -73,7 +73,7 @@ export type AppNavigatorParamList = {| +users: RouteParamsOf, +language: RouteParamsOf, +lightbox: RouteParamsOf, - +'create-group': RouteParamsOf, + +'new-group-pm': RouteParamsOf, +'invite-users': RouteParamsOf, +diagnostics: RouteParamsOf, +variables: RouteParamsOf, @@ -181,7 +181,7 @@ export default function AppNavigator(props: Props): Node { - + diff --git a/src/pm-conversations/PmConversationsScreen.js b/src/pm-conversations/PmConversationsScreen.js index 79a93a37ed6..a84201d492a 100644 --- a/src/pm-conversations/PmConversationsScreen.js +++ b/src/pm-conversations/PmConversationsScreen.js @@ -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')); }} /> diff --git a/src/user-groups/CreateGroupScreen.js b/src/user-picker/NewGroupPmScreen.js similarity index 76% rename from src/user-groups/CreateGroupScreen.js rename to src/user-picker/NewGroupPmScreen.js index 1cf0e92ce85..a00a900163a 100644 --- a/src/user-groups/CreateGroupScreen.js +++ b/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(''); - const handleCreateGroup = useCallback( + const handlePickerComplete = useCallback( (selected: $ReadOnlyArray) => { navigation.dispatch(navigateBack()); dispatch(doNarrow(pmNarrowFromRecipients(pmKeyRecipientsFromUsers(selected, ownUserId)))); @@ -35,7 +35,7 @@ export default function CreateGroupScreen(props: Props): Node { return ( - + ); } From b84f9ee0956e970ed708295b7e84760203ea25f0 Mon Sep 17 00:00:00 2001 From: Greg Price Date: Mon, 7 Nov 2022 14:04:49 -0800 Subject: [PATCH 3/4] user [nfc]: Rename New1to1PmScreen from UsersScreen There are lots of screens in the app that show users, or even all users. This screen in reality has a very specific role. Name it accordingly. Also move it next to the parallel NewGroupPmScreen component. --- src/nav/AppNavigator.js | 6 +++--- src/pm-conversations/PmConversationsScreen.js | 2 +- .../UsersScreen.js => user-picker/New1to1PmScreen.js} | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) rename src/{users/UsersScreen.js => user-picker/New1to1PmScreen.js} (86%) diff --git a/src/nav/AppNavigator.js b/src/nav/AppNavigator.js index bcbedfc6081..dd20b4e270b 100644 --- a/src/nav/AppNavigator.js +++ b/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'; @@ -70,7 +70,7 @@ export type AppNavigatorParamList = {| +'password-auth': RouteParamsOf, +'realm-input': RouteParamsOf, +'search-messages': RouteParamsOf, - +users: RouteParamsOf, + +'new-1to1-pm': RouteParamsOf, +language: RouteParamsOf, +lightbox: RouteParamsOf, +'new-group-pm': RouteParamsOf, @@ -178,7 +178,7 @@ export default function AppNavigator(props: Props): Node { name="search-messages" component={useHaveServerDataGate(SearchMessagesScreen)} /> - + diff --git a/src/pm-conversations/PmConversationsScreen.js b/src/pm-conversations/PmConversationsScreen.js index a84201d492a..ca89c48c778 100644 --- a/src/pm-conversations/PmConversationsScreen.js +++ b/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')); }} /> , - route: RouteProp<'users', void>, + navigation: AppNavigationProp<'new-1to1-pm'>, + route: RouteProp<'new-1to1-pm', void>, |}>; -export default function UsersScreen(props: Props): Node { +export default function New1to1PmScreen(props: Props): Node { const dispatch = useDispatch(); const users = useSelector(getUsers); const presences = useSelector(getPresence); From b8e24c19bf2d40f1a28776c8c08a9b6691639527 Mon Sep 17 00:00:00 2001 From: Greg Price Date: Mon, 7 Nov 2022 14:12:30 -0800 Subject: [PATCH 4/4] user [nfc]: Have UserList get presence data, not callers --- src/user-picker/New1to1PmScreen.js | 5 ++--- src/user-picker/UserPickerCard.js | 4 +--- src/users/UserList.js | 8 +++++--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/user-picker/New1to1PmScreen.js b/src/user-picker/New1to1PmScreen.js index 06f9f68cf6f..7eec8e35852 100644 --- a/src/user-picker/New1to1PmScreen.js +++ b/src/user-picker/New1to1PmScreen.js @@ -9,7 +9,7 @@ import UserList from '../users/UserList'; import type { UserOrBot } from '../types'; import { useSelector, useDispatch } from '../react-redux'; import { pm1to1NarrowFromUser } from '../utils/narrow'; -import { getUsers, getPresence } from '../selectors'; +import { getUsers } from '../selectors'; import { navigateBack, doNarrow } from '../actions'; import { useNavigation } from '../react-navigation'; @@ -21,7 +21,6 @@ type Props = $ReadOnly<{| export default function New1to1PmScreen(props: Props): Node { const dispatch = useDispatch(); const users = useSelector(getUsers); - const presences = useSelector(getPresence); const navigation = useNavigation(); const handleUserNarrow = useCallback( @@ -36,7 +35,7 @@ export default function New1to1PmScreen(props: Props): Node { return ( - + ); } diff --git a/src/user-picker/UserPickerCard.js b/src/user-picker/UserPickerCard.js index 2353aa170c8..02a55c7e0d9 100644 --- a/src/user-picker/UserPickerCard.js +++ b/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>([]); const listRef = useRef | null>(null); @@ -80,7 +79,6 @@ export default function UserPickerCard(props: Props): Node { { setSelectedState(state => { diff --git a/src/users/UserList.js b/src/users/UserList.js index 5302ae53cb0..c62d4d4e27a 100644 --- a/src/users/UserList.js +++ b/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, selected?: $ReadOnlyArray, - 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) {