From 9f531de1a555c89456882e76137f87a685bd8cf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Sat, 29 Aug 2020 18:52:03 +0200
Subject: [PATCH 01/12] Didn't convert to table but managed to change stylings
 accordingly

---
 src/components/App.tsx             |  4 +--
 src/components/Rightbar.tsx        |  2 +-
 src/components/Scheduler.tsx       | 51 +++++++++++++++++++-----------
 src/components/SchedulerEvents.tsx | 23 ++++++++++----
 src/components/SchedulerRow.tsx    | 19 ++++++-----
 src/components/Topbar.tsx          |  6 ++--
 6 files changed, 63 insertions(+), 42 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 14810b2..5390571 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7,19 +7,19 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   display: flex;
+  height: calc(100vh - 80px);
 `;
 
 export const App = () => {
   const [isOpenTransfer, setOpenTransfer] = useState(false);
 
-
   const handleTransfer = () => {
     setOpenTransfer(!isOpenTransfer);
   };
 
   return (
     <>
-      <Topbar handleTransfer={handleTransfer}  />
+      <Topbar handleTransfer={handleTransfer} />
       <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
       <Wrapper>
         <Scheduler />
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index 874ec0a..83c5a50 100644
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -9,8 +9,8 @@ const RightbarStyled = styled.div`
   padding-right: 15px;
   text-align: center;
   font-family: Lato;
+  height: 100%;
   width: 300px;
-  height: 85vh;
   overflow-y: scroll;
   ::-webkit-scrollbar-track {
     border-radius: 10px;
diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index a4f851a..e2d3cc7 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -1,18 +1,17 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 const SchedulerWrapper = styled.div`
-  flex-grow: 3;
   margin-top: 20px;
   border-collapse: collapse;
+  flex-grow: 1;
 `;
 
 const TableBody = styled.div`
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
 `;
@@ -22,36 +21,46 @@ const TableRow = styled.div`
   flex-direction: row;
 `;
 
-const TableCell = styled.div`
-  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: center;
-  flex: 1;
-`;
-
 const TableHead = styled.div`
   display: flex;
   width: 100%;
 `;
 
-const TableHeadCell = styled.div`
+interface TableCellProps {
+  height: number;
+}
+
+const TableCell = styled.div<TableCellProps>`
+  height: ${({ height }) => height}px;
   border: 1px solid #ddd;
-  padding: 10px;
   text-align: center;
   flex: 1;
 `;
 
+const T = styled.table`
+  width: 100%;
+  height: 100%;
+`;
+
 export const Scheduler = () => {
   const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellTop, setCellTop] = useState(0);
 
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [wrapperHeight, setWrapperHeight] = useState(0);
+
+  useEffect(() => {
+    console.log(cellTop);
+  }, [cellTop]);
+
   useEffect(() => {
     const handleResize = () => {
-      if (cellRef.current) {
+      if (cellRef.current && wrapperRef.current) {
         setCellWidth(cellRef.current.getBoundingClientRect().width);
         setCellTop(cellRef.current.getBoundingClientRect().top);
+        setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
       }
     };
     handleResize();
@@ -81,10 +90,12 @@ export const Scheduler = () => {
 
   return (
     <>
-      <SchedulerWrapper>
+      <SchedulerWrapper ref={wrapperRef}>
         <TableHead>
           {days.map((day, index) => (
-            <TableHeadCell key={index}>{day}</TableHeadCell>
+            <TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
+              {day}
+            </TableCell>
           ))}
         </TableHead>
         <TableBody>
@@ -92,15 +103,17 @@ export const Scheduler = () => {
             <TableRow key={indexRow}>
               {[hour, '', '', '', '', ''].map((value, indexCell) =>
                 indexRow === 0 && indexCell === 1 ? (
-                  <TableCell key={`${indexRow}${indexCell}`} ref={cellRef}></TableCell>
+                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
                 ) : (
-                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
+                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
                 ),
               )}
             </TableRow>
           ))}
         </TableBody>
-        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
+        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
       </SchedulerWrapper>
     </>
   );
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index 304d658..57b891f 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -2,14 +2,14 @@ import React, { useContext, useEffect, useState } from 'react';
 import { SchedulerRow } from './SchedulerRow';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Group, Basket } from '../types';
-import classes from '*.module.css';
 
 interface SchedulerEventsProps {
   cellTop: number;
   cellWidth: number;
+  cellHeight: number;
 }
 
-export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
+export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
   const { basket } = useContext(coursesContext)!;
 
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@@ -56,13 +56,22 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
           })}
           indexRow={index}
           cellTop={
-            index == 3
-              ? cellTop + (25 + 80 * index)
-              : index < 3
-              ? cellTop + (12 + 80 * index)
-              : cellTop + (25 + 80 * index)
+            index === 0
+              ? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
+              : 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 === 5
+              ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
+              : 0
           }
           cellWidth={cellWidth}
+          cellHeight={cellHeight}
         />
       ))}
     </div>
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index 42fd6d6..126bdd7 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -6,14 +6,15 @@ interface SchedulerEventProps {
   eventIndex: number;
   cellTop: number;
   cellWidth: number;
+  cellHeight: number;
 }
 
 const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
-  top: ${(props) => props.cellTop}px;
-  left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
-  width: ${(props) => (props.cellWidth * 2) / 3}px;
-  height: 69px;
+  top: ${({ cellTop }) => cellTop}px;
+  left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
+  width: ${({ cellWidth }) => (cellWidth * 2) / 3}px;
+  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   background-color: lightblue;
   z-index: 2;
 `;
@@ -23,11 +24,10 @@ interface SchedulerRowProps {
   indexRow: number;
   cellTop: number;
   cellWidth: number;
+  cellHeight: number;
 }
 
-export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
-
-
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
@@ -35,12 +35,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
           eventIndex={eventIndex}
           cellTop={cellTop}
           cellWidth={cellWidth}
+          cellHeight={cellHeight}
           key={eventIndex}
           id={`eventRow${indexRow}eventCol${eventIndex}`}
         >
-          {groups.map((group, index) =>
-            group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>,
-          )}
+          {groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
         </SchedulerEvent>
       ))}
     </>
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index c7cfcb7..1b2f0f5 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -102,9 +102,9 @@ export default function ({ handleTransfer }: TopbarProps) {
       <TopbarInputStyled>
         <TopbarInputIconStyled alt="search" src={Search} />
         <TopbarInputFieldStyled>
-          <Dropdown clearInput={clearInput} handleClearInput={handleClearInput}/>
+          <Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
         </TopbarInputFieldStyled>
-        <TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput}/>
+        <TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
       </TopbarInputStyled>
       <TopbarIconBox>
         <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
