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

     1  import React from "react"
     2  import { Route, Switch, useHistory } from "react-router"
     3  import { Color, getCourseID, isManuallyGraded } from "../Helpers"
     4  import { useActions, useAppState } from "../overmind"
     5  import Card from "../components/Card"
     6  import GroupPage from "./GroupPage"
     7  import Members from "../components/Members"
     8  import RedirectButton from "../components/RedirectButton"
     9  import Results from "../components/Results"
    10  import Assignments from "../components/teacher/Assignments"
    11  import Alerts from "../components/alerts/Alerts"
    12  
    13  const ReviewResults = () => <Results review />
    14  const RegularResults = () => <Results review={false} />
    15  
    16  /* TeacherPage enables routes to be accessed by the teacher only, and displays an overview of the different features available to the teacher. */
    17  const TeacherPage = (): JSX.Element => {
    18      const state = useAppState()
    19      const actions = useActions()
    20      const courseID = getCourseID()
    21      const history = useHistory()
    22      const root = `/course/${courseID}`
    23      const courseHasManualGrading = state.assignments[courseID.toString()]?.some(assignment => isManuallyGraded(assignment))
    24  
    25      const members = {
    26          title: "View Members",
    27          notification: state.pendingEnrollments.length > 0 ? { color: Color.YELLOW, text: "Pending enrollments" } : undefined,
    28          text: "View all students, and approve new enrollments.",
    29          buttonText: "Members", to: `${root}/members`
    30      }
    31      const groups = {
    32          title: "Manage Groups",
    33          notification: state.pendingGroups.length > 0 ? { color: Color.YELLOW, text: "Pending groups" } : undefined,
    34          text: "View, edit or delete course groups.",
    35          buttonText: "Groups", to: `${root}/groups`
    36      }
    37      const results = { title: "View results", text: "View results for all students in the course.", buttonText: "Results", to: `${root}/results` }
    38      const assignments = { title: "Manage Assignments", text: "View and edit assignments.", buttonText: "Assignments", to: `${root}/assignments` }
    39      const updateAssignments = { title: "Update Course Assignments", text: "Fetch assignments from GitHub.", buttonText: "Update Assignments", onclick: () => actions.updateAssignments(courseID) }
    40      const review = { title: "Review Assignments", text: "Review assignments for students.", buttonText: "Review", to: `${root}/review` }
    41  
    42      return (
    43          <div className="box">
    44              <RedirectButton to={root} />
    45              <Alerts />
    46              <div className="row" hidden={history.location.pathname != root}>
    47                  {courseHasManualGrading && <Card {...review} />}
    48                  <Card {...results} />
    49                  <Card {...groups} />
    50                  <Card {...members} />
    51                  <Card {...assignments} />
    52                  <Card {...updateAssignments} />
    53              </div>
    54              <Switch>
    55                  <Route path={`/course/:id/groups`} exact component={GroupPage} />
    56                  <Route path={"/course/:id/members"} component={Members} />
    57                  <Route path={"/course/:id/review"} component={ReviewResults} />
    58                  <Route path={"/course/:id/results"} component={RegularResults} />
    59                  <Route path={"/course/:id/assignments"} component={Assignments} />
    60              </Switch>
    61          </div>
    62      )
    63  }
    64  
    65  export default TeacherPage