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

     1  import { useHistory } from "react-router"
     2  import { assignmentStatusText, getFormattedTime, getCourseID } from "../Helpers"
     3  import { useAppState } from "../overmind"
     4  import { Submission } from "../../proto/qf/types_pb"
     5  import ProgressBar, { Progress } from "./ProgressBar"
     6  import React from "react"
     7  
     8  
     9  /* Displays the a list of assignments and related submissions for a course */
    10  const CourseLabs = (): JSX.Element => {
    11      const state = useAppState()
    12      const history = useHistory()
    13      const courseID = getCourseID().toString()
    14      const labs: JSX.Element[] = []
    15  
    16      const redirectTo = (assignmentID: bigint) => {
    17          history.push(`/course/${courseID}/lab/${assignmentID.toString()}`)
    18      }
    19  
    20      if (state.assignments[courseID] && state.submissions[courseID]) {
    21          state.assignments[courseID].forEach(assignment => {
    22              const assignmentIndex = assignment.order - 1
    23              // Submissions are indexed by the assignment order.
    24              const submission = state.submissions[courseID][assignmentIndex] ?? new Submission()
    25  
    26              labs.push(
    27                  <li key={assignment.ID.toString()} className="list-group-item border clickable mb-2 labList" onClick={() => redirectTo(assignment.ID)}>
    28                      <div className="row" >
    29                          <div className="col-8">
    30                              <strong>{assignment.name}</strong>
    31                          </div>
    32                          <div className="col-4 text-center">
    33                              <strong>Deadline:</strong>
    34                          </div>
    35                      </div>
    36                      <div className="row" >
    37                          <div className="col-5">
    38                              <ProgressBar courseID={courseID} assignmentIndex={assignmentIndex} submission={submission} type={Progress.LAB} />
    39                          </div>
    40                          <div className="col-3 text-center">
    41                              {assignmentStatusText(assignment, submission)}
    42                          </div>
    43                          <div className="col-4 text-center">
    44                              {getFormattedTime(assignment.deadline)}
    45                          </div>
    46                      </div>
    47                  </li>
    48              )
    49          })
    50      }
    51      return (
    52          <ul className="list-group">
    53              {labs}
    54          </ul>
    55      )
    56  }
    57  
    58  export default CourseLabs