@@ -114,4 +114,4 @@ export default function ({ handleTransfer }: TopbarProps) {
       </TopbarIconBox>
     </Topbar>
   );
-};
+}

From 1e9e336ee980f9b43218e67fa2766c34d2f8a0ff Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Sun, 30 Aug 2020 10:42:52 +0200
Subject: [PATCH 02/12] duperelki

---
 src/components/Scheduler.tsx    |  7 ++++---
 src/components/SchedulerRow.tsx |  2 +-
 src/constants/index.ts          | 10 +++++-----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index e2d3cc7..b1b4919 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -5,7 +5,6 @@ import { days, hours } from '../constants/index';
 import styled from 'styled-components/macro';
 
 const SchedulerWrapper = styled.div`
-  margin-top: 20px;
   border-collapse: collapse;
   flex-grow: 1;
 `;
@@ -18,7 +17,6 @@ const TableBody = styled.div`
 
 const TableRow = styled.div`
   display: flex;
-  flex-direction: row;
 `;
 
 const TableHead = styled.div`
@@ -33,8 +31,11 @@ interface TableCellProps {
 const TableCell = styled.div<TableCellProps>`
   height: ${({ height }) => height}px;
   border: 1px solid #ddd;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 1;
+  font-size: 24px;
 `;
 
 const T = styled.table`
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index 126bdd7..5df6fa7 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -13,7 +13,7 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
   top: ${({ cellTop }) => cellTop}px;
   left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
-  width: ${({ cellWidth }) => (cellWidth * 2) / 3}px;
+  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   background-color: lightblue;
   z-index: 2;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index ad14654..cd6753a 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,10 +1,10 @@
 export const days = [
   "",
-  "poniedziałek",
-  "wtorek",
-  "środa",
-  "czwartek",
-  "piątek",
+  "Poniedziałek",
+  "Wtorek",
+  "Środa",
+  "Czwartek",
+  "Piątek",
 ];
 export const hours = [
   "8:00",

From d75530887e2ce479bfb0fe26f602cf3d1d55b8dd Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Mon, 31 Aug 2020 18:10:36 +0200
Subject: [PATCH 03/12] click na grupe niezwija karty przedmiotu

---
 src/components/CourseCard.tsx | 15 +++++++--------
 src/components/Rightbar.tsx   | 11 -----------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index eb42f7b..802b707 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, MouseEvent } from 'react';
+import React, { useState, useContext, MouseEvent } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandIcon from '../assets/expand.png';
 import { Course, Group } from '../types/index';
@@ -68,13 +68,12 @@ const useStyles = makeStyles({
 });
 
 interface CourseCardProps {
-  onCardClick: (event: MouseEvent) => void;
   course: Course;
-  id: string;
-  isSelected: boolean;
 }
 
-export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => {
+export const CourseCard = ({course }: CourseCardProps) => {
+  
+  const [isSelected, setSelected] = useState(false);
   const classes = useStyles();
 
   const { addGroup } = useContext(coursesContext)!;
@@ -82,8 +81,8 @@ export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardPr
   const onGroupClick = (group: Group, id: number) => addGroup(group, id);
 
   return (
-    <CourseStyled onClick={onCardClick} id={id}>
-      <CourseNameStyled>{course.name}</CourseNameStyled>
+    <CourseStyled>
+      <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {course.groups.map((group, index) => (
           <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
@@ -93,7 +92,7 @@ export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardPr
           </ClassGroupStyled>
         ))}
       </Collapse>
-      <div onClick={onCardClick} id={id}>
+      <div onClick={() => setSelected(!isSelected)}>
         <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
       </div>
     </CourseStyled>
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index 83c5a50..f5ae8f9 100644
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -31,8 +31,6 @@ const RightbarTextStyled = styled.div`
 `;
 
 export const Rightbar = () => {
-  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
-
   const { courses, basket } = useContext(coursesContext)!;
 
   const getBasketGroups = () => {
@@ -42,12 +40,6 @@ export const Rightbar = () => {
 
   const filteredCourses = getBasketGroups();
 
-  //działa clunky
-  const onCardClick = (event: MouseEvent) => {
-    const target = event.currentTarget;
-    selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
-  };
-
   //need to insert student name from db and course maybe based on current time or from db too
   return (
     <RightbarStyled>
@@ -59,9 +51,6 @@ export const Rightbar = () => {
         <CourseCard
           course={course}
           key={index}
-          id={index.toString()}
-          onCardClick={onCardClick}
-          isSelected={selectedCardId === index.toString()}
         />
       ))}
     </RightbarStyled>

From 78e54b70e4b66e0c9e02d9f6562eeb88cbb0a34c Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Fri, 11 Sep 2020 08:08:49 +0200
Subject: [PATCH 04/12] prep

---
 src/components/Scheduler.tsx       | 20 ++++++++++----------
 src/components/SchedulerEvents.tsx |  4 +++-
 src/components/SchedulerRow.tsx    |  4 +++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index b1b4919..43cdf32 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -73,21 +73,21 @@ export const Scheduler = () => {
       currentEventsIds.map((eventId: string) => {
         const event = document.getElementById(eventId);
         if (event) {
-          event.style.display = 'block';
+          event.style.backgroundColor = 'blue';
         }
       });
     };
     displayEvents();
   }, [currentEventsIds]);
 
-  // const handleClick = (e: React.MouseEvent) => {
-  //   const cellId = e.currentTarget.id;
-  //   const column = cellId.slice(0, 1);
-  //   const row = cellId.slice(1);
-  //   const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-
-  //   setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
-  // };
+  const handleClick = (e: React.MouseEvent) => {
+    const cellId = e.currentTarget.id;
+    // const column = cellId.slice(0, 9);
+    // const row = cellId.slice(1);
+    //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
+    console.log(cellId)
+    setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
+  };
 
   return (
     <>
@@ -114,7 +114,7 @@ export const Scheduler = () => {
             </TableRow>
           ))}
         </TableBody>
-        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
+        <SchedulerEvents onClick={handleClick} cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13}/>
       </SchedulerWrapper>
     </>
   );
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index 57b891f..3c69856 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -7,9 +7,10 @@ interface SchedulerEventsProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
+  onClick: (e: React.MouseEvent) => void
 }
 
-export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
+export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
   const { basket } = useContext(coursesContext)!;
 
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@@ -50,6 +51,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
     <div>
       {[...Array(6)].map((_, index) => (
         <SchedulerRow
+          onClick={onClick}
           key={index}
           groups={choosenGroupsMappedToEvents.filter((group: any) => {
             return group.eventRow === index;
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index 5df6fa7..b3cf429 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -25,13 +25,15 @@ interface SchedulerRowProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
+  onClick: (e: React.MouseEvent) => void
 }
 
-export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
         <SchedulerEvent
+          onClick={onClick}
           eventIndex={eventIndex}
           cellTop={cellTop}
           cellWidth={cellWidth}

From e90ffbe04d7cb22e5f378525598dbd0dc77ca79e Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Fri, 11 Sep 2020 18:56:14 +0200
Subject: [PATCH 05/12] tylko wybrane gruppy

---
 src/components/Scheduler.tsx    |  2 +-
 src/components/SchedulerRow.tsx | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index 43cdf32..ca4adc7 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -85,7 +85,7 @@ export const Scheduler = () => {
     // const column = cellId.slice(0, 9);
     // const row = cellId.slice(1);
     //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-    console.log(cellId)
+    console.log(currentEventsIds)
     setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
   };
 
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index b3cf429..a2545e4 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -13,10 +13,16 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
   top: ${({ cellTop }) => cellTop}px;
   left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
+  z-index: 2;
+`;
+
+const ClassDiv = styled.div<SchedulerEventProps>`
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
-  background-color: lightblue;
   z-index: 2;
+  border-radius: 10px;
+  padding-left:5px;
+  background-color: rgb(100, 181, 246);
 `;
 
 interface SchedulerRowProps {
@@ -25,7 +31,7 @@ interface SchedulerRowProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: React.MouseEvent) => void
+  onClick: (e: React.MouseEvent) => void;
 }
 
 export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
