Update osm-teams API requests

Author: willemarcel

frontend/src/components/teamsAndOrgs/teamSync.js

@@ -11,7 +11,12 @@ import { Button, CustomButton } from '../button';
 import { ExternalLinkIcon, UserGroupIcon } from '../svgIcons';
 import { useDebouncedCallback } from '../../hooks/UseThrottle';
 import { createOSMTeamsLoginWindow } from '../../utils/login';
-import { useOSMTeamInfo, useOSMTeams, useOSMTeamUsers } from '../../hooks/UseOSMTeams';
+import {
+  useOSMTeamInfo,
+  useOSMTeamModerators,
+  useOSMTeams,
+  useOSMTeamUsers
+} from '../../hooks/UseOSMTeams';
 import { UserAvatar } from '../user/avatar';
 import { OSM_TEAMS_API_URL } from '../../config';
 import { fetchExternalJSONAPI } from '../../network/genericJSONRequest';
@@ -27,14 +32,21 @@ const OSMTeamsLink = () =>
 
 const reSyncUsers = ({ tmTeamId, members, managers, osmTeamsId, osmteams_token, token, forceUpdate, setErrors }) => {
   setErrors(false);
-  fetchExternalJSONAPI(
-    new URL(`/api/teams/${osmTeamsId}/members`, OSM_TEAMS_API_URL),
-    `Bearer ${osmteams_token}`,
-    'GET',
-  ).then((osmTeamsUsers) => {
+  Promise.all([
+    fetchExternalJSONAPI(
+      new URL(`/api/teams/${osmTeamsId}/members`, OSM_TEAMS_API_URL),
+      `Bearer ${osmteams_token}`,
+      'GET',
+    ),
+    fetchExternalJSONAPI(
+      new URL(`/api/teams/${osmTeamsId}/moderators`, OSM_TEAMS_API_URL),
+      `Bearer ${osmteams_token}`,
+      'GET',
+    )
+  ]).then(([ osmTeamsUsers, osmTeamsModerators ]) => {
     const { members: osmTeamsMembers, managers: osmTeamsManagers } = filterOSMTeamsMembers(
-      osmTeamsUsers.members,
-      osmTeamsUsers.moderators
+      osmTeamsUsers.members.data,
+      osmTeamsModerators
     );
     const { usersAdded, usersRemoved } = getMembersDiff(
       members,
@@ -212,7 +224,6 @@ const TeamBasicInfo = ({ teamId }) => {
 const TeamInfo = ({members, managers, teamId, isLoadingMembers}) => {
   const intl = useIntl();
   const [error, isLoading, team] = useOSMTeamInfo(teamId);
-  const {members: filteredMembers, managers: filteredManagers} = filterOSMTeamsMembers(members, managers);
   if (error) return <div><FormattedMessage {...messages.osmTeamInfoError} /></div>;
 
   return (
@@ -242,7 +253,7 @@ const TeamInfo = ({members, managers, teamId, isLoadingMembers}) => {
           <p><i>{team.bio}</i></p>
           <h5 className='mb1'><FormattedMessage {...messages.managers} /></h5>
           <div>
-            {filteredManagers.map((user) => (
+            {managers.map((user) => (
               <UserAvatar
                 key={user.id}
                 username={user.name}
@@ -254,7 +265,7 @@ const TeamInfo = ({members, managers, teamId, isLoadingMembers}) => {
           </div>
           <h5 className='mb1'><FormattedMessage {...messages.members} /></h5>
           <div>
-            {filteredMembers.map((user) => (
+            {members.map((user) => (
               <UserAvatar
                 key={user.id}
                 username={user.name}
@@ -275,16 +286,19 @@ export const SelectOSMTeamsModal = ({ osmTeamsId, setOsmTeamsId, setManagers, se
   const [error, isLoading, myTeams] = useOSMTeams();
   const [selectedTeamId, setSelectedTeamId] = useState();
   const [syncStatus, setSyncStatus] = useState();
-  const [teamError, teamIsLoading, teamUsers] = useOSMTeamUsers(osmTeamsId || selectedTeamId);
+  const [teamMembersError, teamMembersIsLoading, teamMembers] = useOSMTeamUsers(osmTeamsId || selectedTeamId);
+  const [teamModeratorsError, teamModeratorsIsLoading, teamModerators] = useOSMTeamModerators(
+    osmTeamsId || selectedTeamId
+  );
+  const { members, managers } = filterOSMTeamsMembers(
+    teamMembers?.members?.data || [],
+    teamModerators?.length ? teamModerators : []
+  );
 
   const syncToExistingTeam = () => {
     setSyncStatus('started');
     updateTeam(selectedTeamId);
     setSyncStatus('waiting');
-    const { members, managers } = filterOSMTeamsMembers(
-      teamUsers.members,
-      teamUsers.moderators
-    );
     const errors = [];
     managers.map((user) =>
       joinTeamRequest(tmTeamId, user.name, 'MANAGER', token)
@@ -301,15 +315,8 @@ export const SelectOSMTeamsModal = ({ osmTeamsId, setOsmTeamsId, setManagers, se
   const syncToNewTeam = () => {
     setSyncStatus('started');
     setOsmTeamsId(selectedTeamId);
-    const managersIds = teamUsers.moderators.map((user) => user.osm_id);
-    const managers = teamUsers.members
-      .filter((user) => managersIds.includes(user.id))
-      .map((user) => ({ username: user.name, pictureUrl: user.image }));
-    setManagers(managers);
-    const members = teamUsers.members
-      .filter((user) => !managersIds.includes(user.id))
-      .map((user) => ({ username: user.name, pictureUrl: user.image }));
-    setMembers(members);
+    setManagers(managers.map((user) => ({ username: user.name })));
+    setMembers(members.map((user) => ({ username: user.name })));
     setSyncStatus('finished');
   }
 
@@ -328,12 +335,14 @@ export const SelectOSMTeamsModal = ({ osmTeamsId, setOsmTeamsId, setManagers, se
               ? (
                 <div>
                   <TeamInfo
-                    members={teamUsers?.members || []}
-                    managers={teamUsers?.moderators || []}
+                    members={members || []}
+                    managers={managers || []}
                     teamId={osmTeamsId || selectedTeamId}
-                    isLoadingMembers={teamIsLoading}
+                    isLoadingMembers={teamMembersIsLoading || teamModeratorsIsLoading}
                   />
-                  {teamError && <FormattedMessage {...messages.osmTeamInfoError} />}
+                  {(teamMembersError || teamModeratorsError) &&
+                    <FormattedMessage {...messages.osmTeamInfoError} />
+                  }
                 </div>
               ) : (
                 <>

frontend/src/hooks/UseOSMTeams.js

@@ -43,6 +43,12 @@ export const useOSMTeamUsers = (teamId) => {
   return useFetchExternal(myTeamsURL.href, Boolean(teamId), `Bearer ${osmTeamsToken}`);
 };
 
+export const useOSMTeamModerators = (teamId) => {
+  const osmTeamsToken = useSelector((state) => state.auth.osmteams_token);
+  const myTeamsURL = new URL(`/api/teams/${teamId}/moderators`, OSM_TEAMS_API_URL);
+  return useFetchExternal(myTeamsURL.href, Boolean(teamId), `Bearer ${osmTeamsToken}`);
+};
+
 export const useOSMTeamInfo = (teamId) => {
   const osmTeamsToken = useSelector((state) => state.auth.osmteams_token);
   const myTeamsURL = new URL(`/api/teams/${teamId}`, OSM_TEAMS_API_URL);