feat: teacher onboarding

package.json

@@ -26,7 +26,7 @@
   ],
   "dependencies": {
     "@react-pdf/renderer": "^4.0.0",
-    "codeforlife": "2.6.3",
+    "codeforlife": "2.6.4",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {

src/components/form/ClassNameField.tsx

@@ -12,7 +12,7 @@ export type ClassNameFieldProps = Omit<
 
 const ClassNameField: FC<ClassNameFieldProps> = ({
   name = "name",
-  label = "Last name",
+  label = "Class name",
   placeholder = "Enter a class name",
   InputProps = {},
   ...otherTextFieldProps

src/pages/teacherDashboard/classes/class/CreateStudentsForm.tsx → src/components/form/CreateStudentsForm.tsx

@@ -4,22 +4,32 @@
 import { Stack, Typography } from "@mui/material"
 import { type Class } from "codeforlife/api"
 import { InputFileButton } from "codeforlife/components"
+import { type SubmitFormOptions } from "codeforlife/utils/form"
 import { firstNameSchema } from "codeforlife/schemas/user"
-import { generatePath } from "react-router-dom"
 import { useNavigate } from "codeforlife/hooks"
 
 import {
   type CreateStudentsArg,
+  type CreateStudentsResult,
   useCreateStudentsMutation,
-} from "../../../../api/student"
-import { type StudentsCredentialsState } from "../studentsCredentials/StudentsCredentials"
-import { paths } from "../../../../routes"
+} from "../../api/student"
 
 export interface CreateStudentsFormProps {
   classId: Class["id"]
+  submitOptions: Omit<
+    SubmitFormOptions<
+      { first_names: string[] },
+      CreateStudentsArg,
+      CreateStudentsResult
+    >,
+    "clean" | "catch"
+  >
 }
 
-const CreateStudentsForm: FC<CreateStudentsFormProps> = ({ classId }) => {
+const CreateStudentsForm: FC<CreateStudentsFormProps> = ({
+  classId,
+  submitOptions,
+}) => {
   const fileInput = useRef<HTMLInputElement>()
   const navigate = useNavigate()
 
@@ -56,23 +66,14 @@
         initialValues={{ first_names: [] as string[] }}
         useMutation={useCreateStudentsMutation}
         submitOptions={{
+          ...submitOptions,
           clean: ({ first_names }) =>
             first_names.reduce((arg, first_name) => {
               first_name = first_name.trim()
               return first_name
                 ? [...arg, { klass: classId, user: { first_name } }]
                 : arg
             }, [] as CreateStudentsArg),
-          then: students => {
-            navigate<StudentsCredentialsState>(
-              generatePath(
-                paths.teacher.dashboard.tab.classes.class.students.credentials
-                  ._,
-                { classId },
-              ),
-              { state: { flow: "create", students } },
-            )
-          },
           catch: () => {
             navigate(".", {
               state: {

src/components/form/index.tsx

@@ -2,6 +2,8 @@ export * from "./ClassAutocompleteField"
 export { default as ClassAutocompleteField } from "./ClassAutocompleteField"
 export * from "./ClassNameField"
 export { default as ClassNameField } from "./ClassNameField"
+export * from "./CreateStudentsForm"
+export { default as CreateStudentsForm } from "./CreateStudentsForm"
 export * from "./LastNameField"
 export { default as LastNameField } from "./LastNameField"
 export * from "./NewPasswordField"

src/pages/login/Login.tsx

@@ -1,11 +1,8 @@
 import * as page from "codeforlife/components/page"
 import * as yup from "yup"
-import { type FC, useEffect } from "react"
-import {
-  useNavigate,
-  useSearchParams,
-  useSessionMetadata,
-} from "codeforlife/hooks"
+import { useSearchParams, useSessionMetadata } from "codeforlife/hooks"
+import { type FC } from "react"
+import { Navigate } from "codeforlife/components/router"
 
 import * as studentForms from "./studentForms"
 import * as teacherForms from "./teacherForms"
@@ -24,32 +21,35 @@
 
 const Login: FC<LoginProps> = ({ form }) => {
   const sessionMetadata = useSessionMetadata()
-  const navigate = useNavigate()
   const searchParams = useSearchParams({
     verifyEmail: yup.boolean().default(false),
   })
 
-  useEffect(() => {
-    if (sessionMetadata) {
-      if (
-        sessionMetadata.user_type === "teacher" &&
-        sessionMetadata.auth_factors.includes("otp") &&
-        form !== "teacher-otp" &&
-        form !== "teacher-otp-bypass-token"
-      ) {
-        navigate(paths.login.teacher.otp._, { replace: true })
-      } else {
-        navigate(
+  if (sessionMetadata) {
+    const { user_type, auth_factors } = sessionMetadata
+
+    if (
+      user_type === "teacher" &&
+      auth_factors.includes("otp") &&
+      form !== "teacher-otp" &&
+      form !== "teacher-otp-bypass-token"
+    ) {
+      return <Navigate to={paths.login.teacher.otp._} replace />
+    }
+
+    return (
+      <Navigate
+        to={
           {
             teacher: paths.teacher.dashboard.tab.school._,
             student: paths.student.dashboard._,
             indy: paths.indy.dashboard._,
-          }[sessionMetadata.user_type],
-          { replace: true },
-        )
-      }
-    }
-  }, [sessionMetadata, navigate, form])
+          }[user_type]
+        }
+        replace
+      />
+    )
+  }
 
   return (
     <page.Page>

src/pages/teacherDashboard/TeacherDashboard.tsx

@@ -1,15 +1,16 @@
 import * as page from "codeforlife/components/page"
-import { type FC, useEffect } from "react"
-import { type SessionMetadata, useNavigate } from "codeforlife/hooks"
+import { type FC } from "react"
+import { Navigate } from "codeforlife/components/router"
 import { type SchoolTeacherUser } from "codeforlife/api"
+import { type SessionMetadata } from "codeforlife/hooks"
 import { getParam } from "codeforlife/utils/router"
 import { handleResultState } from "codeforlife/utils/api"
 
 import Account, { type AccountProps } from "./account/Account"
 import Classes, { type ClassesProps } from "./classes/Classes"
-import { type RetrieveUserResult, useRetrieveUserQuery } from "../../api/user"
 import School, { type SchoolProps } from "./school/School"
 import { paths } from "../../routes"
+import { useRetrieveUserQuery } from "../../api/user"
 
 export type TeacherDashboardProps =
   | {
@@ -29,64 +30,61 @@
   tab,
   view,
   user_id,
-}) => {
-  const result = useRetrieveUserQuery(user_id)
-  const navigate = useNavigate()
+}) =>
+  handleResultState(
+    useRetrieveUserQuery(user_id, { refetchOnMountOrArgChange: true }),
+    authUser => {
+      if (!authUser.teacher!.school) {
+        return <Navigate to={paths.teacher.onboarding._} />
+      }
 
-  const authUser = result.data
-  const isNonSchoolTeacher = authUser && !authUser.teacher?.school
+      const authSchoolTeacherUser = authUser as SchoolTeacherUser<
+        typeof authUser
+      >
 
-  useEffect(() => {
-    if (isNonSchoolTeacher) navigate(paths.teacher.onboarding._)
-  }, [isNonSchoolTeacher, navigate])
+      const tabs: page.TabBarProps["tabs"] = [
+        {
+          label: "Your school",
+          children: (
+            <School
+              authUser={authSchoolTeacherUser}
+              view={view as SchoolProps["view"]}
+            />
+          ),
+          path: getParam(paths.teacher.dashboard.tab.school, "tab"),
+        },
+        {
+          label: "Your classes",
+          children: (
+            <Classes
+              authUser={authSchoolTeacherUser}
+              view={view as ClassesProps["view"]}
+            />
+          ),
+          path: getParam(paths.teacher.dashboard.tab.classes, "tab"),
+        },
+        {
+          label: "Your account",
+          children: (
+            <Account
+              authUser={authSchoolTeacherUser}
+              view={view as AccountProps["view"]}
+            />
+          ),
+          path: getParam(paths.teacher.dashboard.tab.account, "tab"),
+        },
+      ]
 
-  if (isNonSchoolTeacher) return <></>
-
-  const authSchoolTeacherUser =
-    authUser as SchoolTeacherUser<RetrieveUserResult>
-
-  const tabs: page.TabBarProps["tabs"] = [
-    {
-      label: "Your school",
-      children: (
-        <School
-          authUser={authSchoolTeacherUser}
-          view={view as SchoolProps["view"]}
-        />
-      ),
-      path: getParam(paths.teacher.dashboard.tab.school, "tab"),
-    },
-    {
-      label: "Your classes",
-      children: (
-        <Classes
-          authUser={authSchoolTeacherUser}
-          view={view as ClassesProps["view"]}
+      return (
+        <page.TabBar
+          header={`Welcome back, ${authUser.first_name} ${authUser.last_name}`}
+          originalPath={paths.teacher.dashboard.tab._}
+          value={tabs.findIndex(t => t.path === tab)}
+          tabs={tabs}
         />
-      ),
-      path: getParam(paths.teacher.dashboard.tab.classes, "tab"),
+      )
     },
-    {
-      label: "Your account",
-      children: (
-        <Account
-          authUser={authSchoolTeacherUser}
-          view={view as AccountProps["view"]}
-        />
-      ),
-      path: getParam(paths.teacher.dashboard.tab.account, "tab"),
-    },
-  ]
-
-  return handleResultState(result, authUser => (
-    <page.TabBar
-      header={`Welcome back, ${authUser.first_name} ${authUser.last_name}`}
-      originalPath={paths.teacher.dashboard.tab._}
-      value={tabs.findIndex(t => t.path === tab)}
-      tabs={tabs}
-    />
-  ))
-}
+  )
 
 const TeacherDashboard: FC<TeacherDashboardProps> = props => (
   <page.Page session={{ userType: "teacher" }}>

src/pages/teacherDashboard/classes/class/Class.tsx

@@ -1,20 +1,24 @@
 import * as pages from "codeforlife/components/page"
+import { useNavigate, useParams } from "codeforlife/hooks"
 import { type Class } from "codeforlife/api"
 import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
 import { Navigate } from "codeforlife/components/router"
 import { Typography } from "@mui/material"
+import { generatePath } from "react-router-dom"
 import { handleResultState } from "codeforlife/utils/api"
-import { useParams } from "codeforlife/hooks"
 
 import AdditionalClassDetails from "./AdditionalClassDetails"
-import CreateStudentsForm from "./CreateStudentsForm"
+import { CreateStudentsForm } from "../../../../components/form"
 import StudentTable from "./StudentTable"
+import { type StudentsCredentialsState } from "../studentsCredentials/StudentsCredentials"
 import { classIdSchema } from "../../../../app/schemas"
 import { paths } from "../../../../routes"
 import { useRetrieveClassQuery } from "../../../../api/klass"
 
 const _Class: FC<{ classId: Class["id"] }> = ({ classId }) => {
+  const navigate = useNavigate()
+
   return handleResultState(useRetrieveClassQuery(classId), klass => (
     <>
       <pages.Section>
@@ -35,7 +39,21 @@
         <StudentTable classId={classId} />
       </pages.Section>
       <pages.Section boxProps={{ bgcolor: "info.main" }}>
-        <CreateStudentsForm classId={classId} />
+        <CreateStudentsForm
+          classId={classId}
+          submitOptions={{
+            then: students => {
+              navigate<StudentsCredentialsState>(
+                generatePath(
+                  paths.teacher.dashboard.tab.classes.class.students.credentials
+                    ._,
+                  { classId },
+                ),
+                { state: { flow: "create", students } },
+              )
+            },
+          }}
+        />
       </pages.Section>
       <pages.Section>
         <AdditionalClassDetails classId={classId} />

src/pages/teacherOnboarding/CreateClassForm.tsx

@@ -0,0 +1,42 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { type SubmitFormOptions } from "codeforlife/utils/form"
+import { Typography } from "@mui/material"
+
+import { ClassNameField, ReadClassmatesDataField } from "../../components/form"
+import {
+  type CreateClassArg,
+  type CreateClassResult,
+  useCreateClassMutation,
+} from "../../api/klass"
+
+export interface CreateClassFormProps {
+  submitOptions: SubmitFormOptions<
+    CreateClassArg,
+    CreateClassArg,
+    CreateClassResult
+  >
+}
+
+const CreateClassForm: FC<CreateClassFormProps> = ({ submitOptions }) => (
+  <>
+    <Typography>
+      When you set up a new class, a unique class access code will automatically
+      be generated, with you being identified as the teacher for that class.
+    </Typography>
+    <forms.Form
+      initialValues={{
+        name: "",
+        read_classmates_data: false,
+      }}
+      useMutation={useCreateClassMutation}
+      submitOptions={submitOptions}
+    >
+      <ClassNameField required />
+      <ReadClassmatesDataField />
+      <forms.SubmitButton>Create class</forms.SubmitButton>
+    </forms.Form>
+  </>
+)
+
+export default CreateClassForm