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

     1  import React from "react"
     2  import { useAppState } from "../../overmind"
     3  import { Assignment, Submission_Status } from "../../../proto/qf/types_pb"
     4  import ProgressBar, { Progress } from "../ProgressBar"
     5  import NavBarLink, { NavLink } from "./NavBarLink"
     6  import { useHistory } from "react-router"
     7  import { Status } from "../../consts"
     8  
     9  
    10  const NavBarLabs = (): JSX.Element | null => {
    11      const state = useAppState()
    12      const history = useHistory()
    13  
    14      if (!state.assignments[state.activeCourse.toString()] || !state.submissions[state.activeCourse.toString()]) {
    15          return null
    16      }
    17  
    18      const submissionIcon = (assignment: Assignment) => {
    19          const submission = state.submissions[state.activeCourse.toString()][assignment.order - 1]
    20          return (
    21              <div>
    22                  {assignment.isGroupLab && <i className={"fa fa-users"} title={"Group assignment"} />}
    23                  {submission?.status === Submission_Status.APPROVED && <i className="fa fa-check ml-2" />}
    24              </div>
    25          )
    26      }
    27  
    28      const getLinkClass = (assignment: Assignment) => {
    29          return BigInt(state.selectedAssignmentID) === assignment.ID ? Status.Active : ""
    30      }
    31  
    32      const labLinks = state.assignments[state.activeCourse.toString()]?.map((assignment, index) => {
    33          const link: NavLink = { link: { text: assignment.name, to: `/course/${state.activeCourse}/lab/${assignment.ID}` }, jsx: submissionIcon(assignment) }
    34          return (
    35              <div className={getLinkClass(assignment)} style={{ position: "relative" }} key={assignment.ID.toString()} onClick={() => { history.push(link.link.to) }}>
    36                  <NavBarLink link={link.link} jsx={link.jsx} />
    37                  <ProgressBar courseID={state.activeCourse.toString()} assignmentIndex={index} type={Progress.NAV} />
    38              </div>
    39          )
    40      })
    41  
    42      return <>{labLinks}</>
    43  }
    44  
    45  export default NavBarLabs