More Frontend: React Router and WCA-Component Library (#54)

Frontend/package.json

@@ -20,10 +20,14 @@
     "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
   },
   "dependencies": {
+    "@thewca/wca-components": "^0.1.1",
     "esbuild": "^0.17.19",
-    "esbuild-scss-modules-plugin": "^1.1.1",
+    "esbuild-sass-plugin": "^2.9.0",
+    "postcss": "^8.4.23",
+    "postcss-modules": "^6.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "eslint": "^8.40.0",

Frontend/src/build.js

@@ -1,18 +1,25 @@
 const esbuild = require('esbuild')
 const process = require('process')
+const { sassPlugin, postcssModules } = require('esbuild-sass-plugin')
+const statsPlugin = require('./statsplugin')
 
 esbuild
   .build({
     entryPoints: ['src/index.jsx'],
     bundle: true,
     outfile: 'dist/bundle.js',
+    metafile: true,
     jsxFactory: 'React.createElement',
     jsxFragment: 'React.Fragment',
     plugins: [
-      require('esbuild-scss-modules-plugin').ScssModulesPlugin({
-        inject: true,
-        minify: true,
+      sassPlugin({
+        filter: /\.module\.scss$/,
+        transform: postcssModules({ localsConvention: 'camelCaseOnly' }),
       }),
+      sassPlugin({
+        filter: /\.scss$/,
+      }),
+      statsPlugin(),
     ],
     define: {
       'process.env.API_URL': `"${process.env.API_URL}"`,

Frontend/src/index.jsx

@@ -1,9 +1,42 @@
+// External Styles (this is probably not the best way to load this?)
+import '@thewca/wca-components/dist/index.esm.css'
+import React from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './register/pages'
+import { createBrowserRouter, Link, RouterProvider } from 'react-router-dom'
+import Registrations from './pages/registrations'
+import Register from './pages/register'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: (
+      <div>
+        <Link to="/register"> Register </Link>
+        <Link to="/registrations"> Registrations</Link>
+      </div>
+    ),
+  },
+  {
+    path: '/register',
+    element: (
+      <div>
+        <Register />
+      </div>
+    ),
+  },
+  {
+    path: '/registrations',
+    element: (
+      <div>
+        <Registrations />
+      </div>
+    ),
+  },
+])
 
 // Clear the existing HTML content
 document.body.innerHTML = '<div id="app"></div>'
 
 // Render your React component instead
 const root = createRoot(document.querySelector('#app'))
-root.render(App())
+root.render(<RouterProvider router={router} />)

Frontend/src/register/components/RegistrationPanel.jsx → Frontend/src/pages/register/components/RegistrationPanel.jsx

@@ -1,13 +1,18 @@
+import { EventSelector } from '@thewca/wca-components'
 import React, { useState } from 'react'
-import submitEventRegistration from '../../api/registration/post/submit_registration'
-import EventSelection from './EventSelection'
+import submitEventRegistration from '../../../api/registration/post/submit_registration'
 import styles from './panel.module.scss'
 
+const EVENTS = ['222', '333', '444', '555', '666', '777']
+
 export default function RegistrationPanel() {
   const [competitorID, setCompetitorID] = useState('2012ICKL01')
-  const [competitionID, setCompetitionID] = useState('HessenOpen2023')
-  const [events, setEvents] = useState([])
+  const [competitionID, setCompetitionID] = useState('BudapestSummer2023')
+  const [selectedEvents, setSelectedEvents] = useState([])
 
+  const handleEventSelection = (selectedEvents) => {
+    setSelectedEvents(selectedEvents)
+  }
   return (
     <div className={styles.panel}>
       <label>
@@ -28,10 +33,15 @@ export default function RegistrationPanel() {
           onChange={(e) => setCompetitionID(e.target.value)}
         />
       </label>
-      <EventSelection events={events} setEvents={setEvents} />
+      <EventSelector
+        handleEventSelection={handleEventSelection}
+        events={EVENTS}
+        initialSelected={[]}
+        size={'2x'}
+      />
       <button
         onClick={(_) =>
-          submitEventRegistration(competitorID, competitionID, events)
+          submitEventRegistration(competitorID, competitionID, selectedEvents)
         }
       >
         Insert Registration

Frontend/src/register/components/panel.module.scss → Frontend/src/pages/register/components/panel.module.scss

@@ -4,8 +4,4 @@
   align-items: center;
   margin-top: 24%;
   width: 50vw;
-}
-
-.events{
-  display: flex;
 }

Frontend/src/pages/register/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import RegistrationPanel from './components/RegistrationPanel'
+import styles from './index.module.scss'
+
+export default function Register() {
+  return (
+    <div className={styles.container}>
+      <RegistrationPanel />
+      <div className={styles.link}>
+        <Link to="/registrations"> Registration List </Link>
+      </div>
+    </div>
+  )
+}

Frontend/src/pages/register/index.module.scss

@@ -0,0 +1,11 @@
+.container {
+    display: flex;
+    height: 100vh;
+    flex-direction: row;
+}
+
+.link{
+    position: absolute;
+    left: 5vw;
+    top: 5vh;
+}

Frontend/src/register/components/RegistrationList.jsx → Frontend/src/pages/registrations/components/RegistrationList.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import deleteRegistration from '../../api/registration/delete/delete_registration'
-import getRegistrations from '../../api/registration/get/get_registrations'
-import updateRegistration from '../../api/registration/patch/update_registration'
+import deleteRegistration from '../../../api/registration/delete/delete_registration'
+import getRegistrations from '../../../api/registration/get/get_registrations'
+import updateRegistration from '../../../api/registration/patch/update_registration'
+import StatusDropdown from '../../register/components/StatusDropdown'
 import styles from './list.module.scss'
-import StatusDropdown from './StatusDropdown'
 
 function RegistrationRow({
   competitorId,
@@ -49,7 +49,7 @@ function RegistrationRow({
 }
 
 export default function RegistrationList() {
-  const [competitionID, setCompetitionID] = useState('HessenOpen2023')
+  const [competitionID, setCompetitionID] = useState('BudapestSummer2023')
   const [registrationList, setRegistrationList] = useState([])
   return (
     <div className={styles.list}>

Frontend/src/pages/registrations/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import RegistrationList from './components/RegistrationList'
+import styles from './index.module.scss'
+
+export default function Registrations() {
+  return (
+    <div className={styles.container}>
+      <RegistrationList />
+      <div className={styles.link}>
+        <Link to="/register"> Register </Link>
+      </div>
+    </div>
+  )
+}

Frontend/src/register/pages/index.module.scss → Frontend/src/pages/registrations/index.module.scss

@@ -2,4 +2,9 @@
     display: flex;
     height: 100vh;
     flex-direction: row;
+}
+.link{
+    position: absolute;
+    left: 5vw;
+    top: 5vh;
 }

Frontend/src/statsplugin.js

@@ -0,0 +1,38 @@
+const path = require('path')
+
+const statsPlugin = () => ({
+  name: 'stats',
+  setup(build) {
+    build.onStart(() => {
+      // eslint-disable-next-line no-console
+      console.time('build time')
+    })
+    build.onEnd((result) => {
+      if (result.metafile) {
+        Object.entries(result.metafile.outputs).forEach(([file, { bytes }]) => {
+          const relPath = path.relative(
+            process.cwd(),
+            path.resolve(__dirname, file)
+          )
+
+          const i = Math.floor(Math.log(bytes) / Math.log(1024))
+          const humanBytes =
+            Number((bytes / 1024 ** i).toFixed(2)) +
+            ['B', 'kB', 'MB', 'GB', 'TB'][i]
+          console.info(relPath, humanBytes)
+        })
+      } else if ('errors' in result) {
+        console.info(
+          `build failed with ${result.errors.length} errors, ${result.warnings.length} warnings`
+        )
+        console.info(result)
+      } else {
+        console.error(result)
+      }
+      // eslint-disable-next-line no-console
+      console.timeEnd('build time')
+    })
+  },
+})
+
+module.exports = statsPlugin

Frontend/src/watch.mjs

@@ -1,17 +1,23 @@
 import * as esbuild from 'esbuild';
-import {ScssModulesPlugin} from "esbuild-scss-modules-plugin";
+import { sassPlugin, postcssModules } from 'esbuild-sass-plugin'
+import statsPlugin from './statsplugin.js'
 
 const context = await esbuild.context({
   entryPoints: ['src/index.jsx'],
   bundle: true,
   outfile: 'dist/bundle.js',
   jsxFactory: 'React.createElement',
   jsxFragment: 'React.Fragment',
+  metafile: true,
   plugins: [
-    ScssModulesPlugin({
-      inject: true,
-      minify: true,
+    sassPlugin({
+      filter: /\.module\.scss$/,
+      transform: postcssModules({ localsConvention: 'camelCaseOnly' }),
     }),
+    sassPlugin({
+      filter: /\.scss$/,
+    }),
+    statsPlugin(),
   ],
   define: {
     'process.env.API_URL': '"http://localhost:3001"',