@@ -41,7 +47,21 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
           key={eventIndex}
           id={`eventRow${indexRow}eventCol${eventIndex}`}
         >
-          {groups.map((group, index) => group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>)}
+          {groups.map(
+            (group, index) =>
+              group.day === eventIndex && (
+                <ClassDiv
+                  eventIndex={eventIndex}
+                  cellTop={cellTop}
+                  cellWidth={cellWidth}
+                  cellHeight={cellHeight}
+                  id={`eventRow${indexRow}eventCol${eventIndex}`}
+                  key={index}
+                >
+                  {groups[index]?.lecturer}
+                </ClassDiv>
+              ),
+          )}
         </SchedulerEvent>
       ))}
     </>

From 0ae374a0fbbd499fad41f2cecfcc48b8f507ea20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Fri, 18 Sep 2020 23:00:11 +0200
Subject: [PATCH 06/12] Simplified import starting with React. Added name
 property to group object passed to table. changed group interface shape. ;

;

l
;
d
---
 src/components/Dropdown.tsx        |  2 +-
 src/components/SchedulerEvents.tsx | 17 ++++++++++++-----
 src/components/SchedulerRow.tsx    | 10 +++++-----
 src/contexts/CoursesProvider.tsx   |  4 ++--
 src/types/index.ts                 |  4 ++--
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 4defa11..e421c36 100644
--- a/src/components/Dropdown.tsx
+++ b/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);
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index 3c69856..0e9e813 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/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);
       }
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index a2545e4..259ca63 100644
--- a/src/components/SchedulerRow.tsx
+++ b/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>
               ),
           )}
diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx
index 722b80b..0c64967 100644
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useState, createContext, useEffect } from 'react';
+import React, { useState, createContext, useEffect, ReactNode } from 'react';
 import { Course, Group, Basket, GroupType } from '../types';
 import axios from 'axios';
 
@@ -11,7 +11,7 @@ interface CourseContext {
 export const coursesContext = createContext<CourseContext | null>(null);
 
 interface CoursesProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const CoursesProvider = ({ children }: CoursesProviderProps) => {
diff --git a/src/types/index.ts b/src/types/index.ts
index cdec17f..09c6f40 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -6,8 +6,8 @@ export enum GroupType {
 export interface Basket {
   id: number;
   name: string;
-  lecture: Group | null;
-  classes: Group | null;
+  lecture?: Group;
+  classes?: Group;
 }
 
 export interface Group {

From 44150eb322d20acfa0a92a178e8ccad0703b70a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Sat, 19 Sep 2020 00:17:23 +0200
Subject: [PATCH 07/12] Added popover and removed onClick event from scheduler

---
 src/components/Dropdown.tsx        |  9 +--
 src/components/Scheduler.tsx       | 30 +---------
 src/components/SchedulerEvents.tsx | 39 +++++--------
 src/components/SchedulerRow.tsx    | 88 ++++++++++++++++++++++++------
 4 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index e421c36..26186b5 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, MouseEvent } from 'react';
+import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
 import axios from 'axios';
 import { Input } from '@material-ui/core';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
@@ -64,13 +64,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
   }, [input, open, basket]);
 
   useEffect(() => {
-    if (clearInput) {
-      setInput('');
-      handleClearInput();
-    }
+    clearInput && (setInput(''), handleClearInput());
   }, [clearInput]);
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
 
   const handleClick = () => setOpen(true);
 
diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index ca4adc7..b2d7598 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useEffect, MouseEvent, useRef } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
@@ -44,7 +44,6 @@ const T = styled.table`
 `;
 
 export const Scheduler = () => {
-  const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellTop, setCellTop] = useState(0);
@@ -52,10 +51,6 @@ export const Scheduler = () => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [wrapperHeight, setWrapperHeight] = useState(0);
 
-  useEffect(() => {
-    console.log(cellTop);
-  }, [cellTop]);
-
   useEffect(() => {
     const handleResize = () => {
       if (cellRef.current && wrapperRef.current) {
@@ -68,27 +63,6 @@ export const Scheduler = () => {
     window.addEventListener('resize', handleResize);
   }, []);
 
-  useEffect(() => {
-    const displayEvents = () => {
-      currentEventsIds.map((eventId: string) => {
-        const event = document.getElementById(eventId);
-        if (event) {
-          event.style.backgroundColor = 'blue';
-        }
-      });
-    };
-    displayEvents();
-  }, [currentEventsIds]);
-
-  const handleClick = (e: React.MouseEvent) => {
-    const cellId = e.currentTarget.id;
-    // const column = cellId.slice(0, 9);
-    // const row = cellId.slice(1);
-    //const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-    console.log(currentEventsIds)
-    setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, cellId]);
-  };
-
   return (
     <>
       <SchedulerWrapper ref={wrapperRef}>
@@ -114,7 +88,7 @@ export const Scheduler = () => {
             </TableRow>
           ))}
         </TableBody>
-        <SchedulerEvents onClick={handleClick} cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13}/>
+        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
       </SchedulerWrapper>
     </>
   );
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index 0e9e813..756cb4c 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -7,10 +7,9 @@ interface SchedulerEventsProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: MouseEvent) => void;
 }
 
-export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: SchedulerEventsProps) => {
+export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
   const { basket } = useContext(coursesContext)!;
 
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@@ -29,27 +28,20 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
 
   useEffect(() => {
     function mapGroupTimeToEventRow(basket: Array<Basket>) {
-      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 classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
+      const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) 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, name }) => ({
-          id,
-          day,
-          lecturer,
-          room,
-          eventRow: groupTimeToEventRowMapping[time],
-          name,
-        }));
-        setChoosenGroupsMappedToEvents(groupsMapped);
-      }
+      //deleted if statement, maybe it is needed
+      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
+        id,
+        day: day === 5 ? 4 : day,
+        lecturer,
+        room,
+        eventRow: groupTimeToEventRowMapping[time],
+        name,
+      }));
+      setChoosenGroupsMappedToEvents(groupsMapped);
     }
     mapGroupTimeToEventRow(basket);
   }, [basket]);
@@ -58,11 +50,8 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch
     <div>
       {[...Array(6)].map((_, index) => (
         <SchedulerRow
-          onClick={onClick}
           key={index}
-          groups={choosenGroupsMappedToEvents.filter((group: any) => {
-            return group.eventRow === index;
-          })}
+          groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
           indexRow={index}
           cellTop={
             index === 0
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index 259ca63..b673b1f 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -1,6 +1,20 @@
 import React, { MouseEvent } from 'react';
 import { Group } from '../types';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    popover: {
+      pointerEvents: 'none',
+    },
+    paper: {
+      padding: theme.spacing(1),
+    },
+  }),
+);
 
 interface SchedulerEventProps {
   eventIndex: number;
@@ -11,14 +25,15 @@ interface SchedulerEventProps {
 
 const SchedulerEvent = styled.div<SchedulerEventProps>`
   position: absolute;
+  display: flex;
   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;
   z-index: 2;
 `;
 
-const ClassDiv = styled.div<SchedulerEventProps>`
-  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
-  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
+const Classes = styled.div<SchedulerEventProps>`
   z-index: 2;
   border-radius: 10px;
   padding-left: 5px;
@@ -31,15 +46,27 @@ interface SchedulerRowProps {
   cellTop: number;
   cellWidth: number;
   cellHeight: number;
-  onClick: (e: MouseEvent) => void;
 }
 
-export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight, onClick }: SchedulerRowProps) => {
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
+
+  //looks weird
+  const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
         <SchedulerEvent
-          onClick={onClick}
           eventIndex={eventIndex}
           cellTop={cellTop}
           cellWidth={cellWidth}
@@ -50,16 +77,43 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight,
           {groups.map(
             (group, index) =>
               group.day === eventIndex && (
-                <ClassDiv
-                  eventIndex={eventIndex}
-                  cellTop={cellTop}
-                  cellWidth={cellWidth}
-                  cellHeight={cellHeight}
-                  id={`eventRow${indexRow}eventCol${eventIndex}`}
-                  key={index}
-                >
-                  {groups[index].name}
-                </ClassDiv>
+                <>
+                  <Classes
+                    eventIndex={eventIndex}
+                    cellTop={cellTop}
+                    cellWidth={cellWidth}
+                    cellHeight={cellHeight}
+                    id={`eventRow${indexRow}eventCol${eventIndex}`}
+                    key={index}
+                    aria-owns={open ? 'mouse-over-popover' : undefined}
+                    aria-haspopup="true"
+                    onMouseEnter={handlePopoverOpen}
+                    onMouseLeave={handlePopoverClose}
+                  >
+                    {groups[index].name}
+                  </Classes>
+                  <Popover
+                    id="mouse-over-popover"
+                    className={classes.popover}
+                    classes={{
+                      paper: classes.paper,
+                    }}
+                    open={open}
+                    anchorEl={anchorEl}
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'left',
+                    }}
+                    transformOrigin={{
+                      vertical: 'top',
+                      horizontal: 'left',
+                    }}
+                    onClose={handlePopoverClose}
+                    disableRestoreFocus
+                  >
+                    <Typography>I use Popover.</Typography>
+                  </Popover>
+                </>
               ),
           )}
         </SchedulerEvent>

From fe1d1037594e9507e4c2ddc4dc4d2b721cf6c72e Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Sun, 20 Sep 2020 20:23:46 +0200
Subject: [PATCH 08/12] split groups at schedule and other stuff

---
 src/components/SchedulerRow.tsx | 37 ++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index b673b1f..fd4f5da 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, useEffect, useState } from 'react';
 import { Group } from '../types';
 import styled from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
@@ -12,6 +12,8 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     paper: {
       padding: theme.spacing(1),
+      marginLeft: 5,
+      textAlign:"center"
     },
   }),
 );
@@ -38,6 +40,10 @@ const Classes = styled.div<SchedulerEventProps>`
   border-radius: 10px;
   padding-left: 5px;
   background-color: rgb(100, 181, 246);
+  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
+  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
+  margin-right:5px;
+  text-align:center;
 `;
 
 interface SchedulerRowProps {
@@ -51,18 +57,25 @@ interface SchedulerRowProps {
 export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
-
+  const [popoverId, setPopoverId] = useState<string|null>(null);
+  
   //looks weird
   const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
     setAnchorEl(event.currentTarget);
+    setPopoverId(event.currentTarget.id)
   };
 
   const handlePopoverClose = () => {
     setAnchorEl(null);
+    setPopoverId(null);
   };
 
   const open = Boolean(anchorEl);
 
+  useEffect(()=>{
+    console.log("1231312"+popoverId);
+  },[popoverId])
+
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
@@ -83,35 +96,35 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                     cellTop={cellTop}
                     cellWidth={cellWidth}
                     cellHeight={cellHeight}
-                    id={`eventRow${indexRow}eventCol${eventIndex}`}
+                    id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
                     key={index}
-                    aria-owns={open ? 'mouse-over-popover' : undefined}
+                    aria-owns={open ? `mouse-over-popover` : undefined}
                     aria-haspopup="true"
-                    onMouseEnter={handlePopoverOpen}
+                    onMouseEnter={(e) => handlePopoverOpen(e)}
                     onMouseLeave={handlePopoverClose}
                   >
-                    {groups[index].name}
+                    {groups[index].name}<p>{groups[index].room}</p>
                   </Classes>
                   <Popover
-                    id="mouse-over-popover"
+                    id={`mouse-over-popover`}
                     className={classes.popover}
                     classes={{
                       paper: classes.paper,
                     }}
-                    open={open}
+                    open={(popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`)}
                     anchorEl={anchorEl}
                     anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'left',
+                      vertical: 'top',
+                      horizontal: 'right',
                     }}
                     transformOrigin={{
-                      vertical: 'top',
+                      vertical: 'center',
                       horizontal: 'left',
                     }}
                     onClose={handlePopoverClose}
                     disableRestoreFocus
                   >
-                    <Typography>I use Popover.</Typography>
+                    <Typography><p>{groups[index].name}</p><p>{groups[index].lecturer}</p><p>{groups[index].room}</p></Typography>
                   </Popover>
                 </>
               ),

From c1cf27d82874b2d44393d474f70a606cc82a23a1 Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Mon, 28 Sep 2020 18:36:38 +0200
Subject: [PATCH 09/12] delete from basket

---
 src/components/CourseCard.tsx    | 19 +++++++++++++++---
 src/components/SchedulerRow.tsx  | 34 +++++++++++++++++++-------------
 src/contexts/CoursesProvider.tsx |  6 +++++-
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 802b707..dad01fe 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -5,6 +5,7 @@ import { Course, Group } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
+import CloseIcon from '../assets/close.svg';
 
 interface ClassExandIconProps {
   isSelected: boolean;
@@ -23,6 +24,7 @@ const CourseStyled = styled.div`
   border-radius: 10px;
   cursor: pointer;
   align-items: stretch;
+  position:relative;
 `;
 
 const CourseNameStyled = styled.div`
@@ -67,21 +69,32 @@ const useStyles = makeStyles({
   },
 });
 
+const DeleteFromBasketIcon = styled.img`
+  width: 20px;
+  cursor: pointer;
+  position:absolute;
+  left:235px;
+  top:5px;
+  :hover{
+    color:red;
+  }
+`;
+
 interface CourseCardProps {
   course: Course;
 }
 
-export const CourseCard = ({course }: CourseCardProps) => {
-  
+export const CourseCard = ({ course }: CourseCardProps) => {
   const [isSelected, setSelected] = useState(false);
   const classes = useStyles();
 
-  const { addGroup } = useContext(coursesContext)!;
+  const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
 
   const onGroupClick = (group: Group, id: number) => addGroup(group, id);
 
   return (
     <CourseStyled>
+      <DeleteFromBasketIcon alt="close" src={CloseIcon} onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
       <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {course.groups.map((group, index) => (
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index fd4f5da..4e0dbe6 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
     paper: {
       padding: theme.spacing(1),
       marginLeft: 5,
-      textAlign:"center"
+      textAlign: 'center',
     },
   }),
 );
@@ -36,14 +36,16 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
 `;
 
 const Classes = styled.div<SchedulerEventProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: 2;
   border-radius: 10px;
-  padding-left: 5px;
   background-color: rgb(100, 181, 246);
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
-  margin-right:5px;
-  text-align:center;
+  margin-right: 5px;
+  text-align: center;
 `;
 
 interface SchedulerRowProps {
@@ -57,12 +59,12 @@ interface SchedulerRowProps {
 export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
-  const [popoverId, setPopoverId] = useState<string|null>(null);
-  
+  const [popoverId, setPopoverId] = useState<string | null>(null);
+
   //looks weird
   const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
     setAnchorEl(event.currentTarget);
-    setPopoverId(event.currentTarget.id)
+    setPopoverId(event.currentTarget.id);
   };
 
   const handlePopoverClose = () => {
@@ -72,10 +74,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
 
   const open = Boolean(anchorEl);
 
-  useEffect(()=>{
-    console.log("1231312"+popoverId);
-  },[popoverId])
-
   return (
     <>
       {[...Array(5)].map((_, eventIndex) => (
@@ -103,7 +101,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                     onMouseEnter={(e) => handlePopoverOpen(e)}
                     onMouseLeave={handlePopoverClose}
                   >
-                    {groups[index].name}<p>{groups[index].room}</p>
+                    <p>
+                      {groups[index].name}
+                      <br></br>
+                      {groups[index].room}
+                    </p>
                   </Classes>
                   <Popover
                     id={`mouse-over-popover`}
@@ -111,7 +113,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                     classes={{
                       paper: classes.paper,
                     }}
-                    open={(popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`)}
+                    open={popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`}
                     anchorEl={anchorEl}
                     anchorOrigin={{
                       vertical: 'top',
@@ -124,7 +126,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
                     onClose={handlePopoverClose}
                     disableRestoreFocus
                   >
-                    <Typography><p>{groups[index].name}</p><p>{groups[index].lecturer}</p><p>{groups[index].room}</p></Typography>
+                    <Typography>
+                      <p>{groups[index].name}</p>
+                      <p>{groups[index].lecturer}</p>
+                      <p>{groups[index].room}</p>
+                    </Typography>
                   </Popover>
                 </>
               ),
diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx
index 0c64967..70c7167 100644
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@@ -7,6 +7,7 @@ interface CourseContext {
   basket: Array<Basket>;
   addToBasket: (courses: Basket) => void;
   addGroup: (group: Group, id: number) => void;
+  deleteFromBasket: (id: number) => void;
 }
 export const coursesContext = createContext<CourseContext | null>(null);
 
@@ -21,6 +22,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   const addToBasket = (course: Basket) => setBasket([...basket, course]);
 
+  const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id));
+
+
   useEffect(() => {
     console.log('BASKET');
     console.log(basket);
@@ -52,6 +56,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   }, []);
 
   return (
-    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup }}>{children}</coursesContext.Provider>
+    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>{children}</coursesContext.Provider>
   );
 };

From 45a226b4b86c467474a9ea686a67cfb25b7de775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Mon, 28 Sep 2020 18:54:53 +0200
Subject: [PATCH 10/12] Hover state of close icon

---
 src/components/CourseCard.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index dad01fe..36cc7dd 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -5,7 +5,7 @@ import { Course, Group } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
-import CloseIcon from '../assets/close.svg';
+import { ReactComponent as CloseIcon } from '../assets/close.svg';
 
 interface ClassExandIconProps {
   isSelected: boolean;
@@ -24,7 +24,7 @@ const CourseStyled = styled.div`
   border-radius: 10px;
   cursor: pointer;
   align-items: stretch;
-  position:relative;
+  position: relative;
 `;
 
 const CourseNameStyled = styled.div`
@@ -69,14 +69,14 @@ const useStyles = makeStyles({
   },
 });
 
-const DeleteFromBasketIcon = styled.img`
+const DeleteFromBasketIcon = styled(CloseIcon)`
   width: 20px;
   cursor: pointer;
-  position:absolute;
-  left:235px;
-  top:5px;
-  :hover{
-    color:red;
+  position: absolute;
+  left: 235px;
+  top: -10px;
+  &:hover {
+    fill: #d3d3d3;
   }
 `;
 
@@ -94,7 +94,7 @@ export const CourseCard = ({ course }: CourseCardProps) => {
 
   return (
     <CourseStyled>
-      <DeleteFromBasketIcon alt="close" src={CloseIcon} onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
+      <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
       <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {course.groups.map((group, index) => (

From 12d50c790b799b9ad34ae55adca20a0ce978d90c Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Mon, 28 Sep 2020 20:16:54 +0200
Subject: [PATCH 11/12] color croups and lectures

---
 src/components/CourseCard.tsx      | 13 +++++++++----
 src/components/Rightbar.tsx        | 26 ++++++++++++++++++++------
 src/components/SchedulerEvents.tsx |  3 ++-
 src/components/SchedulerRow.tsx    | 18 +++++++++++++-----
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 36cc7dd..06645e9 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useContext, MouseEvent } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandIcon from '../assets/expand.png';
-import { Course, Group } from '../types/index';
+import { Course, Group, GroupType } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
@@ -32,7 +32,11 @@ const CourseNameStyled = styled.div`
   padding-bottom: 10px;
 `;
 
-const ClassGroupStyled = styled.div`
+interface ClassGroupProps{
+  groupType:GroupType;
+}
+
+const ClassGroupStyled = styled.div<ClassGroupProps>`
   padding-top: 1px;
   padding-bottom: 1px;
   :hover {
@@ -40,6 +44,7 @@ const ClassGroupStyled = styled.div`
     transition: 1s;
     background-color: #8bc8fb;
   }
+  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@@ -97,8 +102,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
       <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
       <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
-        {course.groups.map((group, index) => (
-          <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
+        {course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
+          <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
             <p>
               {group.time} {group.room} <br></br> {group.lecturer}
             </p>
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index f5ae8f9..d300e33 100644
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -27,9 +27,23 @@ const RightbarStyled = styled.div`
   }
 `;
 const RightbarTextStyled = styled.div`
+  display: flex;
+  flex-direction: column;
   border-bottom: 1px solid;
 `;
 
+const SaveButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(100, 181, 246) !important;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 40px;
+  background-color: red;
+  margin-bottom: 10px;
+`;
+
 export const Rightbar = () => {
   const { courses, basket } = useContext(coursesContext)!;
 
@@ -44,14 +58,14 @@ export const Rightbar = () => {
   return (
     <RightbarStyled>
       <RightbarTextStyled>
-        Hubert Wrzesiński<br></br>
-        Semestr zimowy 2020/2021
+        <p>
+          Hubert Wrzesiński<br></br>
+          Semestr zimowy 2020/2021
+        </p>
+        <SaveButton>SAVE</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
-        <CourseCard
-          course={course}
-          key={index}
-        />
+        <CourseCard course={course} key={index} />
       ))}
     </RightbarStyled>
   );
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index 756cb4c..c0b447b 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -33,13 +33,14 @@ 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 }) => ({
+      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
         id,
         day: day === 5 ? 4 : day,
         lecturer,
         room,
         eventRow: groupTimeToEventRowMapping[time],
         name,
+        type,
       }));
       setChoosenGroupsMappedToEvents(groupsMapped);
     }
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index 4e0dbe6..a3680ea 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEvent, useEffect, useState } from 'react';
-import { Group } from '../types';
+import { Group, GroupType } from '../types';
 import styled from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
@@ -35,17 +35,24 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
   z-index: 2;
 `;
 
-const Classes = styled.div<SchedulerEventProps>`
+interface ClassesProps{
+  cellWidth: number;
+  cellHeight: number;
+  groupType: GroupType;
+}
+
+const Classes = styled.div<ClassesProps>`
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
   border-radius: 10px;
-  background-color: rgb(100, 181, 246);
+  /* background-color: rgb(100, 181, 246); */
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   margin-right: 5px;
   text-align: center;
+  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
 `;
 
 interface SchedulerRowProps {
@@ -61,6 +68,8 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
   const [popoverId, setPopoverId] = useState<string | null>(null);
 
+  console.log("123s"+JSON.stringify(groups));
+
   //looks weird
   const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
     setAnchorEl(event.currentTarget);
@@ -90,8 +99,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
               group.day === eventIndex && (
                 <>
                   <Classes
-                    eventIndex={eventIndex}
-                    cellTop={cellTop}
+                    groupType={group.type}
                     cellWidth={cellWidth}
                     cellHeight={cellHeight}
                     id={`eventRow${indexRow}eventCol${eventIndex}${index}`}

From b5c2d210577d430d3807c8486ad57c1b12afdd87 Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Thu, 1 Oct 2020 18:09:58 +0200
Subject: [PATCH 12/12] 123

---
 src/components/CourseCard.tsx   | 5 ++---
 src/components/SchedulerRow.tsx | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 06645e9..803f9e3 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -41,10 +41,9 @@ const ClassGroupStyled = styled.div<ClassGroupProps>`
   padding-bottom: 1px;
   :hover {
     cursor: pointer;
-    transition: 1s;
-    background-color: #8bc8fb;
   }
-  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
+    outline-offset: -5px;
+    outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index a3680ea..9d62060 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -52,7 +52,7 @@ const Classes = styled.div<ClassesProps>`
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   margin-right: 5px;
   text-align: center;
-  background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
+  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"}
 `;
 
 interface SchedulerRowProps {