Major refactoring

This commit is contained in:
Maciek Głowacki
2020-08-12 04:13:14 +02:00
parent f6da0d9c72
commit f1cf374b07
35 changed files with 783 additions and 732 deletions

View File

@ -1,23 +0,0 @@
import React from "react";
interface CellProps {
colIndex: number;
index: number;
term?: string;
handleClick?: (e: React.MouseEvent) => void;
isEventable?: boolean;
}
export const Cell = ({
colIndex,
index,
term,
handleClick,
isEventable,
}: CellProps) => {
return (
<div id={`${colIndex} ${index}`} className="td" onClick={handleClick}>
{isEventable || term}
</div>
);
};

View File

@ -1,33 +0,0 @@
import React from "react";
import { Cell } from "../Cell";
interface ColumnProps {
hours: Array<string>;
handleClick?: (e: React.MouseEvent) => void;
children?: React.ReactNode;
colIndex?: number;
isEventable?: boolean;
}
export const Column = ({
hours,
colIndex,
isEventable,
children,
...rest
}: ColumnProps) => {
return (
<div className="tbody__column">
{hours.map((hour, index) => (
<Cell
{...rest}
index={index}
term={hour}
colIndex={colIndex || 0}
isEventable={isEventable}
/>
))}
{children}
</div>
);
};

View File

@ -1,86 +1,81 @@
import React, { useContext, useEffect, useState } from "react";
import { SchedulerRow } from "../SchedulerRow";
import { LecturesContext } from "../../../businesslogic/LecturesProvider";
import { Group } from "../../../businesslogic/types/group";
import React, { useContext, useEffect, useState } from 'react';
import { SchedulerRow } from '../SchedulerRow';
import { LecturesContext } from '../../../contexts/LecturesProvider';
import { Group } from '../../../types';
interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
}
export const SchedulerEvents = ({
cellTop,
cellWidth,
}: SchedulerEventsProps) => {
// const handleEventClick = (e: React.MouseEvent) => {
// const eventDiv = e.target as HTMLDivElement;
// eventDiv.style.backgroundColor = "#1547C5";
// };
const { choosenGroups } = useContext(LecturesContext);
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
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
[time: string]: number;
}
const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
"8.15": 0,
"10.00": 1,
"11.45": 2,
"13.45": 3,
"15.30": 4,
"17.15": 5,
}
'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 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 };
const groupMappedToEvent: any = {
id: group.id,
day: group.day,
eventRow: eventRow,
lecturer: group.lecturer,
room: group.room,
};
setGroupsMappedToEvents((groupsMappedToEvents: any) => [...groupsMappedToEvents, groupMappedToEvent]);
}
function alternative(groups: Array<Group>) {
const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({
id,
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
}));
setGroupsMappedToEvents(groupsMapped);
}
}
mapGroupTimeToEventRow(choosenGroups);
}, [choosenGroups]);
useEffect(() => {
console.log(groupsMappedToEvents);
}, [groupsMappedToEvents]);
return (
<div>
{
[...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}
/>
))
}
{[...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>
);
};

View File

