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

     1  import React, { useEffect } from "react"
     2  import { Enrollment_UserStatus } from "../../../proto/qf/types_pb"
     3  import { useActions, useAppState } from "../../overmind"
     4  import { hasTeacher } from "../../Helpers"
     5  import { useHistory } from "react-router"
     6  
     7  const ToggleSwitch = () => {
     8      const { activeCourse, enrollmentsByCourseID, status } = useAppState()
     9      const actions = useActions()
    10      const navigate = useHistory()
    11      const [enrollmentStatus, setEnrollmentStatus] =
    12          React.useState<boolean>(false)
    13      const [text, setText] = React.useState<string>("")
    14  
    15      useEffect(() => {
    16          if (activeCourse && enrollmentsByCourseID[activeCourse.toString()]) {
    17              updateStatus(isTeacher())
    18          }
    19      })
    20  
    21      const isTeacher = () => {
    22          return (
    23              enrollmentsByCourseID[activeCourse.toString()].status ===
    24              Enrollment_UserStatus.TEACHER
    25          )
    26      }
    27  
    28      const updateStatus = (isTeacher: boolean) => {
    29          setEnrollmentStatus(isTeacher)
    30          setText(isTeacher ? "T" : "S")
    31      }
    32  
    33      const switchView = () => {
    34          actions.changeView(activeCourse).then(() => {
    35              updateStatus(isTeacher())
    36              navigate.push("/course/" + activeCourse)
    37          })
    38      }
    39  
    40      if (!hasTeacher(status[activeCourse.toString()])) {
    41          return null
    42      }
    43  
    44      return (
    45          <label className="switch" data-toggle="tooltip" title="Toggle between student and teacher view">
    46              <input type="checkbox" readOnly checked={enrollmentStatus} />
    47              <span className="slider round" onClick={switchView}>
    48                  <span className="toggle">{text}</span>
    49              </span>
    50          </label>
    51      )
    52  }
    53  
    54  export default ToggleSwitch