refactor
This commit is contained in:
Maciek Głowacki
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -1,37 +1,44 @@
|
||||
export const days = [
|
||||
"",
|
||||
"Poniedziałek",
|
||||
"Wtorek",
|
||||
"Środa",
|
||||
"Czwartek",
|
||||
"Piątek",
|
||||
];
|
||||
export const days = ['', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek'];
|
||||
export 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",
|
||||
"",
|
||||
'8:00',
|
||||
'',
|
||||
'9:00',
|
||||
'',
|
||||
'10:00',
|
||||
'',
|
||||
'11:00',
|
||||
'',
|
||||
'12:00',
|
||||
'',
|
||||
'13:00',
|
||||
'',
|
||||
'14:00',
|
||||
'',
|
||||
'15:00',
|
||||
'',
|
||||
'16:00',
|
||||
'',
|
||||
'17:00',
|
||||
'',
|
||||
'18:00',
|
||||
'',
|
||||
'19:00',
|
||||
'',
|
||||
];
|
||||
|
||||
export const MONDAY_TO_FRIDAY = 5;
|
||||
|
||||
export const MONDAY_TO_FRIDAY = 5;
|
||||
//added 12:00, one of lectures starts at that time
|
||||
export const courseStartTimeToEventRow: { [time: string]: number } = {
|
||||
'8.15': 0,
|
||||
'10.00': 1,
|
||||
'11.45': 2,
|
||||
'12.00': 2,
|
||||
'13.45': 3,
|
||||
'15.30': 4,
|
||||
'17.15': 5,
|
||||
'18.45': 6,
|
||||
};
|
||||
|
||||
//groupTimeToEventRowMapping - 1;
|
||||
export const ROWS_COUNT = 6;
|
||||
|
||||
@ -5,6 +5,7 @@ import axios from 'axios';
|
||||
export interface CASContext {
|
||||
user?: User;
|
||||
logout: () => void;
|
||||
token?: string | null;
|
||||
}
|
||||
|
||||
export const CASContext = createContext<CASContext | undefined>(undefined);
|
||||
@ -15,6 +16,7 @@ export interface CASProviderProps {
|
||||
|
||||
export const CASProvider = ({ children }: CASProviderProps) => {
|
||||
const [user, setUser] = useState<User | undefined>(undefined);
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
login();
|
||||
}, []);
|
||||
@ -29,10 +31,9 @@ export const CASProvider = ({ children }: CASProviderProps) => {
|
||||
if (!sessionStorage.getItem('userToken')) {
|
||||
const { data: token } = await axios.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
|
||||
sessionStorage.setItem('userToken', token);
|
||||
setUser({ ...user, token });
|
||||
}
|
||||
const token = sessionStorage.getItem('userToken');
|
||||
setUser({ ...user, token });
|
||||
setToken(token);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
@ -50,5 +51,5 @@ export const CASProvider = ({ children }: CASProviderProps) => {
|
||||
window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`);
|
||||
}
|
||||
|
||||
return <CASContext.Provider value={{ user, logout }}>{children}</CASContext.Provider>;
|
||||
return <CASContext.Provider value={{ user, token, logout }}>{children}</CASContext.Provider>;
|
||||
};
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react';
|
||||
import { Course, Group, Basket, GroupType } from '../types';
|
||||
import axios from 'axios';
|
||||
import { CASContext } from './CASProvider';
|
||||
import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types';
|
||||
import { useSnackbar } from 'notistack';
|
||||
|
||||
import { createClassTime } from '../utils';
|
||||
import { axiosInstance } from '../utils/axiosInstance';
|
||||
interface CourseContext {
|
||||
courses: Array<Course>;
|
||||
basket: Array<Basket>;
|
||||
addToBasket: (courses: Course) => void;
|
||||
addGroup: (group: Group, id: number) => void;
|
||||
addCourseToBasket: (courses: Course) => void;
|
||||
changeGroupInBasket: (group: Group, id: number) => void;
|
||||
deleteFromBasket: (id: number) => void;
|
||||
saveBasket: () => void;
|
||||
selectSchedulerEvents: () => Array<SchedulerEvent>;
|
||||
selectBasketNames: () => Array<string>;
|
||||
selectBasketCourses: () => Array<Course>;
|
||||
}
|
||||
export const coursesContext = createContext<CourseContext | undefined>(undefined);
|
||||
|
||||
@ -19,28 +21,48 @@ interface CoursesProviderProps {
|
||||
}
|
||||
|
||||
export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const { closeSnackbar } = useSnackbar();
|
||||
//fetch courses with groups
|
||||
const [courses, setCourses] = useState<Array<Course>>([]);
|
||||
const [basket, setBasket] = useState<Array<Basket>>([]);
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const { closeSnackbar } = useSnackbar();
|
||||
|
||||
const CAS = useContext(CASContext)!;
|
||||
const token = CAS?.user?.token;
|
||||
|
||||
const selectBasketIds = (basket: Array<Basket>) => {
|
||||
const classesIds = basket.map((course) => course.classes.id);
|
||||
const lecturesIds = basket.map((course) => course?.lecture?.id);
|
||||
|
||||
return lecturesIds[0] === undefined ? classesIds : [...classesIds, ...lecturesIds];
|
||||
const selectBasketIds = () => {
|
||||
const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined);
|
||||
const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined);
|
||||
return [...classesIds, ...lecturesIds];
|
||||
};
|
||||
|
||||
const addToBasket = (course: Course) => {
|
||||
const selectBasketNames = () => basket.map(({ name }) => name);
|
||||
|
||||
const selectBasketCourses = () => {
|
||||
const basketNames = selectBasketNames();
|
||||
return basketNames.reduce((sum, basketName) => {
|
||||
const course = courses.find(({ name }) => basketName === name);
|
||||
return course === undefined ? sum : [...sum, course];
|
||||
}, [] as Array<Course>);
|
||||
};
|
||||
|
||||
const selectSchedulerEvents = () => {
|
||||
return basket.reduce((res, el) => {
|
||||
const { name } = el;
|
||||
if (el.classes) {
|
||||
const { time } = el.classes;
|
||||
res.push({ ...el.classes, name, time: createClassTime(time) });
|
||||
}
|
||||
if (el.lecture) {
|
||||
const { time } = el.lecture;
|
||||
res.push({ ...el.lecture, name, time: createClassTime(time) });
|
||||
}
|
||||
return res;
|
||||
}, [] as Array<SchedulerEvent>);
|
||||
};
|
||||
|
||||
const addCourseToBasket = (course: Course) => {
|
||||
const courseToBasket: Basket = {
|
||||
name: course.name,
|
||||
id: course.id,
|
||||
classes: course.classes[0],
|
||||
classes: course.classes !== undefined ? course.classes[0] : undefined,
|
||||
lecture: course.lectures !== undefined ? course.lectures[0] : undefined,
|
||||
};
|
||||
setBasket([...basket, courseToBasket]);
|
||||
@ -49,18 +71,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
|
||||
|
||||
const saveBasket = async () => {
|
||||
const basketIds = selectBasketIds(basket);
|
||||
|
||||
const config = {
|
||||
method: 'post' as const,
|
||||
url: `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: JSON.stringify(basketIds),
|
||||
};
|
||||
|
||||
const basketIds = selectBasketIds();
|
||||
const action = (key: any) => (
|
||||
<>
|
||||
<button
|
||||
@ -74,12 +85,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
);
|
||||
|
||||
try {
|
||||
await axios.request(config);
|
||||
await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, JSON.stringify(basketIds));
|
||||
enqueueSnackbar('Plan został zapisany', {
|
||||
variant: 'success',
|
||||
action,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log('error: ', e);
|
||||
enqueueSnackbar('Zapisywanie planu nie powiodło się', {
|
||||
variant: 'error',
|
||||
action,
|
||||
@ -87,7 +99,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
}
|
||||
};
|
||||
|
||||
const addGroup = (choosenGroup: Group, id: number) => {
|
||||
const changeGroupInBasket = (choosenGroup: Group, id: number) => {
|
||||
const basketCourse = basket.filter((course) => course.id === id)[0];
|
||||
const { type } = choosenGroup;
|
||||
if (type === GroupType.CLASS) {
|
||||
@ -102,18 +114,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
};
|
||||
|
||||
const getNewestTimetable = async () => {
|
||||
const config = {
|
||||
method: 'get' as const,
|
||||
url: `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
};
|
||||
try {
|
||||
let { data: basket } = await axios.request(config);
|
||||
if (basket === '') {
|
||||
basket = [];
|
||||
}
|
||||
const { data } = await axiosInstance.get(
|
||||
`${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
|
||||
);
|
||||
const basket = data === '' ? [] : data;
|
||||
setBasket(basket);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
@ -122,10 +127,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
|
||||
const fetchClasses = async () => {
|
||||
try {
|
||||
const { data: courses } = await axios.get<Array<Course>>(
|
||||
const { data: courses } = await axiosInstance.get<Array<Course>>(
|
||||
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
|
||||
);
|
||||
setCourses(courses);
|
||||
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
setCourses(sortedCourses);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
@ -133,13 +139,23 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
|
||||
useEffect(() => {
|
||||
fetchClasses();
|
||||
if (token) {
|
||||
getNewestTimetable();
|
||||
}
|
||||
}, [token]);
|
||||
getNewestTimetable();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket, saveBasket }}>
|
||||
<coursesContext.Provider
|
||||
value={{
|
||||
courses,
|
||||
basket,
|
||||
addCourseToBasket,
|
||||
changeGroupInBasket,
|
||||
deleteFromBasket,
|
||||
saveBasket,
|
||||
selectSchedulerEvents,
|
||||
selectBasketNames,
|
||||
selectBasketCourses,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</coursesContext.Provider>
|
||||
);
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
// import { Group, Course } from '../types';
|
||||
|
||||
export enum Types {
|
||||
addToBasket = 'ADD_CHOOSEN_COURSE',
|
||||
removeChoosenCourse = 'REMOVE_CHOOSEN_COURSE',
|
||||
addGroup = 'ADD_CHOOSEN_GROUP',
|
||||
removeChoosenGroup = 'REMOVE_CHOOSEN_GROUP',
|
||||
}
|
||||
|
||||
// type ChoosenCoursesPayload = {
|
||||
// [Types.addToBasket]: {};
|
||||
// };
|
||||
|
||||
// type ChoosenGroupsPayload = {
|
||||
// [Types.Create]: {
|
||||
// id: number;
|
||||
// name: string;
|
||||
// price: number;
|
||||
// };
|
||||
// };
|
||||
|
||||
// export const choosenGroupsReducer = (state, action) => {
|
||||
// switch (action.type) {
|
||||
// case Types.addGroup:
|
||||
// return add;
|
||||
// }
|
||||
// };
|
||||
|
||||
//https://dev.to/elisealcala/react-context-with-usereducer-and-typescript-4obm
|
||||
@ -7,7 +7,7 @@ export interface Basket {
|
||||
id: number;
|
||||
name: string;
|
||||
lecture?: Group;
|
||||
classes: Group;
|
||||
classes?: Group;
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
@ -24,11 +24,21 @@ export interface Course {
|
||||
id: number;
|
||||
name: string;
|
||||
lectures?: Array<Group>;
|
||||
classes: Array<Group>;
|
||||
classes?: Array<Group>;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
name?: string;
|
||||
surname?: string;
|
||||
token: string | null;
|
||||
}
|
||||
|
||||
export interface SchedulerEvent {
|
||||
id: number;
|
||||
day: number;
|
||||
time: [string, string];
|
||||
lecturer: string;
|
||||
room: string;
|
||||
type: GroupType;
|
||||
capacity?: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
15
src/utils/axiosInstance.ts
Normal file
15
src/utils/axiosInstance.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export const axiosInstance = axios.create();
|
||||
|
||||
axiosInstance.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = sessionStorage.getItem('userToken');
|
||||
config.headers['Authorization'] = 'Bearer ' + token;
|
||||
config.headers['Content-Type'] = 'application/json';
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
Promise.reject(error);
|
||||
},
|
||||
);
|
||||
80
src/utils/index.ts
Normal file
80
src/utils/index.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import { courseStartTimeToEventRow } from '../constants/index';
|
||||
import { SchedulerEvent } from '../types';
|
||||
|
||||
export const createClassTime = (startTime: string): [string, string] => {
|
||||
const startTimeMapped = courseStartTimeToEventRow[startTime];
|
||||
const endTime = Object.keys(courseStartTimeToEventRow).find(
|
||||
(key) => courseStartTimeToEventRow[key] === startTimeMapped + 1,
|
||||
)!;
|
||||
return [startTime, endTime];
|
||||
};
|
||||
|
||||
export const selectGroupsToShow = (schedulerEvents: Array<SchedulerEvent>, index: number) => {
|
||||
return schedulerEvents.filter(({ time }: { time: [string, string] }) => courseStartTimeToEventRow[time[0]] === index);
|
||||
};
|
||||
|
||||
type Procedure = (...args: any[]) => any;
|
||||
|
||||
interface Debounce {
|
||||
(...args: any[]): any;
|
||||
clear: () => void;
|
||||
flush: () => void;
|
||||
}
|
||||
|
||||
export const debounce = (func: Procedure, wait: number, immediate: boolean = false) => {
|
||||
let timeout: number | null;
|
||||
let args: any;
|
||||
let context: any;
|
||||
let result: any;
|
||||
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedFunc: Procedure = function (this: any) {
|
||||
context = this;
|
||||
args = arguments;
|
||||
const callNow = immediate && !timeout;
|
||||
|
||||
if (!timeout) {
|
||||
timeout = window.setTimeout(later, wait);
|
||||
}
|
||||
|
||||
if (callNow) {
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
}
|
||||
};
|
||||
|
||||
const flush = () => {
|
||||
if (timeout) {
|
||||
result = func.apply(context, args);
|
||||
context = args = null;
|
||||
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
}
|
||||
};
|
||||
|
||||
const debounced: Debounce = (() => {
|
||||
const f: any = debouncedFunc;
|
||||
f.clear = clear;
|
||||
f.flush = flush;
|
||||
return f;
|
||||
})();
|
||||
|
||||
return debounced;
|
||||
};
|
||||
Reference in New Issue
Block a user