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

     1  
     2  import React, { useState } from "react"
     3  import { Review } from "../../../proto/qf/types_pb"
     4  import { useActions, useAppState } from "../../overmind"
     5  import CriterionComment from "./Comment"
     6  
     7  
     8  const SummaryFeedback = ({ review }: { review: Review }) => {
     9      const state = useAppState()
    10      const actions = useActions()
    11      const [editing, setEditing] = useState<boolean>(false)
    12  
    13      const summaryFeedback = <td colSpan={3}><CriterionComment comment={review.feedback.length > 0 ? review.feedback : "No summary feedback"} /></td>
    14  
    15      if (!state.isTeacher) {
    16          return <tr>{summaryFeedback}</tr>
    17      }
    18  
    19      const handleChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
    20          const { value } = event.currentTarget
    21          setEditing(false)
    22          // Exit early if the value is unchanged
    23          if (value === review.feedback) {
    24              return
    25          }
    26          actions.review.updateFeedback({ feedback: value })
    27      }
    28  
    29      return (
    30          <>
    31              <tr onClick={() => setEditing(true)}>
    32                  {summaryFeedback}
    33              </tr>
    34              {editing &&
    35                  <tr>
    36                      <td colSpan={3}>
    37                          <textarea rows={20} autoFocus onBlur={handleChange} defaultValue={review.feedback} className="form-control" />
    38                      </td>
    39                  </tr>
    40              }
    41          </>
    42      )
    43  }
    44  
    45  export default SummaryFeedback