From e405dfd8d377fff86dc49429a25ac4cdd76b79d9 Mon Sep 17 00:00:00 2001
From: David Code Howard <david@techmatters.org>
Date: Thu, 12 Oct 2023 15:44:09 -0400
Subject: [PATCH] fix: Update Project Team tab to refresh on new user

---
 dev-client/src/components/common/UserList.tsx |  6 +++---
 .../components/projects/ProjectTeamTab.tsx    | 19 ++++++-------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/dev-client/src/components/common/UserList.tsx b/dev-client/src/components/common/UserList.tsx
index 78bbf57776..811276b5dc 100644
--- a/dev-client/src/components/common/UserList.tsx
+++ b/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,7 +96,7 @@ export default function UserList({
   return (
     <FlatList
       data={memberships}
-      renderItem={({item: [_, [membership, user]]}) => (
+      renderItem={({item: [membership, user]}) => (
         <UserItem
           membership={membership}
           user={user}
@@ -104,7 +104,7 @@ export default function UserList({
           onPress={userAction(membership)}
         />
       )}
-      keyExtractor={([id, _]) => id}
+      keyExtractor={([membership, _]) => membership.id}
       ItemSeparatorComponent={Divider}
     />
   );
diff --git a/dev-client/src/components/projects/ProjectTeamTab.tsx b/dev-client/src/components/projects/ProjectTeamTab.tsx
index d9d2eca804..fd48c13724 100644
--- a/dev-client/src/components/projects/ProjectTeamTab.tsx
+++ b/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} 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,13 +33,9 @@ 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],
+    [dispatch, route.params.projectId],
   );
 
   return (
@@ -57,7 +50,7 @@ export default function ProjectTeamTab({route}: Props) {
         }}
       />
       <UserList
-        memberships={Object.entries(members)}
+        memberships={members}
         currentUserId={currentUser.data?.id}
         userAction={removeMembership}
       />