y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Maciek Głowacki
2020-11-21 04:02:38 +01:00
parent 9a88736584
commit 05fffbe378
15 changed files with 303 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/CourseCard.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useContext, MouseEvent } from 'react';
import React, { useState, useContext } from 'react';
import Collapse from '@material-ui/core/Collapse';
import { ReactComponent as Expand } from '../assets/expand.svg';
import { Course, Group } from '../types/index';
@ -16,19 +16,18 @@ const CourseCardWrapper = styled.div`
justify-content: center;
flex-direction: column;
margin-top: 10px;
border-radius: 10px;
border-radius: 10px;
cursor: pointer;
align-items: stretch;
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
`;
const TitleWrapper = styled.div`
display: flex;
align-items: center;
align-items: center;
justify-content: space-between;
padding: 10px;
`
`;
const BinIcon = styled(Bin)`
width: 20px;
@ -59,16 +58,16 @@ const ClassGroupStyled = styled.div`
`;
interface ExpandIconProps {
isSelected: boolean;
selected: boolean;
}
const ExpandIcon = styled(Expand) <ExpandIconProps>`
const ExpandIcon = styled(Expand)<ExpandIconProps>`
width: 20px;
height: 20px;
max-width: 20px;
min-width: 20px;
transition: 0.2s;
transform: ${({ isSelected }) => (isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')};
`;
const TypeClass = styled.div`
@ -102,38 +101,36 @@ const useStyles = makeStyles({
},
});
interface CourseCardProps {
course: Course;
}
export const CourseCard = ({ course }: CourseCardProps) => {
const classes = useStyles();
const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
const [isSelected, setSelected] = useState(false);
const groups = course.lectures === undefined ? course.classes : [...course.lectures, ...course.classes];
const { changeGroupInBasket, deleteFromBasket } = useContext(coursesContext)!;
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
const [isSelected, setSelected] = useState(false);
const groups = [...course.lectures!, ...course.classes!];
const onGroupClick = (group: Group, id: number) => changeGroupInBasket(group, id);
return (
<CourseCardWrapper>
<TitleWrapper>
<BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
<CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
<ExpandIcon onClick={() => setSelected(!isSelected)} isSelected={isSelected} />
<ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
</TitleWrapper>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{groups
.sort((a, b) => b.type.localeCompare(a.type))
.map((group, index) => (
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
<TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass>
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>
</ClassGroupStyled>
))}
{groups.map((group, index) => (
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
<TypeClass>{group.type === 'CLASS' ? 'Ćw.' : 'Wyk.'}</TypeClass>
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>
</ClassGroupStyled>
))}
</Collapse>
</CourseCardWrapper>
);

53
src/components/Dropdown.tsx
View File

@ -1,10 +1,8 @@
import React, { useState, useContext, useEffect, MouseEvent, forwardRef } from 'react';
import React, { useState, useContext, useEffect, MouseEvent } from 'react';
import { coursesContext } from '../contexts/CoursesProvider';
import { Course } from '../types';
import styled from 'styled-components';
const DropdownContainer = styled.div`
position: relative;
z-index: 99999999;
@ -48,30 +46,25 @@ interface DropdownProps {
handleCloseDropdown: () => void;
}
export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: DropdownProps, ref: any) => {
//courses - choosenCourses
export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
const { courses, basket, addCourseToBasket } = useContext(coursesContext)!;
const basketNames = basket.map(({ name }) => name.trim());
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
const { courses, basket, addToBasket } = useContext(coursesContext)!;
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
useEffect(() => {
console.log('wut');
}, [open, input, handleCloseDropdown]);
useEffect(() => {
console.log('input is: ', input);
}, [input]);
useEffect(() => {
console.log('is open: ', open);
}, [open]);
const onCourseClick = (event: MouseEvent) => {
const target = event.currentTarget;
if (target.id && target.textContent) {
const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
addCourseToBasket(course);
handleCloseDropdown();
}
};
useEffect(() => {
const filterCourses = (input: string) => {
const choosenCoursesNames = basket.map(({ name }) => name.trim());
const filteredCourses = sortedCourses.filter(
const filteredCourses = courses.filter(
({ name }) =>
name
.toLowerCase()
@ -82,25 +75,13 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, ''),
) && !choosenCoursesNames.includes(name),
) && !basketNames.includes(name),
);
setFilteredCourses(filteredCourses);
};
console.log("filtering courses");
filterCourses(input);
}, [open, input, basket]);
const onCourseClick = async (event: MouseEvent) => {
const target = event.currentTarget;
if (target.id && target.textContent) {
const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
console.log('added course is');
console.log(course);
addToBasket(course);
handleCloseDropdown();
}
};
return (
<DropdownContainer>
{open && (
@ -114,4 +95,4 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
)}
</DropdownContainer>
);
});
};

26
src/components/Rightbar.tsx
View File

@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { CourseCard } from './CourseCard';
import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components';
import { debounce } from 'lodash';
import { debounce } from '../utils/index';
const RightbarStyled = styled.div`
padding-top: 10px;
@ -46,33 +46,15 @@ const SaveButton = styled.div`
`;
export const Rightbar = () => {
const { courses, basket, saveBasket } = useContext(coursesContext)!;
const getBasketGroups = () => {
const names = basket.map(({ name }) => name);
const list = []
for (const basketName of names){
const course = courses.find(({name})=>basketName===name)!
list.push(course);
}
console.log("asdasdsa1", list);
console.log("asdasdsa2", courses.filter(({ name }) => names.includes(name)));
return list;
};
const filteredCourses = getBasketGroups();
const { selectBasketCourses, saveBasket } = useContext(coursesContext)!;
const basketCourses = selectBasketCourses();
const handleSave = debounce(() => saveBasket(), 500);
//need to insert student name from db and course maybe based on current time or from db too
return (
<RightbarStyled>
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
{filteredCourses.map((course, index) => (
{basketCourses.map((course, index) => (
<CourseCard course={course} key={index} />
))}
</RightbarStyled>

15
src/components/Scheduler.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, MouseEvent, useRef, useCallback, useLayoutEffect } from 'react';
import React, { useEffect, useRef } from 'react';
import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index';
@ -11,7 +11,7 @@ const SchedulerWrapper = styled.div`
padding: 10px 40px 25px 10px;
border-radius: 5px;
margin-right: 20px;
margin-left:20px;
margin-left: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
@ -62,18 +62,15 @@ const TableCell = styled.div<TableCellProps>`
`;
export const Scheduler = () => {
const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0);
const [cellHeight, setCellHeight] = useState(0);
console.log('cell height: ', cellHeight);
useEffect(() => {
const handleResize = () => {
if (cellRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top);
setCellHeight(cellRef.current.getBoundingClientRect().height);
}
};
@ -115,9 +112,9 @@ export const Scheduler = () => {
{value}
</TableCell>
) : indexRow === 5 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
</TableCell>
) : indexRow % 2 !== 0 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
@ -128,7 +125,7 @@ export const Scheduler = () => {
)}
</TableRow>
))}
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} />
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody>
</SchedulerWrapper>
</>

60
src/components/SchedulerEvents.tsx
View File

@ -1,68 +1,26 @@
import React, { useContext, useEffect, useState, MouseEvent } from 'react';
import React, { useContext } from 'react';
import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types';
import { selectGroupsToShow } from '../utils/index';
import { ROWS_COUNT } from '../constants';
interface SchedulerEventsProps {
cellTop: number;
cellWidth: number;
cellHeight: number;
}
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!;
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
export const SchedulerEvents = ({ cellWidth, cellHeight }: SchedulerEventsProps) => {
const { selectSchedulerEvents } = useContext(coursesContext)!;
const groupTimeToEventRowMapping: { [time: string]: number } = {
'8.15': 0,
'10.00': 1,
'11.45': 2,
'13.45': 3,
'15.30': 4,
'17.15': 5,
'18.45': 6,
};
const createClassTime = (startTime:string) => {
const startTimeMapped = groupTimeToEventRowMapping[startTime];
const endTime = Object.keys(groupTimeToEventRowMapping).find(key => groupTimeToEventRowMapping[key] === startTimeMapped + 1);
return [startTime, endTime]
}
useEffect(() => {
function mapGroupTimeToEventRow(basket: Array<Basket>) {
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];
//deleted if statement, maybe it is needed
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name, type }) => ({
id,
day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
time: createClassTime(time),
name,
type,
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}
mapGroupTimeToEventRow(basket);
}, [basket]);
const schedulerEvents = selectSchedulerEvents();
return (
<div>
{[...Array(6)].map((_, index) => (
{[...Array(ROWS_COUNT)].map((_, index) => (
<SchedulerRow
key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
groups={selectGroupsToShow(schedulerEvents, index)}
indexRow={index}
cellTop={
rowTop={
index === 0
? cellHeight / 2
: index === 1

49
src/components/SchedulerRow.tsx
View File

@ -1,9 +1,10 @@
import React, { MouseEvent, useState } from 'react';
import { Group, GroupType } from '../types';
import { GroupType, SchedulerEvent } from '../types';
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';
import { MONDAY_TO_FRIDAY } from '../constants';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@ -18,17 +19,17 @@ const useStyles = makeStyles((theme: Theme) =>
}),
);
interface ClassesWrapperProps {
interface SchedulerEventsWrapperProps {
eventIndex: number;
cellTop: number;
rowTop: number;
cellWidth: number;
cellHeight: number;
}
const ClassesWrapper = styled.div<ClassesWrapperProps>`
const SchedulerEventsWrapper = styled.div<SchedulerEventsWrapperProps>`
position: absolute;
display: flex;
top: ${({ cellTop }) => cellTop}px;
top: ${({ rowTop }) => rowTop}px;
left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 4 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => cellWidth - 10}px;
height: ${({ cellHeight }) => cellHeight * 3}px;
@ -36,13 +37,13 @@ const ClassesWrapper = styled.div<ClassesWrapperProps>`
padding-left: 10px;
`;
interface ClassesProps {
interface SchedulerEventProps {
cellWidth: number;
cellHeight: number;
groupType: GroupType;
}
const Classes = styled.div<ClassesProps>`
const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
display: flex;
justify-content: center;
align-items: center;
@ -51,28 +52,27 @@ const Classes = styled.div<ClassesProps>`
line-height: normal;
border-radius: 10px;
height: ${({ cellHeight }) => cellHeight * 3}px;
width: ${({ cellWidth }) => cellWidth *3/4}px;
width: ${({ cellWidth }) => (cellWidth * 3) / 4}px;
margin-right: 5px;
padding: 5px 5px 5px 5px;
text-align: center;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75);
`;
const StyledTypography = styled(Typography)`
background-color:white;
`
background-color: white;
`;
interface SchedulerRowProps {
groups: Array<Group & { name: string }>;
groups: Array<SchedulerEvent>;
indexRow: number;
cellTop: number;
rowTop: number;
cellWidth: number;
cellHeight: number;
}
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null);
@ -92,10 +92,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
return (
<div>
{[...Array(5)].map((_, eventIndex) => (
<ClassesWrapper
{[...Array(MONDAY_TO_FRIDAY)].map((_, eventIndex) => (
<SchedulerEventsWrapper
eventIndex={eventIndex}
cellTop={cellTop}
rowTop={rowTop}
cellWidth={cellWidth}
cellHeight={cellHeight}
key={eventIndex}
@ -105,10 +105,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
(group, index) =>
group.day === eventIndex && (
<>
<Classes
onClick={() => {
console.log('group: ', group);
}}
<StyledSchedulerEvent
groupType={group.type}
cellWidth={cellWidth}
cellHeight={cellHeight}
@ -121,9 +118,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
>
<div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p>
<p>{groups[index].time[0]} - {groups[index].time[1]}</p>
<p>
{groups[index].time[0]} - {groups[index].time[1]}
</p>
</div>
</Classes>
</StyledSchedulerEvent>
<Popover
id={`mouse-over-popover`}
className={classes.popover}
@ -152,7 +151,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
</>
),
)}
</ClassesWrapper>
</SchedulerEventsWrapper>
))}
</div>
);