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

     1  import React from "react"
     2  import { useHistory } from "react-router"
     3  import { Enrollment } from "../../../proto/qf/types_pb"
     4  import { Status } from "../../consts"
     5  import { isStudent, isTeacher } from "../../Helpers"
     6  import { useActions, useAppState } from "../../overmind"
     7  import NavBarLabs from "./NavBarLabs"
     8  import NavBarTeacher from "./NavBarTeacher"
     9  
    10  
    11  const NavBarCourse = ({ enrollment }: { enrollment: Enrollment }): JSX.Element => {
    12      const state = useAppState()
    13      const actions = useActions()
    14      const history = useHistory()
    15      // Determines if a dropdown should be shown for the course
    16      const active = state.activeCourse === enrollment.courseID
    17  
    18      const navigateTo = (courseID: bigint) => {
    19          if (active) {
    20              // Collapse active course dropdown
    21              actions.setActiveCourse(BigInt(0))
    22              history.push("/")
    23          } else {
    24              history.push(`/course/${courseID}`)
    25              actions.setActiveCourse(courseID)
    26          }
    27      }
    28  
    29      return (
    30          <>
    31              <li role={"button"} onClick={() => navigateTo(enrollment.courseID)} className="activeClass">
    32                  <div className="col" id="title">
    33                      {enrollment.course?.code}
    34                  </div>
    35                  <div className="col" title="icon">
    36                      <i className={active ? " icon fa fa-caret-down fa-lg float-right" : " icon fa fa-caret-down fa-rotate-90 fa-lg float-right"} />
    37                  </div>
    38              </li>
    39              <div className={active ? Status.ActiveLab : Status.Inactive}>
    40                  {active && isStudent(enrollment) ? <NavBarLabs /> : null}
    41                  {active && isTeacher(enrollment) ? <NavBarTeacher /> : null}
    42              </div>
    43          </>
    44      )
    45  }
    46  
    47  export default NavBarCourse