AccountItem [nfc]: Stop caring about account's index in state.accounts

Author: chrisbobbe

src/account/AccountItem.js

@@ -8,6 +8,8 @@ import ZulipText from '../common/ZulipText';
 import Touchable from '../common/Touchable';
 import ZulipTextIntl from '../common/ZulipTextIntl';
 import { IconDone, IconTrash } from '../common/Icons';
+import { useGlobalSelector } from '../react-redux';
+import { getIsActiveAccount } from './accountsSelectors';
 import type { AccountStatus } from './accountsSelectors';
 
 const styles = createStyleSheet({
@@ -44,26 +46,27 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  index: number,
   account: AccountStatus,
-  onSelect: (index: number) => Promise<void> | void,
-  onRemove: (index: number) => Promise<void> | void,
+  onSelect: AccountStatus => Promise<void> | void,
+  onRemove: AccountStatus => Promise<void> | void,
 |}>;
 
 export default function AccountItem(props: Props): Node {
   const { email, realm, isLoggedIn } = props.account;
 
+  const isActiveAccount = useGlobalSelector(state => getIsActiveAccount(state, { email, realm }));
+
   // Don't show the "remove account" button (the "trash" icon) for the
   // active account when it's logged in.  This prevents removing it when the
   // main app UI, relying on that account's data, may be on the nav stack.
   // See `getHaveServerData`.
-  const showDoneIcon = props.index === 0 && isLoggedIn;
+  const showDoneIcon = isActiveAccount && isLoggedIn;
 
   const backgroundItemColor = isLoggedIn ? 'hsla(177, 70%, 47%, 0.1)' : 'hsla(0,0%,50%,0.1)';
   const textColor = isLoggedIn ? BRAND_COLOR : 'gray';
 
   return (
-    <Touchable style={styles.wrapper} onPress={() => props.onSelect(props.index)}>
+    <Touchable style={styles.wrapper} onPress={() => props.onSelect(props.account)}>
       <View
         style={[
           styles.accountItem,
@@ -87,7 +90,7 @@ export default function AccountItem(props: Props): Node {
             style={styles.icon}
             size={24}
             color="crimson"
-            onPress={() => props.onRemove(props.index)}
+            onPress={() => props.onRemove(props.account)}
           />
         ) : (
           <IconDone style={styles.icon} size={24} color={BRAND_COLOR} />

src/account/AccountList.js

@@ -3,14 +3,14 @@ import React from 'react';
 import type { Node } from 'react';
 import { View, FlatList } from 'react-native';
 
-import type { AccountStatus } from './accountsSelectors';
 import ViewPlaceholder from '../common/ViewPlaceholder';
 import AccountItem from './AccountItem';
+import type { AccountStatus } from './accountsSelectors';
 
 type Props = $ReadOnly<{|
   accountStatuses: $ReadOnlyArray<AccountStatus>,
-  onAccountSelect: number => Promise<void> | void,
-  onAccountRemove: number => Promise<void> | void,
+  onAccountSelect: AccountStatus => Promise<void> | void,
+  onAccountRemove: AccountStatus => Promise<void> | void,
 |}>;
 
 export default function AccountList(props: Props): Node {
@@ -23,12 +23,7 @@ export default function AccountList(props: Props): Node {
         keyExtractor={item => `${item.email}${item.realm.toString()}`}
         ItemSeparatorComponent={() => <ViewPlaceholder height={8} />}
         renderItem={({ item, index }) => (
-          <AccountItem
-            index={index}
-            account={item}
-            onSelect={onAccountSelect}
-            onRemove={onAccountRemove}
-          />
+          <AccountItem account={item} onSelect={onAccountSelect} onRemove={onAccountRemove} />
         )}
       />
     </View>

src/account/AccountPickScreen.js

@@ -39,8 +39,8 @@ export default function AccountPickScreen(props: Props): Node {
   const _ = useContext(TranslationContext);
 
   const handleAccountSelect = useCallback(
-    async (index: number) => {
-      const { realm, email, isLoggedIn } = accountStatuses[index];
+    async accountStatus => {
+      const { realm, email, isLoggedIn } = accountStatus;
       if (isLoggedIn) {
         dispatch(accountSwitch({ realm, email }));
       } else {
@@ -62,12 +62,12 @@ export default function AccountPickScreen(props: Props): Node {
         navigation.push('auth', { serverSettings });
       }
     },
-    [accountStatuses, globalSettings, dispatch, navigation, _],
+    [globalSettings, dispatch, navigation, _],
   );
 
   const handleAccountRemove = useCallback(
-    (index: number) => {
-      const { realm, email, isLoggedIn } = accountStatuses[index];
+    accountStatus => {
+      const { realm, email, isLoggedIn } = accountStatus;
       const account = accountsByIdentity({ realm, email });
       invariant(account, 'AccountPickScreen: should have account');
 
@@ -91,7 +91,7 @@ export default function AccountPickScreen(props: Props): Node {
         _,
       });
     },
-    [accountStatuses, accountsByIdentity, _, dispatch],
+    [accountsByIdentity, _, dispatch],
   );
 
   return (