export default function ClassifiedReportContents()

in src/client/components/classified_report_contents.tsx [15:64]
28 lines of code
6 McCabe index (conditional complexity)

export default function ClassifiedReportContents({ index, report }: ClassifiedReportContentsProps) {
  const [labels, setLabels] = useState(report.labels);
  const [action, setAction] = useState(report.action);
  const [expanded, setExpanded] = useState(false);

  const handleOnActionComplete = (mutationResult: actionResultEntry) => {
    if ("label" in mutationResult) {
      handleAddLabelSuccess(mutationResult.label);
    }

    if ("action" in mutationResult) {
      handleSetActionSuccess(mutationResult.action);
    }
  };

  const handleAddLabelSuccess = (newLabel) => {
    setLabels([...labels, newLabel]);
  };

  const handleSetActionSuccess = (newAction) => {
    setAction(newAction);
  };

  const predictionClassName = predictClassName(report.prediction, report.prob);

  const addLabelMutation = useMutation({
    mutationFn: async (label: string) => {
      return await jsonPostMutation(report.uuid, "/api/add_label.json", {
        label: label,
      });
    },
    onSuccess: (_, variables) => handleOnActionComplete({ action: variables, label: variables }),
  });

  function predictClassName(prediction, probability) {
    if (prediction === "valid" && probability > 0.6) {
      return "valid";
    } else if (prediction === "invalid" && probability > 0.8) {
      return "invalid";
    }
    return "inconclusive";
  }

  const shouldShowTranslation = report.translated_comments && report.translated_from && report.translated_from != "en";
  const itemStyle: React.CSSProperties = action === "hide" ? { display: "none" } : {};

  return (
    <tr key={report.uuid} className="report" style={itemStyle}>
      <td className="toggle">
        <button className="toggle-area" onClick={() => setExpanded(!expanded)}>