From 96ed785c291a0207bba989a517775e1df3b9a565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Thu, 19 Nov 2020 21:57:34 +0100
Subject: [PATCH] table and events finally working :')

---
 src/components/Scheduler.tsx       | 103 +++++++++++++----------------
 src/components/SchedulerEvents.tsx |  27 ++++----
 src/components/SchedulerRow.tsx    |  26 ++++----
 3 files changed, 71 insertions(+), 85 deletions(-)

diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index c5d4795..b37e12d 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -8,7 +8,7 @@ const SchedulerWrapper = styled.div`
   border-collapse: collapse;
   flex: 1;
   background-color: white;
-  padding: 5px 15px 5px 5px;
+  padding: 10px 40px 25px 10px;
   border-radius: 5px;
   margin-right: 20px;
   flex-direction: column;
@@ -18,96 +18,84 @@ const SchedulerWrapper = styled.div`
 `;
 
 const TableBody = styled.div`
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
+  height: calc(100% * 25 / 26);
 `;
 
 const TableRow = styled.div`
   display: flex;
+  height: 100%;
 `;
 
 const TableHead = styled.div`
   display: flex;
   width: 100%;
+  height: calc(100% / 26);
 `;
 
 interface TableCellProps {
-  height: number;
+  cellHeight?: number;
   isHourColumn?: boolean;
 }
 
 const TableCell = styled.div<TableCellProps>`
-  height: ${({ height }) => height}px;
   border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
   border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
-  border-color: rgb(242, 243, 245);  
-  margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
+  border-color: rgb(242, 243, 245);
   display: flex;
   align-items: center;
-  justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'};
-  flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'};
-  margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'};
-  font-size:  0.75vw;
+  justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
+  flex: ${({ isHourColumn }) => (isHourColumn ? '1' : '5')};
+  margin-right: ${({ isHourColumn }) => (isHourColumn ? '10px' : '0px')};
+  margin-top: ${({ isHourColumn, cellHeight }) => (isHourColumn ? `-${cellHeight}px` : '0px')};
+  font-size: 0.75vw;
   user-select: none;
-  border-collapse:collapse;
+  border-collapse: collapse;
   :nth-child(2) {
     border-left: 2px solid rgb(242, 243, 245);
   }
   font-weight: bold;
-  `;
-
+`;
 
 export const Scheduler = () => {
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellTop, setCellTop] = useState(0);
+  const [cellHeight, setCellHeight] = useState(0);
 
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [wrapperHeight, setWrapperHeight] = useState(0);
-  const [, updateState] = useState<any>();
-  const forceUpdate = useCallback(() => updateState({}), []);
-
+  console.log('cell height: ', cellHeight);
 
   useEffect(() => {
     const handleResize = () => {
       if (cellRef.current) {
         setCellWidth(cellRef.current.getBoundingClientRect().width);
         setCellTop(cellRef.current.getBoundingClientRect().top);
-        cellRef.current.style.backgroundColor = "blue";
-        console.log("XDDD")
+        setCellHeight(cellRef.current.getBoundingClientRect().height);
+        cellRef.current.style.backgroundColor = 'blue';
       }
-
     };
     handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('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}>
+      <SchedulerWrapper>
         <TableHead>
           {days.map((day, indexCell) =>
             indexCell === 0 ? (
-              <TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} >
+              <TableCell isHourColumn={true} key={indexCell}>
                 {day}
               </TableCell>
             ) : (
-                <TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell}>
-                  {day}
-                </TableCell>
-              ),
+              <TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
+                {day}
+              </TableCell>
+            ),
           )}
         </TableHead>
         <TableBody>
