Auth flow

.devcontainer.json

@@ -47,7 +47,7 @@
     "source=./codeforlife-package-python,target=/workspace/codeforlife-package-python,type=bind,consistency=cached"
   ],
   "name": "portal-frontend",
-  "postCreateCommand": "sudo chmod u+x ./setup && ./setup",
+  "postCreateCommand": "sudo chmod u+x scripts/setup && scripts/setup",
   "remoteUser": "root",
   "service": "base-service",
   "shutdownAction": "none",

.env

@@ -1 +1,2 @@
-VITE_API_BASE_URL=REPLACE_ME
+VITE_API_BASE_URL=http://localhost:8000/api/
+VITE_SERVICE_NAME=portal

.gcloudignore

@@ -10,7 +10,7 @@
 /codecov.yml
 /*.code-*
 /*.md
-/setup
+/scripts
 /tsconfig.json
 /tsconfig.node.json
 /vite.config.ts

.vscode/launch.json

@@ -1,8 +1,8 @@
 {
   "configurations": [
     {
-      "name": "React Dev Server",
-      "preLaunchTask": "start-react-dev-server",
+      "name": "Vite Server",
+      "preLaunchTask": "start-vite-server",
       "request": "launch",
       "type": "chrome",
       "url": "http://localhost:5173"

.vscode/tasks.json

@@ -1,16 +1,22 @@
 {
   "tasks": [
     {
+      "command": "sudo chmod u+x scripts/hard-install && scripts/hard-install",
+      "label": "hard-install",
+      "problemMatcher": [],
+      "type": "shell"
+    },
+    {
+      "command": "sudo chmod u+x scripts/run && scripts/run",
       "isBackground": true,
-      "label": "start-react-dev-server",
+      "label": "start-vite-server",
       "options": {
         "env": {
           "BROWSER": "none"
         }
       },
       "problemMatcher": [],
-      "script": "start",
-      "type": "npm"
+      "type": "shell"
     }
   ],
   "version": "2.0.0"

package.json

@@ -20,7 +20,7 @@
   },
   "//": "🚫 Don't add `dependencies` below that are inherited from the CFL package.",
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.0.0"
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.0.3"
   },
   "//": "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package.",
   "devDependencies": {

scripts/hard-install

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -e
+
+cd "${BASH_SOURCE%/*}"
+
+rm -f ../yarn.lock
+rm -rf ../node_modules
+yarn cache clean codeforlife
+yarn install --production=false

scripts/run

@@ -0,0 +1,8 @@
+#!/bin/bash
+set -e
+
+cd "${BASH_SOURCE%/*}"
+
+source ./setup
+
+yarn dev

setup → scripts/setup

@@ -3,6 +3,4 @@ set -e
 
 cd "${BASH_SOURCE%/*}"
 
-printf "Setting up Node.js environment\n\n"
-
 yarn install --production=false

src/App.tsx

@@ -1,67 +1,15 @@
-import "./App.css"
-import { Counter } from "./features/counter/Counter"
-import { Quotes } from "./features/quotes/Quotes"
-import logo from "./logo.svg"
+import { CssBaseline, ThemeProvider } from "@mui/material"
+import type { FC } from "react"
 
-const App = () => {
+import theme from "./app/theme"
+import Router from "./router"
+
+const App: FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <Quotes />
-        <span>
-          <span>Learn </span>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://redux-toolkit.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Redux Toolkit
-          </a>
-          <span>, </span>
-          <a
-            className="App-link"
-            href="https://react-redux.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            React Redux
-          </a>
-          ,<span> and </span>
-          <a
-            className="App-link"
-            href="https://reselect.js.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Reselect
-          </a>
-        </span>
-      </header>
-    </div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Router />
+    </ThemeProvider>
   )
 }
 

src/api/authFactor.ts

@@ -8,7 +8,7 @@ import {
   type DestroyResult,
   type ListArg,
   type ListResult,
-} from "codeforlife/utils/rtkQuery"
+} from "codeforlife/utils/api"
 
 import api from "."