Added popover and removed onClick event from scheduler

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) {
+    clearInput && (setInput(''), handleClearInput());
-      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);
 

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>
     </>
   );

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<
+      const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
-        Group & { name: string }
+      const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) 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');
+      //deleted if statement, maybe it is needed
-      console.log(merged);
+      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
-      if (merged.length >= 1) {
+        id,
-        const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
+        day: day === 5 ? 4 : day,
-          id,
+        lecturer,
-          day,
+        room,
-          lecturer,
+        eventRow: groupTimeToEventRowMapping[time],
-          room,
+        name,
-          eventRow: groupTimeToEventRowMapping[time],
+      }));
-          name,
+      setChoosenGroupsMappedToEvents(groupsMapped);
-        }));
-        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) => {
+          groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
-            return group.eventRow === index;
-          })}
           indexRow={index}
           cellTop={
             index === 0

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>`
+const Classes = styled.div<SchedulerEventProps>`
-  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
-  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   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}
+                  <Classes
-                  cellTop={cellTop}
+                    eventIndex={eventIndex}
-                  cellWidth={cellWidth}
+                    cellTop={cellTop}
-                  cellHeight={cellHeight}
+                    cellWidth={cellWidth}
-                  id={`eventRow${indexRow}eventCol${eventIndex}`}
+                    cellHeight={cellHeight}
-                  key={index}
+                    id={`eventRow${indexRow}eventCol${eventIndex}`}
-                >
+                    key={index}
-                  {groups[index].name}
+                    aria-owns={open ? 'mouse-over-popover' : undefined}
-                </ClassDiv>
+                    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>