Skip to content

Commit

Permalink
fix check boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@SKairinos
SKairinos committed Oct 8, 2024
1 parent 4547730 commit 55b2be3
Showing 1 changed file with 42 additions and 23 deletions.
65 changes: 42 additions & 23 deletions src/pages/teacherDashboard/classes/class/StudentTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,15 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
const [dialog, setDialog] = useState<
"reset-students-password" | "delete-students"
>()
const [studentUsers, setStudentUsers] = useState<
const [selectedStudentUsers, setSelectedStudentUsers] = useState<
Record<
ListUsersResult["data"][number]["id"],
StudentUser<ListUsersResult["data"][number]>
>
>({})

const selectButtonDisabled = !Object.keys(selectedStudentUsers).length

function closeDialog() {
setDialog(undefined)
}
Expand All @@ -56,7 +58,9 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
}}
>
{/* @ts-expect-error users are student-users */}
{(users: Array<StudentUser<ListUsersResult["data"][number]>>) => (
{(
studentUsers: Array<StudentUser<ListUsersResult["data"][number]>>,
) => (
<tables.Table
headers={[
"Student details",
Expand All @@ -65,12 +69,18 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
children: (
<Checkbox
key="all-student-users-checkbox"
checked={studentUsers.every(
studentUser => studentUser.id in selectedStudentUsers,
)}
onChange={event => {
setStudentUsers(
setSelectedStudentUsers(
event.target.checked
? users.reduce(
(users, user) => ({ ...users, [user.id]: user }),
{} as typeof studentUsers,
? studentUsers.reduce(
(selectedStudentUsers, studentUser) => ({
...selectedStudentUsers,
[studentUser.id]: studentUser,
}),
{} as typeof selectedStudentUsers,
)
: {},
)
Expand All @@ -81,23 +91,28 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
{ align: "center", children: "Action" },

Check failure on line 91 in src/pages/teacherDashboard/classes/class/StudentTable.tsx

View workflow job for this annotation

GitHub Actions / main / test / test-js-code 

Object literal may only specify known properties, and 'align' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'.
]}
>
{users.length ? (
users.map(user => (
<tables.BodyRow key={`user-${user.id}`}>
<tables.Cell width="70%">{user.first_name}</tables.Cell>
{studentUsers.length ? (
studentUsers.map(studentUser => (
<tables.BodyRow key={`user-${studentUser.id}`}>
<tables.Cell width="70%">
{studentUser.first_name}
</tables.Cell>
<tables.Cell align="center">
<Checkbox
checked={studentUser.id in selectedStudentUsers}
onChange={event => {
setStudentUsers(
setSelectedStudentUsers(
event.target.checked
? previousStudentUsers => ({
...previousStudentUsers,
[user.id]: user,
? previousSelectedStudentUsers => ({
...previousSelectedStudentUsers,
[studentUser.id]: studentUser,
})
: previousStudentUsers => {
const studentUsers = { ...previousStudentUsers }
delete studentUsers[user.id]
return studentUsers
: previousSelectedStudentUsers => {
const selectedStudentUsers = {
...previousSelectedStudentUsers,
}
delete selectedStudentUsers[studentUser.id]
return selectedStudentUsers
},
)
}}
Expand All @@ -108,7 +123,7 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
to={generatePath(
paths.teacher.dashboard.tab.classes.class.students
.studentUser._,
{ classId, studentUserId: user.id },
{ classId, studentUserId: studentUser.id },
)}
endIcon={<EditIcon />}
>
Expand All @@ -128,21 +143,24 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
<Stack direction="row" gap={2} justifyContent="end">
{LinkButton<ReleaseStudentsState>({
children: "Release",
disabled: selectButtonDisabled,
to: generatePath(
paths.teacher.dashboard.tab.classes.class.students.release._,
{ classId },
),
state: { studentUsers: Object.values(studentUsers) },
state: { studentUsers: Object.values(selectedStudentUsers) },
})}
{LinkButton<TransferStudentsState>({
children: "Move",
disabled: selectButtonDisabled,
to: generatePath(
paths.teacher.dashboard.tab.classes.class.students.transfer._,
{ classId },
),
state: { studentUsers: Object.values(studentUsers) },
state: { studentUsers: Object.values(selectedStudentUsers) },
})}
<Button
disabled={selectButtonDisabled}
onClick={() => {
setDialog("reset-students-password")
}}
Expand All @@ -152,6 +170,7 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
</Button>
<Button
className="alert"
disabled={selectButtonDisabled}
onClick={() => {
setDialog("delete-students")
}}
Expand All @@ -164,12 +183,12 @@ const StudentTable: FC<StudentTableProps> = ({ classId }) => {
classId={classId}
open={dialog === "reset-students-password"}
onClose={closeDialog}
studentUsers={Object.values(studentUsers)}
studentUsers={Object.values(selectedStudentUsers)}
/>
<DeleteStudentsDialog
open={dialog === "delete-students"}
onClose={closeDialog}
studentUsers={Object.values(studentUsers)}
studentUsers={Object.values(selectedStudentUsers)}
/>
</>
)
Expand Down

0 comments on commit 55b2be3

Please sign in to comment.