@ -1,5 +1,22 @@
import React from "react";
import { Group } from "../../../businesslogic/types/group";
import React from 'react';
import { Group } from '../../../types';
import styled from 'styled-components';
interface SchedulerEventProps {
eventIndex: number;
cellTop: number;
cellWidth: 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: 60px;
background-color: lightblue;
z-index: 2;
`;
interface SchedulerRowProps {
groups: Array<Group>;
@ -8,44 +25,24 @@ interface SchedulerRowProps {
cellWidth: number;
}
export const SchedulerRow = ({
groups,
indexRow,
cellTop,
cellWidth,
}: SchedulerRowProps) => {
// const handleEventClick = (e: React.MouseEvent) => {
// const eventDiv = e.target as HTMLDivElement;
// eventDiv.style.backgroundColor = "#1547C5";
// };
console.log(`You passed me these of a groupzzz: ${groups}`)
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
console.log(`You passed me these of a groupzzz: ${groups}`);
return (
<div>
<>
{[...Array(5)].map((value, eventIndex) => (
<div
<SchedulerEvent
eventIndex={eventIndex}
cellTop={cellTop}
cellWidth={cellWidth}
key={`eventRow${indexRow}eventCol${eventIndex}`}
id={`eventRow${indexRow}eventCol${eventIndex}`}
style={{
position: "absolute",
top: cellTop,
left: cellWidth + 5 + cellWidth * eventIndex,
width: (cellWidth * 2) / 3,
height: 60,
backgroundColor: "lightblue",
zIndex: 2,
}}
>
{groups.map((group, index) =>
(
parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div>
: null
))}
</div>
parseInt(group.day) === eventIndex ? <div key={index}>{groups[index]?.lecturer}</div> : null,
)}
</SchedulerEvent>
))}
</div>
</>
);
};

View File

@ -1,26 +0,0 @@
.scheduler {
margin-top: 20px;
border-collapse: collapse;
.tbody {
display: flex;
&__column {
display: flex;
flex-direction: column;
position: relative;
flex: 1;
}
}
.td,
.th {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
}
.td:hover {
background-color: #ddd;
}
}

View File

@ -1,61 +1,45 @@
import React, { useEffect, useRef } from "react";
import { useState } from "react";
import "./index.scss";
import { SchedulerEvents } from "./SchedulerEvents";
const days = ["", "poniedziałek", "wtorek", "środa", "czwartek", "piątek"];
import { days, hours } from "../../constants/index";
import styled from "styled-components";
const hours = [
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
];
const SchedulerWrapper = styled.div`
flex-grow: 3;
margin-top: 20px;
border-collapse: collapse;
`;
let events: Array<number> = [];
for (let i = 0; i < hours.length / 2; i++) {
events.push(i);
}
const TableBody = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
`;
let center: "center" = "center";
let row: "row" = "row";
let column: "column" = "column";
// const collapse: "collapse" = "collapse";
const tbodyStyles = {
width: "100%",
height: "100%",
display: "flex",
flexDirection: column,
};
const TableRow = styled.div`
display: flex;
flex-direction: row;
`;
const rowStyles = {
display: "flex",
flexDirection: row,
};
const TableCell = styled.div`
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`;
const cellStyles = {
border: "1px solid #ddd",
padding: "10px",
textAlign: center,
flex: 1,
};
const TableHead = styled.div`
display: flex;
width: 100%;
`;
const theadStyles = {
display: "flex",
width: "100%",
};
// const scheduler = {
// marginTop: "20px",
// borderCollapse: collapse,
// };
const TableHeadCell = styled.div`
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`;
export const Scheduler = () => {
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
@ -63,7 +47,6 @@ export const Scheduler = () => {
const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0);
useEffect(() => {
const handleResize = () => {
if (cellRef.current) {
@ -98,29 +81,30 @@ export const Scheduler = () => {
return (
<>
<div className="scheduler">
<div style={theadStyles}>
<SchedulerWrapper>
<TableHead>
{days.map((day, index) => (
<div className="th" key={index}>
{day}
</div>
<TableHeadCell key={index}>{day}</TableHeadCell>
))}
</div>
<div style={tbodyStyles}>
</TableHead>
<TableBody>
{hours.map((hour, indexRow) => (
<div key={indexRow} style={rowStyles}>
<TableRow key={indexRow}>
{[hour, "", "", "", "", ""].map((value, indexCell) =>
indexRow === 0 && indexCell === 1 ? (
<div key={`${indexRow}${indexCell}`} ref={cellRef} style={cellStyles}></div>
<TableCell
key={`${indexRow}${indexCell}`}
ref={cellRef}
></TableCell>
) : (
<div key={`${indexRow}${indexCell}`} style={cellStyles}>{value}</div>
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
)
)}
</div>
</TableRow>
))}
</div>
</TableBody>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
</div>
</SchedulerWrapper>
</>
);
};