fix: Update Project Team tab to refresh on new user

dev-client/src/components/common/UserList.tsx

@@ -16,7 +16,7 @@ import {useMemo} from 'react';
 import {ProjectMembership} from 'terraso-client-shared/project/projectSlice';
 
 type ListProps = {
-  memberships: [string, [ProjectMembership, User]][];
+  memberships: [ProjectMembership, User][];
   currentUserId?: string;
   userAction: (membership: ProjectMembership) => () => void;
 };
@@ -96,15 +96,15 @@ export default function UserList({
   return (
     <FlatList
       data={memberships}
-      renderItem={({item: [_, [membership, user]]}) => (
+      renderItem={({item: [membership, user]}) => (
         <UserItem
           membership={membership}
           user={user}
           currentUserId={currentUserId}
           onPress={userAction(membership)}
         />
       )}
-      keyExtractor={([id, _]) => id}
+      keyExtractor={([membership, _]) => membership.id}
       ItemSeparatorComponent={Divider}
     />
   );

dev-client/src/components/projects/ProjectTeamTab.tsx

@@ -4,13 +4,13 @@ import UserList from '../common/UserList';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {TabRoutes, TabStackParamList} from './constants';
 import {useDispatch, useSelector} from '../../model/store';
-import {useCallback, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 import {
   ProjectMembership,
   removeMembershipFromProject,
 } from 'terraso-client-shared/project/projectSlice';
+import {selectProjectMembershipsWithUsers} from 'terraso-client-shared/selectors';
 import {useTranslation} from 'react-i18next';
-import {User} from 'terraso-client-shared/account/accountSlice';
 import {useNavigation} from '../../screens/AppScaffold';
 
 type Props = NativeStackScreenProps<TabStackParamList, TabRoutes.TEAM>;
@@ -20,11 +20,8 @@ export default function ProjectTeamTab({route}: Props) {
   const dispatch = useDispatch();
   const navigation = useNavigation();
   const currentUser = useSelector(state => state.account.currentUser);
-  let [members, setMembers] = useState(
-    route.params.memberships.reduce(
-      (x, y) => ({...x, [y[0].id]: y}),
-      {} as Record<string, [ProjectMembership, User]>,
-    ),
+  const members = useSelector(state =>
+    selectProjectMembershipsWithUsers(state, route.params.projectId),
   );
 
   const removeMembership = useCallback(
@@ -36,10 +33,6 @@ export default function ProjectTeamTab({route}: Props) {
             projectId: route.params.projectId,
           }),
         );
-        // TODO: This is just to get the project to update
-        let newMembers = {...members};
-        delete newMembers[membership.id];
-        setMembers(newMembers);
       };
     },
     [dispatch, members, route.params.projectId],
@@ -57,7 +50,7 @@ export default function ProjectTeamTab({route}: Props) {
         }}
       />
       <UserList
-        memberships={Object.entries(members)}
+        memberships={members}
         currentUserId={currentUser.data?.id}
         userAction={removeMembership}
       />