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