Portal frontend 50 (#59)

* create class table

* simplify

* quick save

* create class form props

* create class form

* Teacher auto complete field

* fix filter

* fix filter

* simplify

* fix api call

* handle query state

* prefer cache value

* delete env vars

* feedback

* use latest js package

* update packages

* get student's raw password

* setup

* quick save

* handle result state

* use class id param

* fixed flow

* fix typo

* add todo

* abstract dialog

* new package version

* ignore errors

package.json

@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.1",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.2",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {

src/api/student.ts

@@ -6,13 +6,20 @@ import {
   type BulkDestroyResult,
   type BulkUpdateArg,
   type BulkUpdateResult,
+  type Result,
   tagData,
 } from "codeforlife/utils/api"
 import { type Student, type User, urls } from "codeforlife/api"
 
 import api from "."
 
-export type CreateStudentsResult = BulkCreateResult<Student>
+export type CreateStudentsResult = BulkCreateResult<
+  Student,
+  "auto_gen_password",
+  {
+    user: Result<User, "password">
+  }
+>
 export type CreateStudentsArg = BulkCreateArg<
   Student,
   "klass",
@@ -42,13 +49,19 @@ export type TransferStudentsArg = BulkUpdateArg<
   }
 >
 
-export type ResetStudentsPasswordResult = BulkUpdateResult<Student>
+export type ResetStudentsPasswordResult = BulkUpdateResult<
+  Student,
+  "auto_gen_password",
+  {
+    user: Result<User, "password">
+  }
+>
 export type ResetStudentsPasswordArg = BulkUpdateArg<
   Student,
   never,
   never,
   {
-    user: Arg<User, never, "password">
+    user?: Arg<User, never, "password">
   }
 >
 

src/app/hooks.ts

@@ -5,9 +5,15 @@
 // for importing and re-exporting the typed versions of hooks.
 /* eslint-disable @typescript-eslint/no-restricted-imports */
 import { useDispatch, useSelector } from "react-redux"
+import { useParams } from "codeforlife/hooks"
 
 import type { AppDispatch, RootState } from "./store"
+import { classIdSchema } from "./schemas"
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
 export const useAppSelector = useSelector.withTypes<RootState>()
+
+export function useClassIdParam() {
+  return useParams({ classId: classIdSchema().required() })
+}