Use Bulk Routes to get User Info for Registration Lists

Frontend/src/api/registration/get/get_registrations.ts

@@ -3,7 +3,7 @@ import { getJWT } from '../../auth/get_jwt'
 import backendFetch, { BackendError } from '../../helper/backend_fetch'
 import { EXPIRED_TOKEN } from '../../helper/error_codes'
 import { components, paths } from '../../schema'
-import getCompetitorInfo from '../../user/get/get_user_info'
+import { getCompetitorsInfo } from '../../user/get/get_user_info'
 
 const { GET } = createClient<paths>({
   // TODO: Change this once we are fully migrated from backend fetch
@@ -22,19 +22,16 @@ export async function getConfirmedRegistrations(
       params: { path: { competition_id: competitionID } },
     }
   )
-  const regList = []
   if (!response.ok) {
     throw new BackendError(500, response.status)
   }
-  for (const registration of data!) {
-    const user = (await getCompetitorInfo(registration.user_id)).user
-    regList.push({
-      user_id: registration.user_id,
-      competing: registration.competing,
-      user,
-    })
-  }
-  return regList
+  const userInfos = await getCompetitorsInfo(data!.map((d) => d.user_id))
+  return data!.map((registration) => ({
+    ...registration,
+    user: userInfos.users.find(
+      (user) => user.id === Number(registration.user_id)
+    ),
+  }))
 }
 
 export async function getAllRegistrations(
@@ -48,22 +45,20 @@ export async function getAllRegistrations(
       headers: { Authorization: await getJWT() },
     }
   )
-  const regList = []
   if (error) {
     if (error.error === EXPIRED_TOKEN) {
       await getJWT(true)
       return getAllRegistrations(competitionID)
     }
     throw new BackendError(error.error, response.status)
   }
-  for (const registration of data!) {
-    const user = (await getCompetitorInfo(registration.user_id)).user
-    regList.push({
-      ...registration,
-      user,
-    })
-  }
-  return regList
+  const userInfos = await getCompetitorsInfo(data!.map((d) => d.user_id))
+  return data!.map((registration) => ({
+    ...registration,
+    user: userInfos.users.find(
+      (user) => user.id === Number(registration.user_id)
+    ),
+  }))
 }
 
 export async function getSingleRegistration(

Frontend/src/api/user/get/get_user_info.ts

@@ -1,8 +1,8 @@
 import externalServiceFetch from '../../helper/external_service_fetch'
-import { userInfoRoute } from '../../helper/routes'
+import { userInfoRoute, usersInfoRoute } from '../../helper/routes'
 
 export interface User {
-  id: string
+  id: number
   wca_id: string
   name: string
   country: {
@@ -16,8 +16,12 @@ export interface UserInfo {
   user: User
 }
 
-export default async function getCompetitorInfo(
-  userId: string
-): Promise<UserInfo> {
+export async function getCompetitorInfo(userId: string): Promise<UserInfo> {
   return externalServiceFetch(userInfoRoute(userId))
 }
+
+export async function getCompetitorsInfo(
+  userIds: string[]
+): Promise<{ users: User[] }> {
+  return externalServiceFetch(usersInfoRoute(userIds))
+}

Frontend/src/pages/registration_edit/components/RegistrationEditor.jsx

@@ -6,7 +6,7 @@ import { Button, Checkbox, Header, Segment, TextArea } from 'semantic-ui-react'
 import { CompetitionContext } from '../../../api/helper/context/competition_context'
 import { getSingleRegistration } from '../../../api/registration/get/get_registrations'
 import { updateRegistration } from '../../../api/registration/patch/update_registration'
-import getCompetitorInfo from '../../../api/user/get/get_user_info'
+import { getCompetitorInfo } from '../../../api/user/get/get_user_info'
 import { setMessage } from '../../../ui/events/messages'
 import LoadingMessage from '../../../ui/messages/loadingMessage'
 import styles from './editor.module.scss'