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

     1  import React, { useEffect } from "react"
     2  import { SubmissionSort } from "../../Helpers"
     3  import { useActions, useAppState } from "../../overmind"
     4  
     5  
     6  /**
     7   *  TableSort displays a widget that aids in sorting and filtering
     8   *  table contents.
     9   *  The widget modifies contents of the state on user interaction.
    10   *  It is up to each component to use the modified state with
    11   *  sorting and filtering functions based on the modified values.
    12   *  TODO: We could modify the state to react to changes coming from this component.
    13   */
    14  const TableSort = ({ review }: { review: boolean }) => {
    15      const state = useAppState()
    16      const actions = useActions()
    17  
    18      useEffect(() => {
    19          return () => {
    20              // Reset sort state to default when component is unmounted
    21              actions.setSubmissionSort(SubmissionSort.Approved)
    22              actions.setAscending(true)
    23              actions.clearSubmissionFilter()
    24          }
    25      }, [])
    26  
    27      const handleChange = (sort: SubmissionSort) => {
    28          actions.setSubmissionSort(sort)
    29      }
    30  
    31      return (
    32          <div className="p-1 mb-2 bg-dark text-white d-flex flex-row">
    33              <div className="d-inline-flex flex-row justify-content-center">
    34                  <div className="p-2">
    35                      <span>Sort by:</span>
    36                  </div>
    37                  <div className={`${state.sortSubmissionsBy === SubmissionSort.Approved ? "font-weight-bold" : ""} p-2`} role={"button"} onClick={() => handleChange(SubmissionSort.Approved)}>
    38                      Approved
    39                  </div>
    40                  <div className={`${state.sortSubmissionsBy === SubmissionSort.Score ? "font-weight-bold" : ""} p-2`} role={"button"} onClick={() => handleChange(SubmissionSort.Score)}>
    41                      Score
    42                  </div>
    43                  <div className="p-2" role={"button"} onClick={() => actions.setAscending(!state.sortAscending)}>
    44                      <i className={state.sortAscending ? "icon fa fa-caret-down" : "icon fa fa-caret-down fa-rotate-180"} />
    45                  </div>
    46              </div>
    47              <div className="d-inline-flex flex-row">
    48                  <div className="p-2">
    49                      Show:
    50                  </div>
    51                  <div className="p-2" role={"button"} onClick={() => actions.setSubmissionFilter("teachers")}>
    52                      {state.submissionFilters.includes("teachers") ? <del>Teachers</del> : "Teachers"}
    53                  </div>
    54                  <div className="p-2" role={"button"} onClick={() => actions.setSubmissionFilter("approved")}>
    55                      {state.submissionFilters.includes("approved") ? <del>Graded</del> : "Graded"}
    56                  </div>
    57                  {review ?
    58                      <div className="p-2" role={"button"} onClick={() => actions.setSubmissionFilter("released")}>
    59                          {state.submissionFilters.includes("released") ? <del>Released</del> : "Released"}
    60                      </div>
    61                      : null
    62                  }
    63              </div>
    64          </div>
    65      )
    66  }
    67  
    68  export default TableSort