Add preferred events to the frontend (#400)

Frontend/src/api/helper/context/user_context.ts

@@ -1,3 +1,4 @@
+import { EventId } from '@wca/helpers'
 import { createContext } from 'react'
 
 export interface UserFull {
@@ -28,8 +29,10 @@ export interface UserFull {
 }
 interface UserContext {
   user: UserFull | null
+  preferredEvents: EventId[] | null
 }
 
 export const UserContext = createContext<UserContext>({
   user: null,
+  preferredEvents: null,
 })

Frontend/src/api/helper/routes.ts

@@ -32,6 +32,9 @@ export const competitionContactFormRoute = (compId: string) =>
 export const pollingRoute = (userId: string, competitionId: string) =>
   `${process.env.POLL_URL}?attendee_id=${competitionId}-${userId}`
 export const meRoute = `${process.env.WCA_URL}/api/v0/users/me`
+
+export const preferredEventsRoute = `${process.env.WCA_URL}/api/v0/users/me/preferred_events`
+
 export const myBookmarkedCompetitionsRoute = `${process.env.WCA_URL}/api/v0/users/me/bookmarks`
 // This will break when urls get really big, maybe we should switch to POST?
 export const usersInfoRoute = (ids: string[]) =>

Frontend/src/api/mocks/get_preferred_events.ts

@@ -0,0 +1,26 @@
+import { EventId } from '@wca/helpers'
+
+export function getPreferredEventsMock(): EventId[] {
+  const events = [
+    '222',
+    '333',
+    '444',
+    '555',
+    '666',
+    '777',
+    '333bf',
+    '333fm',
+    '333oh',
+    'clock',
+    'minx',
+    'pyram',
+    'skewb',
+    'sq1',
+    '444bf',
+    '555bf',
+    '333mbf',
+  ]
+  const end = Math.round(Math.random() * events.length)
+  const start = Math.round(Math.random() * end)
+  return events.slice(start, end) as EventId[]
+}

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

@@ -0,0 +1,12 @@
+import { EventId } from '@wca/helpers'
+import externalServiceFetch from '../../helper/external_service_fetch'
+import { preferredEventsRoute } from '../../helper/routes'
+import { getPreferredEventsMock } from '../../mocks/get_preferred_events'
+
+export default async function getPreferredEvents(): Promise<EventId[]> {
+  if (process.env.NODE_ENV === 'production') {
+    return externalServiceFetch(preferredEventsRoute)
+  }
+  // returns a random selection of events as a mock
+  return getPreferredEventsMock()
+}

Frontend/src/pages/register/components/CompetingStep.jsx

@@ -26,13 +26,15 @@ import Processing from './Processing'
 const maxCommentLength = 240
 
 export default function CompetingStep({ nextStep }) {
-  const { user } = useContext(UserContext)
+  const { user, preferredEvents } = useContext(UserContext)
   const { competitionInfo } = useContext(CompetitionContext)
   const { registration, isRegistered, refetch } =
     useContext(RegistrationContext)
 
   const [comment, setComment] = useState('')
-  const [selectedEvents, setSelectedEvents] = useState([])
+  const [selectedEvents, setSelectedEvents] = useState(
+    preferredEvents.filter((event) => competitionInfo.event_ids.includes(event))
+  )
   const [guests, setGuests] = useState(0)
 
   const [processing, setProcessing] = useState(false)

Frontend/src/ui/providers/UserProvider.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { getJWT } from '../../api/auth/get_jwt'
 import { UserContext } from '../../api/helper/context/user_context'
 import getMe from '../../api/user/get/get_me'
+import getPreferredEvents from '../../api/user/get/get_preferred_events'
 import LoadingMessage from '../messages/loadingMessage'
 
 // The User key is just for mocks, so it can probably be moved somewhere else
@@ -20,21 +21,39 @@ export default function UserProvider({ children }) {
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
     onError: (_) => {
-      // We are not logged in, set user explicitly to undefined?
+      // We are not logged in, we set the user to undefined below
     },
     onSuccess: (_) => {
       // Get a new token so when a user switches account it overwrites the token
       getJWT(true)
     },
   })
-  return isLoading ? (
+  const {
+    isLoading: preferredEventsLoading,
+    data: preferredEvents,
+    isError: preferredEventsError,
+  } = useQuery({
+    queryKey: ['user-preferred'],
+    queryFn: () => getPreferredEvents(),
+    retry: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
+  return isLoading || preferredEventsLoading ? (
     <LoadingMessage />
   ) : // eslint-disable-next-line unicorn/no-nested-ternary
   isError ? (
-    <UserContext.Provider value={{ user: null }}>
+    <UserContext.Provider value={{ user: null, preferredEvents: null }}>
       {children}
     </UserContext.Provider>
   ) : (
-    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
+    <UserContext.Provider
+      value={{
+        user,
+        preferredEvents: preferredEventsError ? [] : preferredEvents,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
   )
 }