Skip to content

Commit

Permalink
feat: Indy join class request page (#79)
Browse files Browse the repository at this point in the history
* Indy join class request page

* Small fixes

* Install local package blablabla

* New package whateva

* Separate components

* Return circular progress

* Return circular progress

* Feedback

* Feedback 2
  • Loading branch information
faucomte97 authored Dec 9, 2024
1 parent 7a6c72c commit a6eb1f0
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 4 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
],
"dependencies": {
"codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.5.0",
"codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.5.1",
"crypto-js": "^4.2.0"
},
"devDependencies": {
Expand Down
80 changes: 80 additions & 0 deletions src/pages/studentJoinClass/RequestPending.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
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 { handleResultState } from "codeforlife/utils/api"
import { paths } from "../../routes"
import { useRetrieveSchoolQuery } from "../../api/school"

export interface RequestPendingProps {
user: IndependentUser<RetrieveUserResult>
}

const RequestPending: FC<RequestPendingProps> = ({ user }) => {
const navigate = useNavigate()
const [updateUser] = useUpdateUserMutation()

return handleResultState(
useRetrieveSchoolQuery(user.requesting_to_join_class!.school),
school => (
<>
<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,
})
.unwrap()
.then(() => {
navigate(".", {
state: {
notifications: [
{
props: {
children:
"Your request to join a school has been revoked successfully.",
},
},
],
},
})
})
}}
>
Cancel request
</Button>
</Stack>
</>
),
)
}

export default RequestPending
61 changes: 61 additions & 0 deletions src/pages/studentJoinClass/RequestToJoinClassForm.tsx
Original file line number Diff line number Diff line change
@@ -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
62 changes: 62 additions & 0 deletions src/pages/studentJoinClass/StudentJoinClass.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import * as page from "codeforlife/components/page"
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"

import { type RetrieveUserResult, useRetrieveUserQuery } from "../../api/user"
import RequestPending from "./RequestPending.tsx"
import RequestToJoinClassForm from "./RequestToJoinClassForm.tsx"

const _StudentJoinClass: FC<SessionMetadata> = ({ user_id }) => {
return handleResultState(useRetrieveUserQuery(user_id), authUser => {
const user = authUser as IndependentUser<RetrieveUserResult>

return (
<page.Section>
<Typography align="center" variant="h4">
Join a school or club
</Typography>
{user.requesting_to_join_class ? (
<RequestPending user={user} />
) : (
<>
<Typography variant="h5">
Request to join a school or club
</Typography>
<Typography>
If you want to link your Code For Life account with a school or
club, ask a teacher to enable external requests and provide you
with the Class Access Code for the class you want to join. Simply
add the Class Access Code to the form below and submit.
</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>
If successful, the teacher will contact you with your new login
details.
</Typography>
<RequestToJoinClassForm
indyUser={{
id: user.id,
requesting_to_join_class: user.requesting_to_join_class!.id,
}}
/>
</>
)}
</page.Section>
)
})
}

export interface StudentJoinClassProps {}

const StudentJoinClass: FC<StudentJoinClassProps> = () => (
<page.Page session={{ userType: "indy" }}>{_StudentJoinClass}</page.Page>
)

export default StudentJoinClass
5 changes: 5 additions & 0 deletions src/routes/student.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Route } from "react-router-dom"
// import Student from '../../pages/student/Student';
import StudentAccount from "../pages/studentAccount/StudentAccount"
import StudentDashboard from "../pages/studentDashboard/StudentDashboard"
import StudentJoinClass from "../pages/studentJoinClass/StudentJoinClass"
import paths from "./paths"

const student = (
Expand All @@ -24,6 +25,10 @@ const student = (
path={paths.indy.dashboard._}
element={<StudentDashboard userType="indy" />}
/>
<Route
path={paths.indy.dashboard.joinClass._}
element={<StudentJoinClass />}
/>
</>
)

Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2824,9 +2824,9 @@ clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==

"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.5.0":
version "2.5.0"
resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/47d9378050aead76bf8acd550744054527affaef"
"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.5.1":
version "2.5.1"
resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/e85ae592b15de42fbe5fd20a5e8649271f68772f"
dependencies:
"@emotion/react" "^11.10.6"
"@emotion/styled" "^11.10.6"
Expand Down

0 comments on commit a6eb1f0

Please sign in to comment.