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,10 +1,9 @@
import React, {useContext} from "react";
import "./index.scss";
import Collapse from "@material-ui/core/Collapse";
import ExpandIcon from "./expand.png";
import { Lecture } from "../../../businesslogic/types/lecture";
import { Group } from "../../../businesslogic/types/group";
import { LecturesContext } from "../../../businesslogic/LecturesProvider";
import React, { useContext } from 'react';
import './index.scss';
import Collapse from '@material-ui/core/Collapse';
import ExpandIcon from './expand.png';
import { Lecture, Group } from '../../../types/index';
import { LecturesContext } from '../../../contexts/LecturesProvider';
interface LectureCardProps {
onGroupMouseOver: (id: string, name: string) => void;
@ -14,31 +13,17 @@ interface LectureCardProps {
isSelected: boolean;
}
export default function LectureCard({
onGroupMouseOver,
onCardClick,
lecture,
id,
isSelected,
}: LectureCardProps) {
export default function LectureCard({ onGroupMouseOver, onCardClick, lecture, id, isSelected }: LectureCardProps) {
const { addGroup } = useContext(LecturesContext)!;
const {addGroup} = useContext(LecturesContext);
function onGroupClick(group : Group){
addGroup(group);
function onGroupClick(group: Group) {
addGroup(group);
}
return (
<div className="class" onClick={onCardClick} id={id}>
<div className="class__name">{lecture.name}</div>
<Collapse
className="expanded"
in={isSelected}
timeout="auto"
unmountOnExit
>
<Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
{lecture.groups.map((group, index) => (
<div
className="class__group"
@ -48,16 +33,12 @@ export default function LectureCard({
>
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>{" "}
</p>{' '}
</div>
))}
</Collapse>
<div onClick={onCardClick} id={id}>
<img
alt="expand"
src={ExpandIcon}
className={`class__expandIcon${isSelected ? "Rotate" : ""}`}
/>
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
</div>
</div>
);

View File

@ -1,27 +1,21 @@
import React, { useState, useContext } from "react";
import "./index.scss";
import { Lecture } from "../../businesslogic/types/lecture";
import LectureCard from "./LectureCard";
import { LecturesContext } from "../../businesslogic/LecturesProvider";
import React, { useState, useContext } from 'react';
import './index.scss';
import { Lecture } from '../../types';
import LectureCard from './LectureCard';
import { LecturesContext } from '../../contexts/LecturesProvider';
interface RightBarProps {
onGroupMouseOver: (id: string, name: string) => void;
lectures: Array<Lecture>;
}
export default function RightBar({
lectures,
onGroupMouseOver,
}: RightBarProps) {
export default function RightBar({ onGroupMouseOver }: RightBarProps) {
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
const lecturesContext = useContext(LecturesContext);
const onCardClick = (e: React.MouseEvent) => {
const target = e.currentTarget as HTMLElement;
selectedCardId === target.id
? setSelectedCardId(null)
: setSelectedCardId(target.id);
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
};
return (
@ -30,7 +24,7 @@ export default function RightBar({
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</div>
{lecturesContext.lectures.map((lecture, index) => (
{lecturesContext?.lectures.map((lecture, index) => (
<LectureCard
lecture={lecture}
key={index}

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

View File

@ -1,11 +1,10 @@
import React, { useState, useContext, useEffect } from "react";
import axios from "axios";
import { Input } from "@material-ui/core";
import "./index.scss";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import { LecturesContext } from "../../../businesslogic/LecturesProvider";
import { Lecture } from "../../../businesslogic/types/lecture";
import { Group } from "../../../businesslogic/types/group";
import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
import { Input } from '@material-ui/core';
import './index.scss';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { LecturesContext } from '../../../contexts/LecturesProvider';
import { Lecture, Group } from '../../../types';
interface LectureData {
name: string;
@ -13,14 +12,12 @@ interface LectureData {
}
export const Results: React.FC = () => {
const [input, setInput] = useState<string>("");
const [input, setInput] = useState<string>('');
const [lecturesData, setLecturesData] = useState<Array<LectureData>>([]);
const [filteredLecturesData, setFilteredLecturesData] = useState<
Array<LectureData>
>([]);
const [filteredLecturesData, setFilteredLecturesData] = useState<Array<LectureData>>([]);
const [open, setOpen] = React.useState(false);
const lecturesContext = useContext(LecturesContext);
const lecturesContext = useContext(LecturesContext)!;
//fetch lectures ids and lectures names
// useEffect(() => {
@ -36,12 +33,10 @@ export const Results: React.FC = () => {
useEffect(() => {
const fetchData = async () => {
const results = await axios.get(`http://localhost:1287/getCourses?name=`);
const lecturesData = results.data.map(
(result: { id: number; name: string }) => ({
id: result.id,
name: result.name,
})
);
const lecturesData = results.data.map((result: { id: number; name: string }) => ({
id: result.id,
name: result.name,
}));
setLecturesData(lecturesData);
};
@ -51,8 +46,8 @@ export const Results: React.FC = () => {
useEffect(() => {
const names = lecturesContext.lectures.map((lecture) => lecture.name);
const filterLectures = (value: string) => {
let filteredLectures = lecturesData.filter((lecture) =>
lecture.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(lecture.name)
let filteredLectures = lecturesData.filter(
(lecture) => lecture.name.toLowerCase().includes(value.toLowerCase()) && !names.includes(lecture.name),
);
setFilteredLecturesData(filteredLectures);
};
@ -60,9 +55,7 @@ export const Results: React.FC = () => {
}, [input, open]);
const getLecturesById = async (id: string) => {
const { data } = await axios.get(
`http://localhost:1287/getClassesByCourseId?id=${id}`
);
const { data } = await axios.get(`http://localhost:1287/getClassesByCourseId?id=${id}`);
return data;
};
@ -92,12 +85,7 @@ export const Results: React.FC = () => {
group.id = result[i].id;
group.day = result[i].day;
group.time = result[i].time;
group.lecturer =
result[i].lecturer.title +
" " +
result[i].lecturer.name +
" " +
result[i].lecturer.surname;
group.lecturer = result[i].lecturer.title + ' ' + result[i].lecturer.name + ' ' + result[i].lecturer.surname;
group.room = result[i].room.trim();
lecture.groups.push(group);
}
@ -113,7 +101,7 @@ export const Results: React.FC = () => {
<div>
<Input
placeholder="Wyszukaj..."
inputProps={{ "aria-label": "description" }}
inputProps={{ 'aria-label': 'description' }}
className="top-bar__input-field"
onChange={handleChange}
onClick={handleClick}
@ -122,12 +110,7 @@ export const Results: React.FC = () => {
{open ? (
<div className="dropdown">
{filteredLecturesData.map((lecture, index) => (
<div
className="lecture"
key={index}
id={String(lecture.id)}
onClick={onLectureClick}
>
<div className="lecture" key={index} id={String(lecture.id)} onClick={onLectureClick}>
<p>{lecture.name} </p>
</div>
))}