src/components/SendResultsButton.tsx - master - grigorin/InterviewHelper

src/components/SendResultsButton.tsx
112 строк3 KB
Grigory Nevarov
Initial commit: CTO Interview Helper app with React, TypeScript, Redux
30 ноя 2025, 20:47
30 ноя 2025, 20:470680f45
import { useState } from "react";
import type { InterviewState } from "../store/interviewSlice";
import "./sendButton.css";

interface SendResultsButtonProps {
  results: InterviewState["results"];
  onClear: () => void;
}

interface ResultRow {
  group: string;
  subcategory: string;
  topic: string;
  notes: string;
  score: string;
}

const buildRows = (results: InterviewState["results"]): ResultRow[] => {
  const rows: ResultRow[] = [];

  Object.entries(results).forEach(([group, subcategories]) => {
    Object.entries(subcategories).forEach(([subcategory, topics]) => {
      Object.entries(topics).forEach(([topic, value]) => {
        if (!value.notes && value.score === null) {
          return;
        }
        rows.push({
          group,
          subcategory,
          topic,
          notes: value.notes || "—",
          score: value.score !== null ? value.score.toString() : "—",
        });
      });
    });
  });

  return rows;
};

export const SendResultsButton = ({ results, onClear }: SendResultsButtonProps) => {
  const [visible, setVisible] = useState(false);
  const rows = buildRows(results);
  const isDisabled = !rows.length;

  return (
    <div className="send-block">
      <div className="send-block__actions">
        <button
          type="button"
          className="send-button"
          disabled={isDisabled}
          onClick={() => setVisible((prev) => !prev)}
        >
          {visible ? "Скрыть итоги" : "Показать результаты"}
        </button>
        <button
          type="button"
          className="clear-button"
          disabled={isDisabled}
          onClick={() => {
            if (isDisabled) {
              return;
            }
            const confirmed = window.confirm(
              "Очистить все заметки и оценки? Действие нельзя отменить.",
            );
            if (confirmed) {
              onClear();
              setVisible(false);
            }
          }}
        >
          Очистить результаты
        </button>
      </div>
      {!rows.length && (
        <p className="send-status">
          Добавьте заметки или оценки хотя бы по одной теме, чтобы сформировать итоговую
          таблицу.
        </p>
      )}

      {visible && rows.length > 0 && (
        <div className="results-table__wrapper">
          <table className="results-table">
            <thead>
              <tr>
                <th>Группа</th>
                <th>Подгруппа</th>
                <th>Тема</th>
                <th>Комментарий</th>
                <th>Оценка</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={`${row.group}-${row.subcategory}-${row.topic}`}>
                  <td>{row.group}</td>
                  <td>{row.subcategory}</td>
                  <td>{row.topic}</td>
                  <td>{row.notes}</td>
                  <td>{row.score}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};