Separate components

src/pages/studentJoinClass/RequestPending.tsx

@@ -0,0 +1,84 @@
+import { Button, Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+import { type IndependentUser } from "codeforlife/api"
+import { useNavigate } from "react-router-dom"
+
+import { type RetrieveUserResult, useUpdateUserMutation } from "../../api/user"
+import { useRetrieveSchoolQuery } from "../../api/school.ts"
+
+export interface RequestPendingProps {
+  user: IndependentUser<RetrieveUserResult>
+}
+
+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 <></>
+
+  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.",
+                        },
+                      },
+                    ],
+                  },
+                })
+              })
+          }}
+        >
+          Cancel request
+        </Button>
+      </Stack>
+    </>
+  )
+}
+
+export default RequestPending

src/pages/studentJoinClass/StudentJoinClass.tsx

@@ -1,84 +1,25 @@
 import * as page from "codeforlife/components/page"
-import { Button, Stack, Typography } from "@mui/material"
 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 { useNavigate } from "react-router-dom"
 
-import { useRetrieveUserQuery, useUpdateUserMutation } from "../../api/user"
+import { type RetrieveUserResult, useRetrieveUserQuery } from "../../api/user"
+import RequestPending from "./RequestPending.tsx"
 import UpdateRequestingToJoinClassForm from "./UpdateRequestingToJoinClassForm.tsx"
 
 const _StudentJoinClass: FC<SessionMetadata> = ({ user_id }) => {
-  const navigate = useNavigate()
-  const [updateUser] = useUpdateUserMutation()
+  return handleResultState(useRetrieveUserQuery(user_id), authUser => {
+    const user = authUser as IndependentUser<RetrieveUserResult>
 
-  return handleResultState(useRetrieveUserQuery(user_id), user => {
     return (
       <page.Section>
         <Typography align="center" variant="h4">
           Join a school or club
         </Typography>
         {user.requesting_to_join_class ? (
-          <>
-            <Typography variant="h5">Request pending</Typography>
-            <Typography>
-              Your request to join class {user.requesting_to_join_class.id} in
-              the school or club Code for Life School 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.",
-                              },
-                            },
-                          ],
-                        },
-                      })
-                    })
-                }}
-              >
-                Cancel request
-              </Button>
-            </Stack>
-          </>
+          <RequestPending user={user} />
         ) : (
           <>
             <Typography variant="h5">