Feedback

src/pages/studentJoinClass/RequestPending.tsx

@@ -1,10 +1,13 @@
-import { Button, CircularProgress, Stack, Typography } from "@mui/material"
+import { Button, Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 import { type IndependentUser } from "codeforlife/api"
+import { LinkButton } from "codeforlife/components/router"
 import { useNavigate } from "react-router-dom"
 
 import { type RetrieveUserResult, useUpdateUserMutation } from "../../api/user"
-import { useRetrieveSchoolQuery } from "../../api/school.ts"
+import { handleResultState } from "codeforlife/utils/api"
+import { paths } from "../../routes"
+import { useRetrieveSchoolQuery } from "../../api/school"
 
 export interface RequestPendingProps {
   user: IndependentUser<RetrieveUserResult>
@@ -13,71 +16,66 @@ export interface RequestPendingProps {
 const RequestPending: FC<RequestPendingProps> = ({ user }) => {
   const navigate = useNavigate()
   const [updateUser] = useUpdateUserMutation()
-  const result = useRetrieveSchoolQuery(user.requesting_to_join_class!.school)
-  const school = result.data
 
-  if (!school) return <CircularProgress />
-
-  return (
-    <>
-      <Typography variant="h5">Request pending</Typography>
-      <Typography>
-        Your request to join class {user.requesting_to_join_class!.id} in the
-        school or club {school.name} is still pending.
-      </Typography>
-      <Typography>
-        The teacher for that class must review and approve the request to
-        complete the process.
-      </Typography>
-      <Typography>
-        If successful, the teacher will then contact you with your new login
-        details.
-      </Typography>
-      <Typography>
-        <strong>Warning:</strong> once the teacher accepts you to their class,
-        that teacher and the school or club will manage your account.
-      </Typography>
-      <Typography>
-        You may cancel your request now, before the teacher makes their
-        decision.
-      </Typography>
-
-      <Stack direction="row" spacing={2}>
-        <Button
-          variant="outlined"
-          onClick={() => {
-            navigate(-1)
-          }}
-        >
-          Back
-        </Button>
-        <Button
-          onClick={() => {
-            void updateUser({
-              id: user.id,
-              requesting_to_join_class: null,
-            })
-              .unwrap()
-              .then(() => {
-                navigate(".", {
-                  state: {
-                    notifications: [
-                      {
-                        props: {
-                          children:
-                            "Your request to join a school has been revoked successfully.",
-                        },
-                      },
-                    ],
-                  },
+  return handleResultState(
+    useRetrieveSchoolQuery(user.requesting_to_join_class!.school),
+    school => {
+      return (
+        <>
+          <Typography variant="h5">Request pending</Typography>
+          <Typography>
+            Your request to join class {user.requesting_to_join_class!.id} in
+            the school or club {school.name} is still pending.
+          </Typography>
+          <Typography>
+            The teacher for that class must review and approve the request to
+            complete the process.
+          </Typography>
+          <Typography>
+            If successful, the teacher will then contact you with your new login
+            details.
+          </Typography>
+          <Typography>
+            <strong>Warning:</strong> once the teacher accepts you to their
+            class, that teacher and the school or club will manage your account.
+          </Typography>
+          <Typography>
+            You may cancel your request now, before the teacher makes their
+            decision.
+          </Typography>
+          <Stack direction="row" spacing={2}>
+            <LinkButton variant="outlined" to={paths.indy.dashboard._}>
+              Back
+            </LinkButton>
+            <Button
+              onClick={() => {
+                void updateUser({
+                  id: user.id,
+                  requesting_to_join_class: null,
                 })
-              })
-          }}
-        >
-          Cancel request
-        </Button>
-      </Stack>
-    </>
+                  .unwrap()
+                  .then(() => {
+                    navigate(".", {
+                      state: {
+                        notifications: [
+                          {
+                            props: {
+                              children:
+                                "Your request to join a school has been revoked successfully.",
+                            },
+                          },
+                        ],
+                      },
+                    })
+                  })
+              }}
+            >
+              Cancel request
+            </Button>
+          </Stack>
+        </>
+      )
+    },
   )
 }
 

src/pages/studentJoinClass/RequestToJoinClassForm.tsx

@@ -0,0 +1,61 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { LinkButton } from "codeforlife/components/router"
+import { Stack } from "@mui/material"
+import { type User } from "codeforlife/api"
+import { useNavigate } from "codeforlife/hooks"
+
+import { classIdSchema } from "../../app/schemas.ts"
+import { paths } from "../../routes"
+import { useUpdateUserMutation } from "../../api/user"
+
+export interface RequestToJoinClassFormProps {
+  indyUser: Pick<User, "id" | "requesting_to_join_class">
+}
+
+const RequestToJoinClassForm: FC<RequestToJoinClassFormProps> = ({
+  indyUser,
+}) => {
+  const navigate = useNavigate()
+
+  return (
+    <forms.Form
+      initialValues={indyUser}
+      useMutation={useUpdateUserMutation}
+      submitOptions={{
+        then: () => {
+          navigate(".", {
+            state: {
+              notifications: [
+                {
+                  index: 1,
+                  props: {
+                    children:
+                      "Your request to join a school has been received successfully.",
+                  },
+                },
+              ],
+            },
+          })
+        },
+      }}
+    >
+      <forms.TextField
+        placeholder="Class access code"
+        label="Class access code"
+        name="requesting_to_join_class"
+        sx={{ width: { xs: "100%", sm: "50%" } }}
+        schema={classIdSchema}
+        required
+      />
+      <Stack direction="row" spacing={2} paddingY={3}>
+        <LinkButton variant="outlined" to={paths.indy.dashboard._}>
+          Cancel
+        </LinkButton>
+        <forms.SubmitButton>Request</forms.SubmitButton>
+      </Stack>
+    </forms.Form>
+  )
+}
+
+export default RequestToJoinClassForm

src/pages/studentJoinClass/StudentJoinClass.tsx

@@ -3,11 +3,11 @@ import { type FC } from "react"
 import type { IndependentUser } from "codeforlife/api"
 import type { SessionMetadata } from "codeforlife/hooks"
 import { Typography } from "@mui/material"
-import { handleResultState } from "codeforlife/utils/api.tsx"
+import { handleResultState } from "codeforlife/utils/api"
 
 import { type RetrieveUserResult, useRetrieveUserQuery } from "../../api/user"
 import RequestPending from "./RequestPending.tsx"
-import UpdateRequestingToJoinClassForm from "./UpdateRequestingToJoinClassForm.tsx"
+import RequestToJoinClassForm from "./RequestToJoinClassForm.tsx"
 
 const _StudentJoinClass: FC<SessionMetadata> = ({ user_id }) => {
   return handleResultState(useRetrieveUserQuery(user_id), authUser => {
@@ -40,13 +40,7 @@ const _StudentJoinClass: FC<SessionMetadata> = ({ user_id }) => {
               If successful, the teacher will contact you with your new login
               details.
             </Typography>
-
-            <UpdateRequestingToJoinClassForm
-              indyUser={{
-                id: user_id,
-                requesting_to_join_class: user.requesting_to_join_class,
-              }}
-            />
+            <RequestToJoinClassForm indyUser={user} />
           </>
         )}
       </page.Section>