From 44150eb322d20acfa0a92a178e8ccad0703b70a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sat, 19 Sep 2020 00:17:23 +0200 Subject: [PATCH] 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) => setInput(event.target.value); + const handleChange = (event: ChangeEvent) => 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>([]); const cellRef = useRef(null); const [cellWidth, setCellWidth] = useState(0); const [cellTop, setCellTop] = useState(0); @@ -52,10 +51,6 @@ export const Scheduler = () => { const wrapperRef = useRef(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 ( <> @@ -114,7 +88,7 @@ export const Scheduler = () => { ))} - + ); 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([]); @@ -29,27 +28,20 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight, onClick }: Sch useEffect(() => { function mapGroupTimeToEventRow(basket: Array) { - 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; + const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array; 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
{[...Array(6)].map((_, index) => ( { - 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` 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` - width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; - height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; +const Classes = styled.div` 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(null); + + //looks weird + const handlePopoverOpen = (event: MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handlePopoverClose = () => { + setAnchorEl(null); + }; + + const open = Boolean(anchorEl); + return ( <> {[...Array(5)].map((_, eventIndex) => ( group.day === eventIndex && ( - - {groups[index].name} - + <> + + {groups[index].name} + + + I use Popover. + + ), )}