-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Indy join class request page (#79)
* 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
1 parent
7a6c72c
commit a6eb1f0
Showing
6 changed files
with
212 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters