Added group to event mapping

src/components/Scheduler/SchedulerEvents/index.tsx

@@ -1,6 +1,7 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { SchedulerRow } from "../SchedulerRow";
 import { LecturesContext } from "../../../businesslogic/LecturesProvider";
+import { Group } from "../../../businesslogic/types/group";
 
 interface SchedulerEventsProps {
   cellTop: number;
@@ -11,58 +12,75 @@ export const SchedulerEvents = ({
   cellTop,
   cellWidth,
 }: SchedulerEventsProps) => {
-//   const handleEventClick = (e: React.MouseEvent) => {
-//     const eventDiv = e.target as HTMLDivElement;
-//     eventDiv.style.backgroundColor = "#1547C5";
-//   };
-    const mapGroupToEvent = () => {
-        
+  //   const handleEventClick = (e: React.MouseEvent) => {
+  //     const eventDiv = e.target as HTMLDivElement;
+  //     eventDiv.style.backgroundColor = "#1547C5";
+  //   };
+
+  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]);
+      }
     }
-
-const { choosenGroups } = useContext(LecturesContext);
-
-  const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}}
+    mapGroupTimeToEventRow(choosenGroups);
+  }, [choosenGroups]);
+
+
+  useEffect(() => {
+    console.log(groupsMappedToEvents);
+
+  }, [groupsMappedToEvents]);
 
 
-  console.log(choosenGroups)
   return (
+
+
     <div>
-      <SchedulerRow
-        groups={choosenGroups}
-        indexRow={0}
-        cellTop={cellTop + 10}
-        cellWidth={cellWidth}
-      />
-      <SchedulerRow
-        groups={[]}
-        indexRow={1}
-        cellTop={cellTop + 80}
-        cellWidth={cellWidth}
-      />
-      <SchedulerRow
-        groups={[]}
-        indexRow={2}
-        cellTop={cellTop + 150}
-        cellWidth={cellWidth}
-      />
-      <SchedulerRow
-        groups={[]}
-        indexRow={3}
-        cellTop={cellTop + 230}
-        cellWidth={cellWidth}
-      />
-      <SchedulerRow
-        groups={[]}
-        indexRow={4}
-        cellTop={cellTop + 300}
-        cellWidth={cellWidth}
-      />
-      <SchedulerRow
-        groups={[]}
-        indexRow={5}
-        cellTop={cellTop + 370}
-        cellWidth={cellWidth}
-      />
+      {
+        [...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>
   );
 };

src/components/Scheduler/SchedulerRow/index.tsx

@@ -19,28 +19,31 @@ export const SchedulerRow = ({
   //   eventDiv.style.backgroundColor = "#1547C5";
   // };
 
-  const group = {0: {id: 5, day: 4, time: "11.45", lecturer: "dr Dorota Blinkiewicz", room: "A2-3"}}
+  console.log(`You passed me these of a groupzzz: ${groups}`)
+
 
   return (
     <div>
-      {[...Array(5)].map((value, index) => (
+      {[...Array(5)].map((value, eventIndex) => (
         <div
-          key = {`eventRow${indexRow}eventCol${index}`} 
-          id={`eventRow${indexRow}eventCol${index}`}
+          key={`eventRow${indexRow}eventCol${eventIndex}`}
+          id={`eventRow${indexRow}eventCol${eventIndex}`}
           style={{
             position: "absolute",
             top: cellTop,
-            left: cellWidth + 5 + cellWidth * index,
+            left: cellWidth + 5 + cellWidth * eventIndex,
             width: (cellWidth * 2) / 3,
             height: 60,
             backgroundColor: "lightblue",
             zIndex: 2,
           }}
         >
-          
-          {groups.map((value, index) => (
-            <div key={index}>{groups[index]?.lecturer}</div>
-          ))}
+
+          {groups.map((group, index) =>
+            (
+              parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div>
+                : null
+            ))}
         </div>
       ))}
     </div>