Monolith Integration #1: Competition Page

Frontend/package.json

@@ -14,31 +14,37 @@
   "homepage": "https://github.com/thewca/wca-registration/Frontend/README.md",
   "scripts": {
     "build:dev": "NODE_ENV=\"development\" ASSET_PATH=\"/dist\" API_URL=\"http://localhost:3001/api/v1\" AUTH_URL=\"http://localhost:3001/jwt\" node src/build.js",
-    "build:staging": "NODE_ENV=\"production\" ASSET_PATH=\"https://d1qizdh27al0a7.cloudfront.net/staging/dist\" API_URL=\"https://staging.registration.worldcubeassociation.org/api/v1\" AUTH_URL=\"https://staging.registration.worldcubeassociation.org/jwt\" node src/build.js",
-    "build:prod": "NODE_ENV=\"production\" ASSET_PATH=\"https://d1qizdh27al0a7.cloudfront.net/dist\" API_URL=\"https://registration.worldcubeassociation.org/api/v1\" AUTH_URL=\"https://registration.worldcubeassociation.org/jwt\" node src/build.js",
+    "build:staging": "NODE_ENV=\"staging\" ASSET_PATH=\"https://d1qizdh27al0a7.cloudfront.net/staging/dist\" API_URL=\"https://staging.registration.worldcubeassociation.org/api/v1\" AUTH_URL=\"https://staging.registration.worldcubeassociation.org/jwt\" node src/build.js",
+    "build:prod": "NODE_ENV=\"production\" ASSET_PATH=\"https://d1qizdh27al0a7.cloudfront.net/dist\" API_URL=\"https://registration.worldcubeassociation.org/api/v1\" AUTH_URL=\"https://test-registration.worldcubeassociation.org/api/v10/auth/jwt\" node src/build.js",
     "watch": "node src/watch.mjs",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
   },
   "dependencies": {
+    "@dinero.js/currencies": "^2.0.0-alpha.14",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-query-devtools": "^4.29.19",
     "@thewca/wca-components": "0.5.0",
     "@wca/helpers": "^1.1.4",
+    "dinero.js": "^2.0.0-alpha.14",
     "esbuild": "^0.18.6",
     "esbuild-sass-plugin": "^2.10.0",
     "events": "^3.3.0",
     "fomantic-ui-css": "^2.9.2",
+    "marked": "^5.1.1",
+    "moment": "^2.29.4",
     "postcss": "^8.4.23",
     "postcss-modules": "^6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
-    "semantic-ui-react": "^2.1.4"
+    "semantic-ui-react": "^2.1.4",
+    "sync-fetch": "^0.5.2"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^4.29.9",
     "@types/node": "^20.2.5",
+    "@types/sync-fetch": "^0.4.0",
     "eslint": "^8.40.0",
     "eslint-kit": "^9.3.0",
     "prettier": "^2.8.8"

Frontend/src/api/auth/get_permissions.ts

@@ -1,111 +1,32 @@
-// This function simulates a call to the user permissions route on the monolith.
-// This will return your own permissions, not someone else, the argument is
-// just here for the mock
-import { USER_IS_BANNED, USER_PROFILE_INCOMPLETE } from '../helper/error_codes'
+import externalServiceFetch from '../helper/external_service_fetch'
+import getPermissionsMock from '../mocks/get_permissions'
 
-function getPermissions(userId: string) {
-  switch (userId) {
-    case '1':
-      return {
-        can_attend_competitions: {
-          scope: '*',
-        },
-        can_organize_competitions: {
-          scope: ['BudapestSummer2023'],
-        },
-        can_administer_competitions: {
-          scope: ['BudapestSummer2023'],
-        },
-      }
-    case '2':
-      return {
-        can_attend_competitions: {
-          scope: '*',
-        },
-        can_organize_competitions: {
-          scope: [],
-        },
-        can_administer_competitions: {
-          scope: [],
-        },
-      }
-    case '6427':
-      return {
-        can_attend_competitions: {
-          scope: '*',
-        },
-        can_organize_competitions: {
-          scope: [],
-        },
-        can_administer_competitions: {
-          scope: [],
-        },
-      }
-    case '15073':
-      return {
-        can_attend_competitions: {
-          scope: '*',
-        },
-        can_organize_competitions: {
-          scope: '*',
-        },
-        can_administer_competitions: {
-          scope: '*',
-        },
-      }
-    case '209943':
-      return {
-        can_attend_competitions: {
-          scope: [],
-          reasons: USER_IS_BANNED,
-        },
-        can_organize_competitions: {
-          scope: [],
-        },
-        can_administer_competitions: {
-          scope: [],
-        },
-      }
-    case '999999':
-      return {
-        can_attend_competitions: {
-          scope: [],
-          reasons: USER_PROFILE_INCOMPLETE,
-        },
-        can_organize_competitions: {
-          scope: [],
-        },
-        can_administer_competitions: {
-          scope: [],
-        },
-      }
-    default:
-      return {
-        can_attend_competitions: {
-          scope: [],
-        },
-        can_organize_competitions: {
-          scope: [],
-        },
-        can_administer_competitions: {
-          scope: [],
-        },
-      }
+interface Permissions {
+  can_attend_competitions: { scope: Scope }
+  can_organize_competitions: { scope: Scope }
+  can_administer_competitions: { scope: Scope }
+}
+type Scope = '*' | string[]
+
+function getPermissions() {
+  if (process.env.NODE_ENV === 'production') {
+    return externalServiceFetch(
+      'https://test-registration.worldcubeassociation.org/api/v10/users/me/permissions'
+    ) as Permissions
   }
+  return getPermissionsMock()
 }
 
-export function canAdminCompetition(userId: string, competitionId: string) {
-  const permissions = getPermissions(userId)
+export function canAdminCompetition(competitionId: string) {
+  const permissions = getPermissions()
   return (
     permissions.can_administer_competitions.scope === '*' ||
-    (permissions.can_administer_competitions.scope as string[]).includes(
-      competitionId
-    )
+    permissions.can_administer_competitions.scope.includes(competitionId)
   )
 }
 
-export function canAttendCompetitions(userId: string) {
-  const permissions = getPermissions(userId)
+export function canAttendCompetitions() {
+  const permissions = getPermissions()
   return permissions.can_attend_competitions.scope === '*'
 }
 

Frontend/src/api/competition/get/get_competition_info.ts

@@ -5,6 +5,6 @@ export default async function getCompetitionInfo(
   competitionId: string
 ): Promise<CompetitionInfo> {
   return externalServiceFetch(
-    `https://www.worldcubeassociation.org/api/v0/competitions/${competitionId}`
+    `https://test-registration.worldcubeassociation.org/api/v10/competitions/${competitionId}`
   )
 }

Frontend/src/api/helper/external_service_fetch.ts

@@ -1,8 +1,9 @@
+import fetch from 'sync-fetch'
 import { BackendError } from './backend_fetch'
 
-export default async function externalServiceFetch(route: string) {
-  const response = await fetch(route)
-  const body = await response.json()
+export default function externalServiceFetch(route: string) {
+  const response = fetch(route)
+  const body = response.json()
   if (response.ok) {
     return body
   }

Frontend/src/api/mocks/get_permissions.ts

@@ -0,0 +1,94 @@
+import { USER_KEY } from '../../ui/App'
+import { USER_IS_BANNED, USER_PROFILE_INCOMPLETE } from '../helper/error_codes'
+
+export default function getPermissionsMock() {
+  const userId = localStorage.getItem(USER_KEY)
+  switch (userId) {
+    case '1':
+      return {
+        can_attend_competitions: {
+          scope: '*',
+        },
+        can_organize_competitions: {
+          scope: ['BudapestSummer2023'],
+        },
+        can_administer_competitions: {
+          scope: ['BudapestSummer2023'],
+        },
+      }
+    case '2':
+      return {
+        can_attend_competitions: {
+          scope: '*',
+        },
+        can_organize_competitions: {
+          scope: [],
+        },
+        can_administer_competitions: {
+          scope: [],
+        },
+      }
+    case '6427':
+      return {
+        can_attend_competitions: {
+          scope: '*',
+        },
+        can_organize_competitions: {
+          scope: [],
+        },
+        can_administer_competitions: {
+          scope: [],
+        },
+      }
+    case '15073':
+      return {
+        can_attend_competitions: {
+          scope: '*',
+        },
+        can_organize_competitions: {
+          scope: '*',
+        },
+        can_administer_competitions: {
+          scope: '*',
+        },
+      }
+    case '209943':
+      return {
+        can_attend_competitions: {
+          scope: [],
+          reasons: USER_IS_BANNED,
+        },
+        can_organize_competitions: {
+          scope: [],
+        },
+        can_administer_competitions: {
+          scope: [],
+        },
+      }
+    case '999999':
+      return {
+        can_attend_competitions: {
+          scope: [],
+          reasons: USER_PROFILE_INCOMPLETE,
+        },
+        can_organize_competitions: {
+          scope: [],
+        },
+        can_administer_competitions: {
+          scope: [],
+        },
+      }
+    default:
+      return {
+        can_attend_competitions: {
+          scope: [],
+        },
+        can_organize_competitions: {
+          scope: [],
+        },
+        can_administer_competitions: {
+          scope: [],
+        },
+      }
+  }
+}

Frontend/src/api/types.d.ts

@@ -18,31 +18,53 @@ interface UpdateRegistrationBody {
   guests?: number
 }
 
-type GetRegistrationBody = Record<string, never>
+interface Tabs {
+  id: number
+  competition_id: string
+  name: string
+  content: string
+  display_order: number
+}
 
 // This needs to be moved to WCA-helpers
 interface CompetitionInfo {
-  id: string
-  name: string
-  registration_open: string
-  registration_close: string
-  announced_at: string
-  start_date: string
-  end_date: string
-  competitor_limit?: number
-  cancelled_at?: string
-  url: string
-  website: string
-  short_name: string
-  city: string
-  venue_address: string
-  venue_details: string
-  latitude_degrees: number
-  longitude_degrees: number
-  country_iso2: string
-  event_ids: EventId[]
+  'id': string
+  'name': string
+  'registration_open': string
+  'registration_close': string
+  'announced_at': string
+  'start_date': string
+  'end_date': string
+  'competitor_limit'?: number
+  'cancelled_at'?: string
+  'refund_policy_limit_date'?: string
+  'event_change_deadline_date'?: string
+  'waiting_list_deadline_date'?: string
+  'base_entry_fee_lowest_denomination'?: string
+  'currency_code'?: string
+  'on_the_spot_registration': boolean
+  'on_the_spot_entry_fee_lowest_denomination': string
+  'extra_registration_requirements': string
+  'url': string
+  'website': string
+  'short_name': string
+  'city': string
+  'venue_address': string
+  'venue_details': string
+  'latitude_degrees': number
+  'longitude_degrees': number
+  'country_iso2': string
+  'registration_opened?': boolean
+  'event_ids': EventId[]
+  'main_event_id': EventId
+  'guests_per_registration_limit'?: number
+  'guest_entry_status': 'free' | 'restricted' | 'unclear'
+  'allow_registration_edits': boolean
+  'allow_registration_without_qualification': boolean
+  'allow_registration_self_delete_after_acceptance': boolean
   // TODO: create a User Type
-  delegates: object[]
-  organizers: object[]
-  class: string
+  'delegates': object[]
+  'organizers': object[]
+  'tabs': Tabs[]
+  'class': string
 }

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

@@ -19,6 +19,6 @@ export default async function getCompetitorInfo(
   userId: string
 ): Promise<UserInfo> {
   return externalServiceFetch(
-    `https://www.worldcubeassociation.org/api/v0/users/${userId}`
+    `https://api.worldcubeassociation.org/users/${userId}`
   )
 }

Frontend/src/build.js

@@ -5,7 +5,11 @@ const statsPlugin = require('./statsplugin')
 
 esbuild
   .build({
-    entryPoints: ['src/index.jsx'],
+    entryPoints: [
+      process.env.NODE_ENV === 'production'
+        ? 'src/index.jsx'
+        : 'src/index.dev.jsx',
+    ],
     bundle: true,
     outfile: 'dist/bundle.js',
     metafile: true,