Teams are now refreshed properly when TeamListItems change

components/team/TeamList.tsx

@@ -24,12 +24,15 @@ export default function TeamList(props) {
   return (<div>
     <ul className="border px-2 mb-2 rounded divide-y divide-gray-200">
       {props.teams.map(
-        (team: any) => <TeamListItem key={team.id} team={team} onActionSelect={
+        (team: any) => <TeamListItem onChange={props.onChange} key={team.id} team={team} onActionSelect={
           (action: string) => selectAction(action, team)
         }></TeamListItem>
       )}
     </ul>
-    {showEditTeamModal && <EditTeamModal team={team} onExit={() => setShowEditTeamModal(false)}></EditTeamModal>}
+    {showEditTeamModal && <EditTeamModal team={team} onExit={() => {
+      props.onChange();
+      setShowEditTeamModal(false);
+    }}></EditTeamModal>}
     {showMemberInvitationModal &&
       <MemberInvitationModal
         team={team}

components/team/TeamListItem.tsx

@@ -18,6 +18,7 @@ export default function TeamListItem(props) {
   }).then( () => {
     // success
     setTeam(null);
+    props.onChange();
   });
 
   return (team && <li className="mb-2 mt-2 divide-y">

pages/settings/teams.tsx

@@ -72,14 +72,14 @@ export default function Teams(props) {
             </div>
             <div>
               {!!teams.length &&
-                <TeamList teams={teams}>
+                <TeamList teams={teams} onChange={loadTeams}>
                 </TeamList>
               }
 
               {!!invites.length && <div>
                 <h2 className="text-lg leading-6 font-medium text-gray-900">Open Invitations</h2>
                 <ul className="border px-2 rounded mt-2 mb-2 divide-y divide-gray-200">
-                  {invites.map( (team) => <TeamListItem key={team.id} team={team}></TeamListItem>)}
+                  {invites.map( (team) => <TeamListItem onChange={loadTeams} key={team.id} team={team}></TeamListItem>)}
                 </ul>
               </div>}
             </div>