@@ -115,32 +103,31 @@ export const Scheduler = () => {
             <TableRow key={indexRow}>
               {[hour, '', '', '', '', ''].map((value, indexCell) =>
                 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}`}>
+                  <TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
-                  ) : indexRow === 23 ? (
-                    <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
-                      {value}
-                    </TableCell>
-                  ) : indexCell === 5 ? (
-                    <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
-                      {value}
-                    </TableCell>
-                  ) : indexRow % 2 !== 0 ? (
-                    <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
-                      {value}
-                    </TableCell>
-                  ) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
-                            {value}
-                          </TableCell>
+                ) : indexRow === 0 && indexCell === 1 ? (
+                  <TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
+                ) : indexRow === 23 ? (
+                  <TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
+                ) : indexCell === 5 ? (
+                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
+                ) : indexRow % 2 !== 0 ? (
+                  <TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
+                ) : (
+                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
+                ),
               )}
             </TableRow>
           ))}
+          <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} />
         </TableBody>
-        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 26} />
       </SchedulerWrapper>
     </>
   );
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index 8131d5e..75a7048 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -14,10 +14,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
   console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
 
-  interface GroupTimeToEventRowMapping {
-    [time: string]: number;
-  }
-  const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
+  const groupTimeToEventRowMapping: { [time: string]: number } = {
     '8.15': 0,
     '10.00': 1,
     '11.45': 2,
@@ -56,18 +53,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
           indexRow={index}
           cellTop={
             index === 0
-              ? cellTop + cellHeight/2
+              ? cellHeight / 2
               : index === 1
-                ? cellTop + (cellHeight + cellHeight * 2 * index)
-                : index === 2
-                  ? 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) / 2)
-                        : 0
+              ? cellHeight * 4
+              : index === 2
+              ? cellHeight * 7.5
+              : index === 3
+              ? cellHeight * 11.5
+              : index === 4
+              ? cellHeight * 15
+              : index === 5
+              ? cellHeight * 18.5
+              : 0
           }
           cellWidth={cellWidth}
           cellHeight={cellHeight}
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index fbb14ab..5c0aced 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -18,38 +18,38 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-interface SchedulerEventProps {
+interface ClassesWrapperProps {
   eventIndex: number;
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
 }
 
-const SchedulerEvent = styled.div<SchedulerEventProps>`
+const ClassesWrapper = styled.div<ClassesWrapperProps>`
   position: absolute;
   display: flex;
   top: ${({ cellTop }) => cellTop}px;
-  left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
-  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
+  left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px;
+  width: ${({ cellWidth }) => cellWidth - 10}px;
   height: ${({ cellHeight }) => cellHeight * 3}px;
   z-index: 2;
+  padding-left: 10px;
 `;
 
 interface ClassesProps {
-  cellWidth: number;
   cellHeight: number;
   groupType: GroupType;
 }
 
 const Classes = styled.div<ClassesProps>`
   display: flex;
+  flex: 1;
   justify-content: center;
   align-items: center;
   z-index: 2;
   border-radius: 10px;
-  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
-  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px;
-  padding-left: 10px;
+  height: ${({ cellHeight }) => cellHeight * 3}px;
+  margin-right: 5px;
   text-align: left;
   background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
   box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
@@ -84,7 +84,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
   return (
     <div>
       {[...Array(5)].map((_, eventIndex) => (
-        <SchedulerEvent
+        <ClassesWrapper
           eventIndex={eventIndex}
           cellTop={cellTop}
           cellWidth={cellWidth}
@@ -97,8 +97,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
               group.day === eventIndex && (
                 <>
                   <Classes
+                    onClick={() => {
+                      console.log('group: ', group);
+                    }}
                     groupType={group.type}
-                    cellWidth={cellWidth}
                     cellHeight={cellHeight}
                     id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
                     key={index}
@@ -109,7 +111,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                   >
                     <div>
                       <p style={{ fontWeight: 700 }}>{groups[index].name}</p>
-                      <p >{groups[index].room}</p>
+                      <p>{groups[index].room}</p>
                     </div>
                   </Classes>
                   <Popover
@@ -140,7 +142,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                 </>
               ),
           )}
-        </SchedulerEvent>
+        </ClassesWrapper>
       ))}
     </div>
   );