Untitled

import React, { useState } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import './Table.css';

const ItemType = "ITEM";

type Period = {
  weekType: string;
  weekDay: string;
  time: string;
  period: number;
  note: string;
  classId: number | null;
  subjectId: string | null;
  customSubjectName: string | null;
};

type DraggableCellProps = {
  data: Period;
  rowIndex: number;
  cellIndex: number;
  onMove: (fromData: Period, toData: Period, fromRowIndex: number, fromCellIndex: number, toRowIndex: number, toCellIndex: number) => void;
};

const DraggableCell: React.FC<DraggableCellProps> = ({ data, onMove, rowIndex, cellIndex }) => {
  // ... previous logic
  const [, ref] = useDrag({
    type: ItemType,
    item: { data, rowIndex, cellIndex }
  });

  const [, drop] = useDrop({
    accept: ItemType,
    drop: (item: any) => {
      onMove(item.data, data, item.rowIndex, item.cellIndex, rowIndex, cellIndex);
    }
  });

  return (
    <td ref={(node) => ref(drop(node))}>
      {data.subjectId}
      {/* You can display more data properties here */}
    </td>
  );
};

function transpose<T>(matrix: T[][]): T[][] {
  return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
}

const Table: React.FC = () => {
  const fetchedData = JSON.parse("{\"MONDAY\":[{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":7801,\"subjectId\":\"8\",\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"MONDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"TUESDAY\":[{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":420420,\"subjectId\":\"10\",\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"TUESDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"WEDNESDAY\":[{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"WEDNESDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"THURSDAY\":[{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"THURSDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}],\"FRIDAY\":[{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"07:10\",\"period\":0,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"08:00\",\"period\":1,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"08:50\",\"period\":2,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"09:45\",\"period\":3,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"10:40\",\"period\":4,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"11:30\",\"period\":5,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"12:20\",\"period\":6,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"13:10\",\"period\":7,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"14:00\",\"period\":8,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"14:50\",\"period\":9,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"15:45\",\"period\":10,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"16:40\",\"period\":11,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"17:30\",\"period\":12,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"18:20\",\"period\":13,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null},{\"weekType\":\"A\",\"weekDay\":\"FRIDAY\",\"time\":\"19:10\",\"period\":14,\"note\":\"\",\"classId\":null,\"subjectId\":null,\"customSubjectName\":null}]}")
  const daysOrder = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY"];

  let matrix = daysOrder.map(day => fetchedData[day]);
  matrix = transpose(matrix)

  const [schedule, setSchedule] = useState(matrix)

  const handleMove = (
    fromData: Period,
    toData: Period,
    fromRowIndex: number,
    fromCellIndex: number,
    toRowIndex: number,
    toCellIndex: number
  ) => {

    let newMatrix = [...schedule]

    const tempData = {
      subjectId: newMatrix[fromRowIndex][fromCellIndex].subjectId,
      classId: newMatrix[fromRowIndex][fromCellIndex].classId,
      customSubjectName: newMatrix[fromRowIndex][fromCellIndex].customSubjectName,
      note: newMatrix[fromRowIndex][fromCellIndex].note
    };

    newMatrix[fromRowIndex][fromCellIndex].subjectId = newMatrix[toRowIndex][toCellIndex].subjectId;
    newMatrix[fromRowIndex][fromCellIndex].classId = newMatrix[toRowIndex][toCellIndex].classId;
    newMatrix[fromRowIndex][fromCellIndex].customSubjectName = newMatrix[toRowIndex][toCellIndex].customSubjectName;
    newMatrix[fromRowIndex][fromCellIndex].note = newMatrix[toRowIndex][toCellIndex].note;

    newMatrix[toRowIndex][toCellIndex].subjectId = tempData.subjectId;
    newMatrix[toRowIndex][toCellIndex].classId = tempData.classId;
    newMatrix[toRowIndex][toCellIndex].customSubjectName = tempData.customSubjectName;
    newMatrix[toRowIndex][toCellIndex].note = tempData.note;

    console.log(transpose([...newMatrix]));
    setSchedule(newMatrix)
    return newMatrix;
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <table>
        <thead>
        <tr>
          {schedule[0].map((period: Period, index: number) => (
            <th key={index}>{period.weekDay}</th>
          ))}
        </tr>
        </thead>
        <tbody>
        {schedule.map((row: Period[], rowIndex: number) => (
          <tr key={rowIndex}>
            {row.map((cellData: Period, cellIndex: number) => (
              <DraggableCell key={cellData.weekDay + rowIndex + cellIndex} data={cellData} onMove={handleMove} rowIndex={rowIndex} cellIndex={cellIndex} />
            ))}
          </tr>
        ))}
        </tbody>
      </table>
    </DndProvider>
  );
};

export default Table