github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/admin/User.tsx (about)

     1  import React from "react"
     2  import { Enrollment, User as pbUser } from "../../../proto/qf/types_pb"
     3  import { useGrpc } from "../../overmind"
     4  import { EnrollmentStatus, EnrollmentStatusBadge } from "../../Helpers"
     5  
     6  const User = ({ user }: { user: pbUser; hidden: boolean }): JSX.Element => {
     7      const { api } = useGrpc()
     8      const [enrollments, setEnrollments] = React.useState<Enrollment[]>([])
     9      const [showEnrollments, setShowEnrollments] = React.useState<boolean>(false)
    10  
    11      const toggleEnrollments = () => {
    12          setShowEnrollments(!showEnrollments)
    13          if (!enrollments.length) {
    14              getEnrollments()
    15          }
    16      }
    17  
    18      const getEnrollments = () => {
    19          api.client
    20              .getEnrollments({
    21                  FetchMode: { case: "userID", value: user.ID },
    22              })
    23              .then((response) => {
    24                  setEnrollments(response.message.enrollments)
    25              })
    26      }
    27  
    28      const enrollmentsList = enrollments.length ? (
    29          <div>
    30              {enrollments.map((enrollment) => (
    31                  <div key={enrollment.ID.toString()}>
    32                      <span className="badge badge-secondary">
    33                          {enrollment.course?.name}
    34                      </span>{" "}
    35                      <span className={EnrollmentStatusBadge[enrollment.status]}>
    36                          {EnrollmentStatus[enrollment.status]}
    37                      </span>
    38                  </div>
    39              ))}
    40          </div>
    41      ) : (
    42          <div>
    43              <span className="badge badge-secondary">No enrollments</span>
    44          </div>
    45      )
    46  
    47      return (
    48          <div role="button" className="clickable" onClick={toggleEnrollments}>
    49              {user.Name}
    50              {user.IsAdmin ? (
    51                  <span className={"badge badge-primary ml-2"}>Admin</span>
    52              ) : null}
    53              {showEnrollments ? enrollmentsList : null}
    54          </div>
    55      )
    56  }
    57  
    58  export default User