Fix pipeline (#36)

* use new configs

* new package

* fix errors

* fix errors

* fix errors

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .idea
@@ -26,3 +27,4 @@ coverage
 
 # production
 /build
+*.d.ts

.vscode/launch.json

@@ -18,6 +18,10 @@
       "type": "node"
     },
     {
+      "env": {
+        "VITE_SERVICE_IS_ROOT": "1",
+        "VITE_SERVICE_NAME": "portal"
+      },
       "name": "Vite Server",
       "preLaunchTask": "run",
       "request": "launch",

.vscode/settings.json

@@ -19,6 +19,9 @@
     80
   ],
   "editor.tabSize": 2,
+  "files.exclude": {
+    "**/*.tsbuildinfo": true
+  },
   "javascript.format.semicolons": "remove",
   "javascript.preferences.quoteStyle": "double",
   "prettier.configPath": ".prettierrc.json",

eslint.config.js

@@ -0,0 +1,66 @@
+import js from "@eslint/js"
+import globals from "globals"
+import react from "eslint-plugin-react"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import prettier from "eslint-plugin-prettier"
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"
+import tseslint from "typescript-eslint"
+
+// https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts
+export default tseslint.config(
+  { ignores: ["dist", "**/*.d.ts"] },
+  {
+    settings: { react: { version: "18.3" } },
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      eslintPluginPrettierRecommended,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      react,
+      prettier,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
+      ...reactHooks.configs.recommended.rules,
+      "sort-imports": ["error", { allowSeparatedGroups: true }],
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "error",
+        { fixStyle: "inline-type-imports" },
+      ],
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "react-redux",
+              importNames: ["useSelector", "useStore", "useDispatch"],
+              message:
+                "Please use pre-typed versions from `src/app/hooks.ts` instead.",
+            },
+          ],
+          patterns: [
+            {
+              group: ["codeforlife/src"],
+              message: "Please use `codeforlife` instead of `codeforlife/src`.",
+            },
+          ],
+        },
+      ],
+    },
+  },
+)

package.json

@@ -23,15 +23,17 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.2.2",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.0",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {
+    "@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/crypto-js": "^4.2.2",
+    "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.3",
     "@types/node": "^20.14.2",
     "@types/qs": "^6.9.7",
@@ -44,9 +46,14 @@
     "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"
   }

src/App.tsx

@@ -1,16 +1,14 @@
-import { CssBaseline, ThemeProvider } from "@mui/material"
-import type { FC } from "react"
+import { type FC } from "react"
+import { App as _ } from "codeforlife/components"
 
-import Router from "./router"
+import routes from "./routes"
+import store from "./app/store"
 import theme from "./app/theme"
 
-const App: FC = () => {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Router />
-    </ThemeProvider>
-  )
-}
+export interface AppProps {}
+
+const App: FC<AppProps> = () => (
+  <_ store={store} theme={theme} routes={routes} />
+)
 
 export default App

src/api/index.ts

@@ -1,64 +1,7 @@
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"
-import { getCsrfCookie, logout } from "codeforlife/utils/auth"
-import { tagTypes } from "codeforlife/api"
-
-const fetch = fetchBaseQuery({
-  baseUrl: import.meta.env.VITE_API_BASE_URL,
-  credentials: "include",
-  prepareHeaders: (headers, { type }) => {
-    if (type === "mutation") {
-      let csrfToken = getCsrfCookie()
-      if (csrfToken) headers.set("x-csrftoken", csrfToken)
-    }
-
-    return headers
-  },
-})
+import { createApi } from "codeforlife/api"
 
 const api = createApi({
-  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: [...tagTypes, "SchoolTeacherInvitation"],
-  endpoints: build => ({
-    logout: build.mutation<null, null>({
-      query: () => ({
-        url: "session/logout/",
-        method: "POST",
-      }),
-      async onQueryStarted(_, { dispatch, queryFulfilled }) {
-        try {
-          await queryFulfilled
-        } catch (error) {
-          console.error("Failed to log out...", error)
-        } finally {
-          logout()
-          dispatch(api.util.resetApiState())
-        }
-      },
-    }),
-  }),
+  tagTypes: ["SchoolTeacherInvitation"],
 })
 
 export default api

src/api/student.ts

@@ -70,7 +70,7 @@ const studentApi = api.injectEndpoints({
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData("User", "user"),
+      invalidatesTags: tagData("User", { id: "user" }),
     }),
     transferStudents: build.mutation<
       TransferStudentsResult,
@@ -81,7 +81,7 @@ const studentApi = api.injectEndpoints({
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData("User", "user"),
+      invalidatesTags: tagData("User", { id: "user" }),
     }),
     resetStudentsPassword: build.mutation<
       ResetStudentsPasswordResult,
@@ -99,7 +99,7 @@ const studentApi = api.injectEndpoints({
         method: "DELETE",
         body,
       }),
-      invalidatesTags: tagData("User", "user"),
+      invalidatesTags: tagData("User", { id: "user" }),
     }),
   }),
 })

src/api/teacher.ts

@@ -47,7 +47,7 @@ const teacherApi = api.injectEndpoints({
         }),
         method: "PUT",
       }),
-      invalidatesTags: tagData("User", "user"),
+      invalidatesTags: tagData("User", { id: "user" }),
     }),
     setTeacherAdminAccess: build.mutation<
       SetTeacherAdminAccessResult,
@@ -60,14 +60,14 @@ const teacherApi = api.injectEndpoints({
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData("User", "user"),
+      invalidatesTags: tagData("User", { id: "user" }),
     }),
     destroyTeacher: build.mutation<DestroyTeacherResult, DestroyTeacherArg>({
       query: id => ({
         url: buildUrl(urls.teacher.detail, { url: { id } }),
         method: "DELETE",
       }),
-      invalidatesTags: tagData("User", "user"),
+      invalidatesTags: tagData("User", { id: "user" }),
     }),
   }),
 })

src/app/env.ts

@@ -0,0 +1,20 @@
+import env from "codeforlife/env"
+
+export * from "codeforlife/env"
+
+// Gmail.
+export const GMAIL_FILTERS_PASSWORD_RESET_REQUEST =
+  env.VITE_GMAIL_FILTERS_PASSWORD_RESET_REQUEST
+export const GMAIL_FILTERS_EMAIL_VERIFICATION =
+  env.VITE_GMAIL_FILTERS_EMAIL_VERIFICATION
+
+// Links to external sites.
+export const LINK_FEMALE_GRADUATES_IN_CS = env.VITE_LINK_FEMALE_GRADUATES_IN_CS
+export const LINK_OUTLOOK_HOME = env.VITE_LINK_OUTLOOK_HOME
+export const LINK_SKILLS_FOR_THE_FUTURE = env.VITE_LINK_SKILLS_FOR_THE_FUTURE
+export const LINK_PORTAL_GITHUB = env.VITE_LINK_PORTAL_GITHUB
+export const LINK_CFL_DOCS = env.VITE_LINK_CFL_DOCS
+export const LINK_PRIMARY_PACK_GITBOOK = env.VITE_LINK_PRIMARY_PACK_GITBOOK
+export const LINK_PRIMARY_PACK_DOWNLOAD = env.VITE_LINK_PRIMARY_PACK_DOWNLOAD
+export const LINK_PYTHON_PACK_GITBOOK = env.VITE_LINK_PYTHON_PACK_GITBOOK
+export const LINK_PYTHON_PACK_DOWNLOAD = env.VITE_LINK_PYTHON_PACK_DOWNLOAD