codeforlife 2.6.1

package/CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing
+
+Find our contribution agreement [here](https://github.com/ocadotechnology/codeforlife-workspace/blob/main/CONTRIBUTING.md).

package/LICENSE.md

@@ -0,0 +1,3 @@
+# License
+
+Find our license [here](https://github.com/ocadotechnology/codeforlife-workspace/blob/main/LICENSE.md).

package/README.md

@@ -0,0 +1,94 @@
+# codeforlife-package-javascript
+
+This repo hosts Code for Life's Node.js package. This package contains all
+reusable frontend code, meant to be installed across CFL's various frontend
+services.
+
+## LICENCE
+In accordance with the [Terms of Use](https://www.codeforlife.education/terms#terms)
+of the Code for Life website, all copyright, trademarks, and other
+intellectual property rights in and relating to Code for Life (including all
+content of the Code for Life website, the Rapid Router application, the
+Kurono application, related software (including any drawn and/or animated
+avatars, whether or not such avatars have any modifications) and any other
+games, applications or any other content that we make available from time to
+time) are owned by Ocado Innovation Limited.
+
+The source code of the Code for Life portal, the Rapid Router application
+and the Kurono/aimmo application are [licensed under the GNU Affero General
+Public License](https://github.com/ocadotechnology/codeforlife-workspace/blob/main/LICENSE.md).
+All other assets including images, logos, sounds etc., are not covered by
+this licence and no-one may copy, modify, distribute, show in public or
+create any derivative work from these assets.
+
+## Installation
+
+To install this package, do one of the following options.
+
+*Remember to replace the version number ("0.0.0") with your
+[desired version](https://github.com/ocadotechnology/codeforlife-package-javascript/releases).*
+
+**Option 1:** Run `yarn install` command:
+
+```bash
+yarn install git+https://github.com/ocadotechnology/codeforlife-package-javascript.git#v0.0.0
+```
+
+**Option 2:** add the following to `package.json`:
+
+```json
+{
+  "dependencies": {
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v0.0.0"
+  }
+}
+```
+
+## Making Changes
+
+To make changes, you must:
+
+1. Branch off of main.
+1. Push your changes on your branch.
+1. Ensure the pipeline runs successfully on your branch.
+1. Have your changes reviewed and approved by a peer.
+1. Merge your branch into the `main` branch.
+1. [Manually trigger](https://github.com/ocadotechnology/codeforlife-package-javascript/actions/workflows/main.yml)
+the `Main` pipeline for the `main` branch.
+
+### Installing your branch
+
+You may wish to install and integrate your changes into a CFL frontend before
+it's been peer-reviewed.
+
+*Remember to replace the branch name ("my-branch") with your
+[branch](https://github.com/ocadotechnology/codeforlife-package-javascript/branches)*.
+
+```json
+{
+  "dependencies": {
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#my-branch"
+  }
+}
+```
+
+## Pipeline
+
+When pushing to any branch, the pipeline will:
+
+1. Check the code for linting errors.
+1. Run tests on the React components.
+1. Build the package.
+1. Save the build to the `lib` directory.
+
+When merging to the `main` branch, the pipeline will:
+
+1. Update the package version in
+[package.json](https://github.com/ocadotechnology/codeforlife-package-javascript/blob/main/package.json).
+1. Update
+[CHANGELOG.md](https://github.com/ocadotechnology/codeforlife-package-javascript/blob/main/CHANGELOG.md)
+with latest commit messages.
+1. Determine the next version number from the commit messages using
+[semantic versioning](https://semver.org/).
+1. Release a new version
+[on GitHub](https://github.com/ocadotechnology/codeforlife-package-javascript/releases).

package/codecov.yml

@@ -0,0 +1,11 @@
+coverage: # https://docs.codecov.com/docs/codecov-yaml
+  precision: 2
+  round: down
+  range: 90...90
+  status: # https://docs.codecov.com/docs/commit-status
+    project:
+      default:
+        target: 90%
+        threshold: 0%
+
+comment: false

package/package.json

@@ -0,0 +1,139 @@
+{
+  "//": [
+    "Based off of:",
+    "https://github.com/vitejs/vite/blob/main/packages/create-vite/template-react-ts/package.json",
+    "Dependency rules:",
+    "`peerDependencies` should contain everything required to build and test a",
+    "service's front end.",
+    "TODO: make devDependencies the same as peerDependencies"
+  ],
+  "name": "codeforlife",
+  "description": "Common frontend code",
+  "private": false,
+  "version": "2.6.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "start": "serve -s dist",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:verbose": "vitest run --reporter=verbose --coverage.thresholds.lines=90 --coverage.thresholds.functions=90 --coverage.thresholds.branches=90 --coverage.thresholds.statements=90",
+    "test:ui": "vitest --ui",
+    "format": "prettier --write .",
+    "format:check": "prettier --check --write=false .",
+    "lint": "eslint --max-warnings=0 .",
+    "lint:fix": "eslint --fix .",
+    "type-check": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ocadotechnology/codeforlife-package-javascript.git"
+  },
+  "author": "Ocado",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ocadotechnology/codeforlife-package-javascript/issues"
+  },
+  "homepage": "https://github.com/ocadotechnology/codeforlife-package-javascript#readme",
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
+    "@mui/x-date-pickers": "^7.7.1",
+    "@reduxjs/toolkit": "^2.0.1",
+    "compression": "^1.7.5",
+    "dayjs": "^1.11.11",
+    "express": "^4.21.2",
+    "formik": "^2.2.9",
+    "js-cookie": "^3.0.5",
+    "memory-cache": "^0.2.0",
+    "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.23.1",
+    "serve": "^14.2.3",
+    "sirv": "^3.0.0",
+    "yup": "^1.1.1"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/express": "^5.0.0",
+    "@types/js-cookie": "^3.0.3",
+    "@types/node": "^20.14.2",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jsdom": "^23.2.0",
+    "prettier": "^3.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
+  },
+  "peerDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/express": "^5.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/js-cookie": "^3.0.3",
+    "@types/node": "^20.14.2",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "jsdom": "^23.2.0",
+    "prettier": "^3.2.1",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.1.0",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json",
+            "CHANGELOG.md"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  }
+}

package/src/api/createApi.ts

@@ -0,0 +1,84 @@
+import {
+  createApi as _createApi,
+  fetchBaseQuery,
+} from "@reduxjs/toolkit/query/react"
+
+import { SERVICE_API_URL } from "../settings"
+import defaultTagTypes from "./tagTypes"
+import { buildLogoutEndpoint } from "./endpoints/session"
+import { getCsrfCookie } from "../utils/auth"
+
+// TODO: decide if we want to keep any of this.
+// export function handleResponseError(error: FetchBaseQueryError): void {
+//   if (
+//     error.status === 400 &&
+//     typeof error.data === "object" &&
+//     error.data !== null
+//   ) {
+//     // Parse the error's data from snake_case to camelCase.
+//     snakeCaseToCamelCase(error.data)
+//   } else if (error.status === 401) {
+//     // TODO: redirect to appropriate login page based on user type.
+//     window.location.href = `${PORTAL_BASE_URL}/login/teacher`
+//   } else {
+//     // Catch-all error pages by status-code.
+//     window.location.href = `${PORTAL_BASE_URL}/error/${
+//       [403, 404].includes(error.status as number) ? error.status : 500
+//     }`
+//   }
+// }
+
+export default function createApi<TagTypes extends string = never>({
+  tagTypes = [],
+}: {
+  tagTypes?: readonly TagTypes[]
+} = {}) {
+  const fetch = fetchBaseQuery({
+    baseUrl: `${SERVICE_API_URL}/`,
+    credentials: "include",
+    prepareHeaders: (headers, { type }) => {
+      if (type === "mutation") {
+        let csrfToken = getCsrfCookie()
+        if (csrfToken) headers.set("x-csrftoken", csrfToken)
+      }
+
+      return headers
+    },
+  })
+
+  const api = _createApi({
+    // https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#implementing-a-custom-basequery
+    baseQuery: async (args, api, extraOptions) => {
+      if (api.type === "mutation" && getCsrfCookie() === undefined) {
+        // Get the CSRF token.
+        const { error } = await fetch(
+          { url: "/csrf/cookie", method: "GET" },
+          api,
+          {},
+        )
+
+        // Validate we got the CSRF token.
+        if (error !== undefined) {
+          console.error(error)
+          // TODO
+          // window.location.href = `${PORTAL_BASE_URL}/error/500`
+        }
+        if (getCsrfCookie() === undefined) {
+          // TODO
+          // window.location.href = `${PORTAL_BASE_URL}/error/500`
+        }
+      }
+
+      // Send the HTTP request and fetch the response.
+      return await fetch(args, api, extraOptions)
+    },
+    tagTypes: [...defaultTagTypes, ...tagTypes],
+    endpoints: () => ({}),
+  })
+
+  return api.injectEndpoints({
+    endpoints: build => ({
+      logout: buildLogoutEndpoint<null, null>(api, build),
+    }),
+  })
+}

package/src/api/endpoints/authFactor.ts

@@ -0,0 +1,31 @@
+import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
+
+import {
+  buildUrl,
+  tagData,
+  type ListArg as _ListArg,
+  type ListResult as _ListResult,
+} from "../../utils/api"
+import type { AuthFactor } from "../models"
+import { type TagTypes } from "../tagTypes"
+import urls from "../urls"
+
+export const AUTH_FACTOR_TAG: TagTypes = "AuthFactor"
+
+export type ListAuthFactorsResult = _ListResult<AuthFactor, "type">
+export type ListAuthFactorsArg = _ListArg
+
+export default function getReadAuthFactorEndpoints<
+  ListResult extends _ListResult<AuthFactor> = ListAuthFactorsResult,
+  ListArg extends _ListArg<AuthFactor> = ListAuthFactorsArg,
+>(build: EndpointBuilder<any, any, any>) {
+  return {
+    listAuthFactors: build.query<ListResult, ListArg>({
+      query: search => ({
+        url: buildUrl(urls.authFactor.list, { search }),
+        method: "GET",
+      }),
+      providesTags: tagData(AUTH_FACTOR_TAG, { includeListTag: true }),
+    }),
+  }
+}

package/src/api/endpoints/index.ts

@@ -0,0 +1,9 @@
+export * from "./authFactor"
+export { default as getReadAuthFactorEndpoints } from "./authFactor"
+export * from "./klass"
+export { default as getReadClassEndpoints } from "./klass"
+export * from "./school"
+export { default as getReadSchoolEndpoints } from "./school"
+export * from "./session"
+export * from "./user"
+export { default as getReadUserEndpoints } from "./user"

package/src/api/endpoints/klass.ts

@@ -0,0 +1,87 @@
+import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
+
+import {
+  buildUrl,
+  tagData,
+  type ListArg as _ListArg,
+  type ListResult as _ListResult,
+  type RetrieveArg as _RetrieveArg,
+  type RetrieveResult as _RetrieveResult,
+} from "../../utils/api"
+import type {
+  Class,
+  Teacher,
+  SchoolTeacher,
+  SchoolTeacherUser,
+} from "../models"
+import { type TagTypes } from "../tagTypes"
+import urls from "../urls"
+
+export const CLASS_TAG: TagTypes = "Class"
+
+export type RetrieveClassResult = _RetrieveResult<
+  Class,
+  "name" | "read_classmates_data" | "receive_requests_until" | "school"
+> & {
+  teacher: SchoolTeacher & {
+    user: Pick<
+      SchoolTeacherUser,
+      | "id"
+      | "first_name"
+      | "last_name"
+      | "email"
+      | "is_active"
+      | "date_joined"
+      | "requesting_to_join_class"
+    >
+  }
+}
+export type RetrieveClassArg = _RetrieveArg<Class>
+
+export type ListClassesResult = _ListResult<
+  Class,
+  "name" | "read_classmates_data" | "receive_requests_until" | "school",
+  {
+    teacher: SchoolTeacher & {
+      user: Pick<
+        SchoolTeacherUser,
+        | "id"
+        | "first_name"
+        | "last_name"
+        | "email"
+        | "is_active"
+        | "date_joined"
+        | "requesting_to_join_class"
+      >
+    }
+  }
+>
+export type ListClassesArg = _ListArg<{
+  teacher: Teacher["id"]
+  _id: Class["id"] | Class["id"][]
+  id_or_name: string
+}>
+
+export default function getReadClassEndpoints<
+  RetrieveResult extends _RetrieveResult<Class> = RetrieveClassResult,
+  RetrieveArg extends _RetrieveArg<Class> = RetrieveClassArg,
+  ListResult extends _ListResult<Class> = ListClassesResult,
+  ListArg extends _ListArg<Class> = ListClassesArg,
+>(build: EndpointBuilder<any, any, any>) {
+  return {
+    retrieveClass: build.query<RetrieveResult, RetrieveArg>({
+      query: id => ({
+        url: buildUrl(urls.class.detail, { url: { id } }),
+        method: "GET",
+      }),
+      providesTags: tagData(CLASS_TAG),
+    }),
+    listClasses: build.query<ListResult, ListArg>({
+      query: search => ({
+        url: buildUrl(urls.class.list, { search }),
+        method: "GET",
+      }),
+      providesTags: tagData(CLASS_TAG, { includeListTag: true }),
+    }),
+  }
+}

package/src/api/endpoints/school.ts

@@ -0,0 +1,34 @@
+import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
+
+import {
+  buildUrl,
+  tagData,
+  type RetrieveArg as _RetrieveArg,
+  type RetrieveResult as _RetrieveResult,
+} from "../../utils/api"
+import type { School } from "../models"
+import { type TagTypes } from "../tagTypes"
+import urls from "../urls"
+
+export const SCHOOL_TAG: TagTypes = "School"
+
+export type RetrieveSchoolResult = _RetrieveResult<
+  School,
+  "name" | "country" | "uk_county"
+>
+export type RetrieveSchoolArg = _RetrieveArg<School>
+
+export default function getReadSchoolEndpoints<
+  RetrieveResult extends _RetrieveResult<School> = RetrieveSchoolResult,
+  RetrieveArg extends _RetrieveArg<School> = RetrieveSchoolArg,
+>(build: EndpointBuilder<any, any, any>) {
+  return {
+    retrieveSchool: build.query<RetrieveResult, RetrieveArg>({
+      query: id => ({
+        url: buildUrl(urls.school.detail, { url: { id } }),
+        method: "GET",
+      }),
+      providesTags: tagData(SCHOOL_TAG),
+    }),
+  }
+}

package/src/api/endpoints/session.ts

@@ -0,0 +1,40 @@
+import { type EndpointBuilder, type Api } from "@reduxjs/toolkit/query/react"
+
+import { login, logout } from "../../slices/session"
+
+export function buildLoginEndpoint<ResultType, QueryArg>(
+  build: EndpointBuilder<any, any, any>,
+  url: string = "session/login/",
+) {
+  return build.mutation<ResultType, QueryArg>({
+    query: body => ({ url, method: "POST", body }),
+    async onQueryStarted(_, { dispatch, queryFulfilled }) {
+      try {
+        await queryFulfilled
+        dispatch(login())
+      } catch (error) {
+        console.error("Failed to call login endpoint...", error)
+      }
+    },
+  })
+}
+
+export function buildLogoutEndpoint<ResultType, QueryArg>(
+  api: Api<any, any, any, any, any>,
+  build: EndpointBuilder<any, any, any>,
+  url: string = "session/logout/",
+) {
+  return build.mutation<ResultType, QueryArg>({
+    query: () => ({ url, method: "POST" }),
+    async onQueryStarted(_, { dispatch, queryFulfilled }) {
+      try {
+        await queryFulfilled
+      } catch (error) {
+        console.error("Failed to call logout endpoint...", error)
+      } finally {
+        dispatch(logout())
+        dispatch(api.util.resetApiState())
+      }
+    },
+  })
+}

package/src/api/endpoints/user.ts

@@ -0,0 +1,70 @@
+import { type EndpointBuilder } from "@reduxjs/toolkit/query/react"
+
+import {
+  buildUrl,
+  tagData,
+  type ListArg as _ListArg,
+  type ListResult as _ListResult,
+  type RetrieveArg as _RetrieveArg,
+  type RetrieveResult as _RetrieveResult,
+} from "../../utils/api"
+import type { Class, User } from "../models"
+import { type TagTypes } from "../tagTypes"
+import urls from "../urls"
+
+export const USER_TAG: TagTypes = "User"
+
+export type RetrieveUserResult = _RetrieveResult<
+  User,
+  | "first_name"
+  | "last_name"
+  | "email"
+  | "is_active"
+  | "date_joined"
+  | "requesting_to_join_class"
+  | "student"
+  | "teacher"
+>
+export type RetrieveUserArg = _RetrieveArg<User>
+
+export type ListUsersResult = _ListResult<
+  User,
+  | "first_name"
+  | "last_name"
+  | "email"
+  | "is_active"
+  | "date_joined"
+  | "requesting_to_join_class"
+  | "student"
+  | "teacher"
+>
+export type ListUsersArg = _ListArg<{
+  students_in_class: Class["id"]
+  _id: User["id"] | User["id"][]
+  name: string
+  type: "teacher" | "student" | "independent" | "indy"
+}>
+
+export default function getReadUserEndpoints<
+  RetrieveResult extends _RetrieveResult<User> = RetrieveUserResult,
+  RetrieveArg extends _RetrieveArg<User> = RetrieveUserArg,
+  ListResult extends _ListResult<User> = ListUsersResult,
+  ListArg extends _ListArg<User> = ListUsersArg,
+>(build: EndpointBuilder<any, any, any>) {
+  return {
+    retrieveUser: build.query<RetrieveResult, RetrieveArg>({
+      query: id => ({
+        url: buildUrl(urls.user.detail, { url: { id } }),
+        method: "GET",
+      }),
+      providesTags: tagData(USER_TAG),
+    }),
+    listUsers: build.query<ListResult, ListArg>({
+      query: search => ({
+        url: buildUrl(urls.user.list, { search }),
+        method: "GET",
+      }),
+      providesTags: tagData(USER_TAG, { includeListTag: true }),
+    }),
+  }
+}

package/src/api/index.ts

@@ -0,0 +1,4 @@
+export { default as createApi } from "./createApi"
+export * from "./models"
+export { default as tagTypes } from "./tagTypes"
+export { default as urls } from "./urls"