Simplified import starting with React. Added name property to group object passed to table. changed group interface shape.

;

;

l
;
d

src/components/Dropdown.tsx

@@ -83,7 +83,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
       const name = target.textContent;
 
       //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
-      const course: Basket = { name: name.trim(), id: parseInt(id), lecture: null, classes: null };
+      const course: Basket = { name: name.trim(), id: parseInt(id) };
 
       addToBasket(course);
       setOpen(false);

src/components/SchedulerEvents.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, MouseEvent } from 'react';
 import { SchedulerRow } from './SchedulerRow';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Group, Basket } from '../types';
@@ -7,7 +7,7 @@ interface SchedulerEventsProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: React.MouseEvent) => void
+  onClick: (e: MouseEvent) => void;
 }
 
 export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
@@ -29,17 +29,24 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
 
   useEffect(() => {
     function mapGroupTimeToEventRow(basket: Array<Basket>) {
-      const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array<Group>;
-      const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array<Group>;
+      const classes = basket.map(({ classes, name }) => ({ ...classes, name })).filter((cl) => cl !== null) as Array<
+        Group & { name: string }
+      >;
+      const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })).filter((lec) => lec !== null) as Array<
+        Group & { name: string }
+      >;
       const merged = [...classes, ...lectures];
 
+      console.log('merged');
+      console.log(merged);
       if (merged.length >= 1) {
-        const groupsMapped = merged.map(({ id, day, lecturer, room, time }) => ({
+        const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
           id,
           day,
           lecturer,
           room,
           eventRow: groupTimeToEventRowMapping[time],
+          name,
         }));
         setChoosenGroupsMappedToEvents(groupsMapped);
       }

src/components/SchedulerRow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { Group } from '../types';
 import styled from 'styled-components';
 
@@ -21,17 +21,17 @@ const ClassDiv = styled.div<SchedulerEventProps>`
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   z-index: 2;
   border-radius: 10px;
-  padding-left:5px;
+  padding-left: 5px;
   background-color: rgb(100, 181, 246);
 `;
 
 interface SchedulerRowProps {
-  groups: Array<Group>;
+  groups: Array<Group & { name: string }>;
   indexRow: number;
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: React.MouseEvent) => void;
+  onClick: (e: MouseEvent) => void;
 }
 
 export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
@@ -58,7 +58,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
                   id={`eventRow${indexRow}eventCol${eventIndex}`}
                   key={index}
                 >
-                  {groups[index]?.lecturer}
+                  {groups[index].name}
                 </ClassDiv>
               ),
           )}