change change change

src/components/Scheduler.tsx

@@ -1,11 +1,10 @@
-import React, { useEffect, MouseEvent, useRef } from 'react';
+import React, { useEffect, MouseEvent, useRef, useCallback, useLayoutEffect } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
 import styled from 'styled-components/macro';
 
 const SchedulerWrapper = styled.div`
-  display: flex;
   border-collapse: collapse;
   flex: 1;
   background-color: white;
@@ -66,30 +65,46 @@ export const Scheduler = () => {
 
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [wrapperHeight, setWrapperHeight] = useState(0);
+  const [, updateState] = useState<any>();
+  const forceUpdate = useCallback(() => updateState({}), []);
+
 
   useEffect(() => {
     const handleResize = () => {
-      if (cellRef.current && wrapperRef.current) {
+      if (cellRef.current) {
         setCellWidth(cellRef.current.getBoundingClientRect().width);
         setCellTop(cellRef.current.getBoundingClientRect().top);
-        setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
+        cellRef.current.style.backgroundColor = "blue";
+        console.log("XDDD")
       }
+
     };
     handleResize();
-    window.addEventListener('resize', handleResize);
   }, []);
 
+  useEffect(() => {
+    const handleWrapperResize = () => {
+      if (wrapperRef.current) {
+        setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
+      }
+    }
+    window.addEventListener('resize', handleWrapperResize);
+    return () => window.removeEventListener('resize', handleWrapperResize);
+
+  }, [])
+
+
   return (
     <>
       <SchedulerWrapper ref={wrapperRef}>
         <TableHead>
           {days.map((day, indexCell) =>
             indexCell === 0 ? (
-              <TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} ref={cellRef}>
+              <TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} >
                 {day}
               </TableCell>
             ) : (
-                <TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell} ref={cellRef}>
+                <TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell}>
                   {day}
                 </TableCell>
               ),
@@ -102,6 +117,9 @@ export const Scheduler = () => {
                 indexCell === 0 ? (
                   <TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
                     {value}
+                  </TableCell>)
+                  : (indexRow === 0 && indexCell === 1) ? (<TableCell height={wrapperHeight / 26} ref={cellRef} key={`${indexRow}${indexCell}`}>
+                    {value}
                   </TableCell>
                   ) : indexRow === 23 ? (
                     <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>

src/components/SchedulerEvents.tsx

@@ -11,7 +11,7 @@ interface SchedulerEventsProps {
 
 export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
   const { basket } = useContext(coursesContext)!;
-
+  console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
 
   interface GroupTimeToEventRowMapping {
@@ -33,7 +33,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
       const merged = [...classes, ...lectures];
 
       //deleted if statement, maybe it is needed
-      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
+      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name, type }) => ({
         id,
         day,
         lecturer,
@@ -56,17 +56,17 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
           indexRow={index}
           cellTop={
             index === 0
-              ? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
+              ? cellTop + cellHeight/2
               : index === 1
                 ? cellTop + (cellHeight + cellHeight * 2 * index)
                 : index === 2
-              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
-              : index === 3
-              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
-              : index === 4
                   ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
+                  : index === 3
+                    ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
+                    : index === 4
+                      ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight)
                       : index === 5
-              ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
+                        ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 2)
                         : 0
           }
           cellWidth={cellWidth}

src/components/SchedulerRow.tsx

@@ -31,7 +31,7 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   top: ${({ cellTop }) => cellTop}px;
   left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
-  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
+  height: ${({ cellHeight }) => cellHeight * 3}px;
   z-index: 2;
 `;
 
@@ -48,7 +48,7 @@ const Classes = styled.div<ClassesProps>`
   z-index: 2;
   border-radius: 10px;
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
-  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
+  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px;
   padding-left: 10px;
   text-align: left;
   background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
@@ -82,7 +82,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
   const open = Boolean(anchorEl);
 
   return (
-    <>
+    <div>
       {[...Array(5)].map((_, eventIndex) => (
         <SchedulerEvent
           eventIndex={eventIndex}
@@ -142,6 +142,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
           )}
         </SchedulerEvent>
       ))}
-    </>
+    </div>
   );
 };