Student credentials table

[faucomte97]

This change is 

[SKairinos]

Reviewed 7 of 8 files at r1, all commit messages.
Reviewable status: 7 of 8 files reviewed, 8 unresolved discussions (waiting on @faucomte97)

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 19 at r1 (raw file):

    classId: Class["id"]
  }
> = ({ classId, ...state }) => {

unpack state

{ classId, flow, students }

Code quote:

{ classId, ...state }

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 24 at r1 (raw file):

      {/*TODO: Add warning notification here which includes button to print
       reminder cards.*/}
      {state.flow === "create" && (

replace the 3 flow checks with a dict index.

<pages.Section>
{{
create: <>...</>,
"reset-single": <>...</>,
"reset-multiple": <>...</>,
}[flow]}
...
</pages.Section>

Code quote:

state.flow === "create"

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 27 at r1 (raw file):

        <>
          <Typography>
            The following credentials have been created for your class. When

I think we should say "for class {klass.name} ({classId})", like we do in the other flows

Code quote:

for your class.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 66 at r1 (raw file):

      )}
      <StudentCredentialsTable classId={classId} students={state.students} />
      {/*TODO: This used to be a button, check if it being a link is OK*/}

Remove comment. This is OK.

Code quote:

{/*TODO: This used to be a button, check if it being a link is OK*/}

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 70 at r1 (raw file):

        className="back-to"
        to={generatePath(paths.teacher.dashboard.tab.classes.class._, {
          classId: klass.id,

simply replace with classId

Code quote:

classId: klass.id,

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 80 at r1 (raw file):

export interface StudentsCredentialsState {
  flow: "create" | "reset-unique" | "reset-multiple"

"reset-single"

technically, multiple is still unique.

Code quote:

"reset-unique"

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 99 at r1 (raw file):

  const { classId } = params

  return !state || !state.students || !state.students.length || !state.flow ? (

Invert it to remove that not operator and simplify the check

state && state.students && state.students.length && state.flow

Code quote:

!state || !state.students || !state.students.length || !state.flow

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 110 at r1 (raw file):

      classId={classId}
      flow={state.flow}
      students={state.students}

Simply replace with {...state}. No need to do it prop by prop.

Code quote:

      flow={state.flow}
      students={state.students}

[SKairinos]

Reviewable status: 7 of 8 files reviewed, 14 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 14 at r1 (raw file):

} from "@react-pdf/renderer"
import { Print as PrintIcon, SaveAlt as SaveAltIcon } from "@mui/icons-material"
import React, { type FC } from "react"

delete this namespace import and instead import only what you need (like you did with FC)

Code quote:

React

---

src/components/StudentCredentialsTable.tsx line 19 at r1 (raw file):

import { primary } from "codeforlife/theme/colors"

import CflLogo from "../images/logo_cfl.png"

CflLogoImage (always end with "Image"). We do the same with icons (always ends with "Icon")

Code quote:

CflLogo

---

src/components/StudentCredentialsTable.tsx line 26 at r1 (raw file):

  student: Pick<Student, "id" | "auto_gen_password"> & {
    user: Pick<User, "id" | "first_name" | "password">
  },

Replace with StudentCredentialsTableProps["students"][number]. This gives you the same thing (one out of the array) without having to redefine types.

Code quote:

  student: Pick<Student, "id" | "auto_gen_password"> & {
    user: Pick<User, "id" | "first_name" | "password">
  },

---

src/components/StudentCredentialsTable.tsx line 37 at r1 (raw file):

}

const PDFstyles = StyleSheet.create({

since it's an object and not a component: pdfStyles
also, since it's only used in StudentCredentialsPDF, just make it a local variable in that component (and not a global one)

---

src/components/StudentCredentialsTable.tsx line 91 at r1 (raw file):

  students,
}) => {
  const classLoginLink = generatePath(paths.login.student.class._, { classId })

already defined in parent. don't redefine, just pass in as props instead

Code quote:

const classLoginLink = generatePath(paths.login.student.class._, { classId })

---

src/components/StudentCredentialsTable.tsx line 145 at r1 (raw file):

    return csvContent
  }
  const classLoginLink = generatePath(paths.login.student.class._, { classId })

already defined in parent. don't redefine, just pass in as props instead

Code quote:

const classLoginLink = generatePath(paths.login.student.class._, { classId })

[SKairinos]

Reviewable status: 7 of 8 files reviewed, 15 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 195 at r1 (raw file):

          { colSpan: 2, children: "Option 1 Login details", width: "46%" },
          { sx: { background: "white" }, children: "", width: "8%" },
          { children: "Option 2 Login links" },

can just simplify to "Option 2 Login links" if it's just the children prop being used

Code quote:

{ children: "Option 2 Login links" }

[SKairinos]

Reviewable status: 7 of 8 files reviewed, 17 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 215 at r1 (raw file):

              style={{
                color: "white",
                backgroundColor: primary[500],

this should work instead "primary.main". May need to swap style with sx. Can then delete the primary import.

Code quote:

primary[500]

---

src/components/StudentCredentialsTable.tsx line 231 at r1 (raw file):

        <tables.BodyRow>
          <tables.Cell
            sx={{ background: "#9a9c9e", color: "white !important" }}

DRY. Instead, create a local variable (not global) called headerCellSx.

import {type SxProps} from "@mui/material"
...
const headerCellSx: SxProps = {...}
...
<tables.Cell  sx={headerCellSx}/>

Code quote:

{ background: "#9a9c9e", color: "white !important" }

[faucomte97]

Reviewable status: 7 of 8 files reviewed, 17 unresolved discussions (waiting on @faucomte97 and @SKairinos)

---

src/components/StudentCredentialsTable.tsx line 14 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

delete this namespace import and instead import only what you need (like you did with FC)

Done.

---

src/components/StudentCredentialsTable.tsx line 19 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

CflLogoImage (always end with "Image"). We do the same with icons (always ends with "Icon")

I'm confused, none of the other images end with "Image"?

---

src/components/StudentCredentialsTable.tsx line 26 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Replace with StudentCredentialsTableProps["students"][number]. This gives you the same thing (one out of the array) without having to redefine types.

Done.

---

src/components/StudentCredentialsTable.tsx line 37 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

since it's an object and not a component: pdfStyles
also, since it's only used in StudentCredentialsPDF, just make it a local variable in that component (and not a global one)

Done.

---

src/components/StudentCredentialsTable.tsx line 91 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

already defined in parent. don't redefine, just pass in as props instead

Done.

---

src/components/StudentCredentialsTable.tsx line 145 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

already defined in parent. don't redefine, just pass in as props instead

Done.

---

src/components/StudentCredentialsTable.tsx line 195 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

can just simplify to "Option 2 Login links" if it's just the children prop being used

Done.

---

src/components/StudentCredentialsTable.tsx line 215 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

this should work instead "primary.main". May need to swap style with sx. Can then delete the primary import.

Done.

---

src/components/StudentCredentialsTable.tsx line 231 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

DRY. Instead, create a local variable (not global) called headerCellSx.

import {type SxProps} from "@mui/material"
...
const headerCellSx: SxProps = {...}
...
<tables.Cell  sx={headerCellSx}/>

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 19 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

unpack state

{ classId, flow, students }

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 24 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

replace the 3 flow checks with a dict index.

<pages.Section>
{{
create: <>...</>,
"reset-single": <>...</>,
"reset-multiple": <>...</>,
}[flow]}
...
</pages.Section>

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 27 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

I think we should say "for class {klass.name} ({classId})", like we do in the other flows

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 66 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Remove comment. This is OK.

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 70 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

simply replace with classId

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 80 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

"reset-single"

technically, multiple is still unique.

I meant more like reset a unique student but sure

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 99 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Invert it to remove that not operator and simplify the check

state && state.students && state.students.length && state.flow

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 110 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Simply replace with {...state}. No need to do it prop by prop.

Not sure why but it complains about this if I do that

[SKairinos]

Reviewed 4 of 5 files at r2.
Reviewable status: 9 of 10 files reviewed, 6 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 19 at r1 (raw file):

Previously, faucomte97 (Florian Aucomte) wrote…

I'm confused, none of the other images end with "Image"?

We should make them. An over site on my part, then.

---

src/pages/teacherDashboard/classes/releaseStudents/ReleaseStudents.tsx line 83 at r2 (raw file):

  })

  return !(state && state.studentUsers && state.studentUsers.length) ? (

delete the ! and just invert the if-else returns

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 110 at r1 (raw file):

Previously, faucomte97 (Florian Aucomte) wrote…

Not sure why but it complains about this if I do that

Ahh! That's right! State contains other values so you can't unpack the whole state. Nvm. You were originally correct.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 74 at r2 (raw file):

        className="back-to"
        to={generatePath(paths.teacher.dashboard.tab.classes.class._, {
          classId: classId,

just { classId } not { classId: classId }. They are equivalent, but shorter syntax

Code quote:

classId: classId,

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 103 at r2 (raw file):

  const { classId } = params

  return !(state && state.students && state.students.length && state.flow) ? (

delete the ! and just invert the if-else returns

---

src/pages/teacherDashboard/classes/transferStudents/TransferStudents.tsx line 101 at r2 (raw file):

  })

  return !(state && state.studentUsers && state.studentUsers.length) ? (

delete the ! and just invert the if-else returns

[SKairinos]

Reviewable status: 9 of 10 files reviewed, 9 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 148 at r2 (raw file):

  const generateCSV: (
    students: StudentCredentialsTableProps["students"],
    classLoginLink: string,

unnecessary args. variables are already in scope

Code quote:

    students: StudentCredentialsTableProps["students"],
    classLoginLink: string,

---

src/components/StudentCredentialsTable.tsx line 149 at r2 (raw file):

    students: StudentCredentialsTableProps["students"],
    classLoginLink: string,
  ) => string = (students, classLoginLink) => {

at the top of this func, create an array called lines and use join to the doc.

[...].join("\n")

---

src/components/StudentCredentialsTable.tsx line 150 at r2 (raw file):

    classLoginLink: string,
  ) => string = (students, classLoginLink) => {
    let csvContent = "Name,Password,Class Link,Login URL\n"

use join to create CSV. also use the result to init list

const list = [["Name", ...].join(",")]

---

src/components/StudentCredentialsTable.tsx line 152 at r2 (raw file):

    let csvContent = "Name,Password,Class Link,Login URL\n"
    students.forEach(student => {
      csvContent += `${student.user.first_name},${student.user.password},${classLoginLink},${makeAutoLoginLink(classLoginLink, student)}\n`

use join to create CSV. add joined string to lines

[...].join(",")

Code quote:

`${student.user.first_name},${student.user.password},${classLoginLink},${makeAutoLoginLink(classLoginLink, student)}\n`

[SKairinos]

Reviewable status: 9 of 10 files reviewed, 10 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 118 at r2 (raw file):

        linkRef.current.href = url
        linkRef.current.click()
        URL.revokeObjectURL(url)

should be outside of if, like the csv download

Code quote:

URL.revokeObjectURL(url)

[SKairinos]

Reviewable status: 9 of 10 files reviewed, 11 unresolved discussions (waiting on @faucomte97)

---

src/components/StudentCredentialsTable.tsx line 72 at r2 (raw file):

            <Image source={CflLogo} src={CflLogo} style={pdfStyles.image} />
            <View>
              {/*TODO: Auto login link is too long and doesn't fit in PDF.*/}

Let's try and fix this now with these suggestions. If still stuck, then let's leave it.

[faucomte97]

Reviewable status: 5 of 64 files reviewed, 11 unresolved discussions (waiting on @SKairinos)

---

src/components/StudentCredentialsTable.tsx line 19 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

We should make them. An over site on my part, then.

Done.

---

src/pages/teacherDashboard/classes/releaseStudents/ReleaseStudents.tsx line 83 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

delete the ! and just invert the if-else returns

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 74 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

just { classId } not { classId: classId }. They are equivalent, but shorter syntax

Done.

---

src/pages/teacherDashboard/classes/studentsCredentials/StudentsCredentials.tsx line 103 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

delete the ! and just invert the if-else returns

Done.

---

src/pages/teacherDashboard/classes/transferStudents/TransferStudents.tsx line 101 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

delete the ! and just invert the if-else returns

Done.

[faucomte97]

Reviewable status: 5 of 65 files reviewed, 11 unresolved discussions (waiting on @faucomte97 and @SKairinos)

---

src/components/StudentCredentialsTable.tsx line 72 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Let's try and fix this now with these suggestions. If still stuck, then let's leave it.

Done.

---

src/components/StudentCredentialsTable.tsx line 118 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

should be outside of if, like the csv download

Done.

---

src/components/StudentCredentialsTable.tsx line 148 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

unnecessary args. variables are already in scope

Done.

---

src/components/StudentCredentialsTable.tsx line 149 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

at the top of this func, create an array called lines and use join to the doc.

[...].join("\n")

Done.

---

src/components/StudentCredentialsTable.tsx line 150 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

use join to create CSV. also use the result to init list

const list = [["Name", ...].join(",")]

Done.

---

src/components/StudentCredentialsTable.tsx line 152 at r2 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

use join to create CSV. add joined string to lines

[...].join(",")

Done.

[SKairinos]

Reviewed 22 of 59 files at r4, 35 of 59 files at r5.
Reviewable status: 40 of 65 files reviewed, 11 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 14 of 59 files at r5, 3 of 10 files at r6.
Reviewable status: 57 of 65 files reviewed, 7 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 1 of 59 files at r5, 6 of 10 files at r6.
Reviewable status: 64 of 65 files reviewed, 7 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 1 of 10 files at r6, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @faucomte97)

[cfl-bot]

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