frontend/src/components/Scheduler/SchedulerEvents/index.tsx

import React, { useContext, useEffect, useState } from 'react';
import { SchedulerRow } from '../SchedulerRow';
import { LecturesContext } from '../../../contexts/LecturesProvider';
import { Group } from '../../../types';

interface SchedulerEventsProps {
  cellTop: number;
  cellWidth: number;
}

export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
  const { choosenGroups } = useContext(LecturesContext)!;

  const [groupsMappedToEvents, setGroupsMappedToEvents] = useState<any>([]);

  // const groups: Array<Group> = [{ id: "5", day: "4", time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3" },
  // { id: "28", day: "1", time: "13.45", lecturer: "dr Barbara Kołodziejczak", room: "D-3" },
  // { id: "69", day: "4", time: "15.30", lecturer: "dr Karol Gierszewski", room: "A2-3" }];

  interface GroupTimeToEventRowMapping {
    [time: string]: number;
  }

  const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
    '8.15': 0,
    '10.00': 1,
    '11.45': 2,
    '13.45': 3,
    '15.30': 4,
    '17.15': 5,
  };

  useEffect(() => {
    function mapGroupTimeToEventRow(groups: Array<Group>) {
      for (const group of groups) {
        console.log(group);
        const groupTime = group.time;
        const eventRow: number = groupTimeToEventRowMapping[groupTime];
        const groupMappedToEvent: any = {
          id: group.id,
          day: group.day,
          eventRow: eventRow,
          lecturer: group.lecturer,
          room: group.room,
        };
        setGroupsMappedToEvents((groupsMappedToEvents: any) => [...groupsMappedToEvents, groupMappedToEvent]);
      }
      function alternative(groups: Array<Group>) {
        const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({
          id,
          day,
          lecturer,
          room,
          eventRow: groupTimeToEventRowMapping[time],
        }));
        setGroupsMappedToEvents(groupsMapped);
      }
    }
    mapGroupTimeToEventRow(choosenGroups);
  }, [choosenGroups]);

  useEffect(() => {
    console.log(groupsMappedToEvents);
  }, [groupsMappedToEvents]);

  return (
    <div>
      {[...Array(6)].map((_, index) => (
        <SchedulerRow
          key={index}
          groups={groupsMappedToEvents.filter((group: any) => {
            return group.eventRow === index;
          })}
          indexRow={index}
          cellTop={cellTop + (10 + 70 * index)}
          cellWidth={cellWidth}
        />
      ))}
    </div>
  );
};