Merge branch 'master' of git.plannaplan.pl:y0rune/frontend

This commit is contained in:
wrzesinski-hubert 2020-10-01 18:19:04 +02:00
commit 3cf62c8298
11 changed files with 252 additions and 134 deletions

View File

@ -7,19 +7,19 @@ import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
display: flex; display: flex;
height: calc(100vh - 80px);
`; `;
export const App = () => { export const App = () => {
const [isOpenTransfer, setOpenTransfer] = useState(false); const [isOpenTransfer, setOpenTransfer] = useState(false);
const handleTransfer = () => { const handleTransfer = () => {
setOpenTransfer(!isOpenTransfer); setOpenTransfer(!isOpenTransfer);
}; };
return ( return (
<> <>
<Topbar handleTransfer={handleTransfer} /> <Topbar handleTransfer={handleTransfer} />
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} /> <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper> <Wrapper>
<Scheduler /> <Scheduler />

View File

@ -1,10 +1,11 @@
import React, { useContext, MouseEvent } from 'react'; import React, { useState, useContext, MouseEvent } from 'react';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import ExpandIcon from '../assets/expand.png'; import ExpandIcon from '../assets/expand.png';
import { Course, Group } from '../types/index'; import { Course, Group, GroupType } from '../types/index';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components'; import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { ReactComponent as CloseIcon } from '../assets/close.svg';
interface ClassExandIconProps { interface ClassExandIconProps {
isSelected: boolean; isSelected: boolean;
@ -23,6 +24,7 @@ const CourseStyled = styled.div`
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
align-items: stretch; align-items: stretch;
position: relative;
`; `;
const CourseNameStyled = styled.div` const CourseNameStyled = styled.div`
@ -30,14 +32,18 @@ const CourseNameStyled = styled.div`
padding-bottom: 10px; padding-bottom: 10px;
`; `;
const ClassGroupStyled = styled.div` interface ClassGroupProps{
groupType:GroupType;
}
const ClassGroupStyled = styled.div<ClassGroupProps>`
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
:hover { :hover {
cursor: pointer; cursor: pointer;
transition: 1s;
background-color: #8bc8fb;
} }
outline-offset: -5px;
outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
`; `;
const ClassExandIconStyled = styled.img<ClassExandIconProps>` const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@ -67,33 +73,43 @@ const useStyles = makeStyles({
}, },
}); });
const DeleteFromBasketIcon = styled(CloseIcon)`
width: 20px;
cursor: pointer;
position: absolute;
left: 235px;
top: -10px;
&:hover {
fill: #d3d3d3;
}
`;
interface CourseCardProps { interface CourseCardProps {
onCardClick: (event: MouseEvent) => void;
course: Course; course: Course;
id: string;
isSelected: boolean;
} }
export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => { export const CourseCard = ({ course }: CourseCardProps) => {
const [isSelected, setSelected] = useState(false);
const classes = useStyles(); const classes = useStyles();
const { addGroup } = useContext(coursesContext)!; const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
const onGroupClick = (group: Group, id: number) => addGroup(group, id); const onGroupClick = (group: Group, id: number) => addGroup(group, id);
return ( return (
<CourseStyled onClick={onCardClick} id={id}> <CourseStyled>
<CourseNameStyled>{course.name}</CourseNameStyled> <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit> <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{course.groups.map((group, index) => ( {course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}> <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
<p> <p>
{group.time} {group.room} <br></br> {group.lecturer} {group.time} {group.room} <br></br> {group.lecturer}
</p> </p>
</ClassGroupStyled> </ClassGroupStyled>
))} ))}
</Collapse> </Collapse>
<div onClick={onCardClick} id={id}> <div onClick={() => setSelected(!isSelected)}>
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} /> <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
</div> </div>
</CourseStyled> </CourseStyled>

View File

@ -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 axios from 'axios';
import { Input } from '@material-ui/core'; import { Input } from '@material-ui/core';
import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import ClickAwayListener from '@material-ui/core/ClickAwayListener';
@ -64,13 +64,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
}, [input, open, basket]); }, [input, open, basket]);
useEffect(() => { useEffect(() => {
if (clearInput) { clearInput && (setInput(''), handleClearInput());
setInput('');
handleClearInput();
}
}, [clearInput]); }, [clearInput]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value); const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
const handleClick = () => setOpen(true); const handleClick = () => setOpen(true);
@ -83,7 +80,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
const name = target.textContent; const name = target.textContent;
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
const course: Basket = { name: name.trim(), id: parseInt(id), lecture: null, classes: null }; const course: Basket = { name: name.trim(), id: parseInt(id) };
addToBasket(course); addToBasket(course);
setOpen(false); setOpen(false);

View File

@ -9,8 +9,8 @@ const RightbarStyled = styled.div`
padding-right: 15px; padding-right: 15px;
text-align: center; text-align: center;
font-family: Lato; font-family: Lato;
height: 100%;
width: 300px; width: 300px;
height: 85vh;
overflow-y: scroll; overflow-y: scroll;
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 10px; border-radius: 10px;
@ -27,12 +27,24 @@ const RightbarStyled = styled.div`
} }
`; `;
const RightbarTextStyled = styled.div` const RightbarTextStyled = styled.div`
display: flex;
flex-direction: column;
border-bottom: 1px solid; border-bottom: 1px solid;
`; `;
export const Rightbar = () => { const SaveButton = styled.div`
const [selectedCardId, setSelectedCardId] = useState<string | null>(null); display: flex;
justify-content: center;
align-items: center;
background-color: rgb(100, 181, 246) !important;
border-radius: 10px;
cursor: pointer;
height: 40px;
background-color: red;
margin-bottom: 10px;
`;
export const Rightbar = () => {
const { courses, basket } = useContext(coursesContext)!; const { courses, basket } = useContext(coursesContext)!;
const getBasketGroups = () => { const getBasketGroups = () => {
@ -42,27 +54,18 @@ export const Rightbar = () => {
const filteredCourses = getBasketGroups(); const filteredCourses = getBasketGroups();
//działa clunky
const onCardClick = (event: MouseEvent) => {
const target = event.currentTarget;
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
};
//need to insert student name from db and course maybe based on current time or from db too //need to insert student name from db and course maybe based on current time or from db too
return ( return (
<RightbarStyled> <RightbarStyled>
<RightbarTextStyled> <RightbarTextStyled>
Hubert Wrzesiński<br></br> <p>
Semestr zimowy 2020/2021 Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</p>
<SaveButton>SAVE</SaveButton>
</RightbarTextStyled> </RightbarTextStyled>
{filteredCourses.map((course, index) => ( {filteredCourses.map((course, index) => (
<CourseCard <CourseCard course={course} key={index} />
course={course}
key={index}
id={index.toString()}
onCardClick={onCardClick}
isSelected={selectedCardId === index.toString()}
/>
))} ))}
</RightbarStyled> </RightbarStyled>
); );

View File

@ -1,32 +1,22 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, MouseEvent, useRef } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { SchedulerEvents } from './SchedulerEvents'; import { SchedulerEvents } from './SchedulerEvents';
import { days, hours } from '../constants/index'; import { days, hours } from '../constants/index';
import styled from 'styled-components'; import styled from 'styled-components/macro';
const SchedulerWrapper = styled.div` const SchedulerWrapper = styled.div`
flex-grow: 3;
margin-top: 20px;
border-collapse: collapse; border-collapse: collapse;
flex-grow: 1;
`; `;
const TableBody = styled.div` const TableBody = styled.div`
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
`; `;
const TableRow = styled.div` const TableRow = styled.div`
display: flex; display: flex;
flex-direction: row;
`;
const TableCell = styled.div`
border: 1px solid #ddd;
padding: 10px;
text-align: center;
flex: 1;
`; `;
const TableHead = styled.div` const TableHead = styled.div`
@ -34,57 +24,53 @@ const TableHead = styled.div`
width: 100%; width: 100%;
`; `;
const TableHeadCell = styled.div` interface TableCellProps {
height: number;
}
const TableCell = styled.div<TableCellProps>`
height: ${({ height }) => height}px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px; display: flex;
text-align: center; align-items: center;
justify-content: center;
flex: 1; flex: 1;
font-size: 24px;
`;
const T = styled.table`
width: 100%;
height: 100%;
`; `;
export const Scheduler = () => { export const Scheduler = () => {
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
const cellRef = useRef<HTMLDivElement>(null); const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0); const [cellWidth, setCellWidth] = useState(0);
const [cellTop, setCellTop] = useState(0); const [cellTop, setCellTop] = useState(0);
const wrapperRef = useRef<HTMLDivElement>(null);
const [wrapperHeight, setWrapperHeight] = useState(0);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
if (cellRef.current) { if (cellRef.current && wrapperRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width); setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top); setCellTop(cellRef.current.getBoundingClientRect().top);
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
} }
}; };
handleResize(); handleResize();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
}, []); }, []);
useEffect(() => {
const displayEvents = () => {
currentEventsIds.map((eventId: string) => {
const event = document.getElementById(eventId);
if (event) {
event.style.display = 'block';
}
});
};
displayEvents();
}, [currentEventsIds]);
// const handleClick = (e: React.MouseEvent) => {
// const cellId = e.currentTarget.id;
// const column = cellId.slice(0, 1);
// const row = cellId.slice(1);
// const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
// setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
// };
return ( return (
<> <>
<SchedulerWrapper> <SchedulerWrapper ref={wrapperRef}>
<TableHead> <TableHead>
{days.map((day, index) => ( {days.map((day, index) => (
<TableHeadCell key={index}>{day}</TableHeadCell> <TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
{day}
</TableCell>
))} ))}
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -92,15 +78,17 @@ export const Scheduler = () => {
<TableRow key={indexRow}> <TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) => {[hour, '', '', '', '', ''].map((value, indexCell) =>
indexRow === 0 && indexCell === 1 ? ( indexRow === 0 && indexCell === 1 ? (
<TableCell key={`${indexRow}${indexCell}`} ref={cellRef}></TableCell> <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
) : ( ) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell> <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
), ),
)} )}
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} /> <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
</SchedulerWrapper> </SchedulerWrapper>
</> </>
); );

View File

@ -1,15 +1,15 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState, MouseEvent } from 'react';
import { SchedulerRow } from './SchedulerRow'; import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import { Group, Basket } from '../types'; import { Group, Basket } from '../types';
import classes from '*.module.css';
interface SchedulerEventsProps { interface SchedulerEventsProps {
cellTop: number; cellTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number;
} }
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => { export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
const { basket } = useContext(coursesContext)!; const { basket } = useContext(coursesContext)!;
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]); const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@ -28,20 +28,21 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
useEffect(() => { useEffect(() => {
function mapGroupTimeToEventRow(basket: Array<Basket>) { function mapGroupTimeToEventRow(basket: Array<Basket>) {
const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array<Group>; const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array<Group>; const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
const merged = [...classes, ...lectures]; const merged = [...classes, ...lectures];
if (merged.length >= 1) { //deleted if statement, maybe it is needed
const groupsMapped = merged.map(({ id, day, lecturer, room, time }) => ({ const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
id, id,
day, day: day === 5 ? 4 : day,
lecturer, lecturer,
room, room,
eventRow: groupTimeToEventRowMapping[time], eventRow: groupTimeToEventRowMapping[time],
})); name,
setChoosenGroupsMappedToEvents(groupsMapped); type,
} }));
setChoosenGroupsMappedToEvents(groupsMapped);
} }
mapGroupTimeToEventRow(basket); mapGroupTimeToEventRow(basket);
}, [basket]); }, [basket]);
@ -51,18 +52,25 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
{[...Array(6)].map((_, index) => ( {[...Array(6)].map((_, index) => (
<SchedulerRow <SchedulerRow
key={index} key={index}
groups={choosenGroupsMappedToEvents.filter((group: any) => { groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
return group.eventRow === index;
})}
indexRow={index} indexRow={index}
cellTop={ cellTop={
index == 3 index === 0
? cellTop + (25 + 80 * index) ? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
: index < 3 : index === 1
? cellTop + (12 + 80 * index) ? cellTop + (cellHeight + cellHeight * 2 * index)
: cellTop + (25 + 80 * index) : index === 2
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
: index === 3
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
: index === 4
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
: index === 5
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
: 0
} }
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight}
/> />
))} ))}
</div> </div>

View File

@ -1,32 +1,87 @@
import React from 'react'; import React, { MouseEvent, useEffect, useState } from 'react';
import { Group } from '../types'; import { Group, GroupType } 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),
marginLeft: 5,
textAlign: 'center',
},
}),
);
interface SchedulerEventProps { interface SchedulerEventProps {
eventIndex: number; eventIndex: number;
cellTop: number; cellTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number;
} }
const SchedulerEvent = styled.div<SchedulerEventProps>` const SchedulerEvent = styled.div<SchedulerEventProps>`
position: absolute; position: absolute;
top: ${(props) => props.cellTop}px; display: flex;
left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px; top: ${({ cellTop }) => cellTop}px;
width: ${(props) => (props.cellWidth * 2) / 3}px; left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
height: 69px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
background-color: lightblue; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
z-index: 2; z-index: 2;
`; `;
interface ClassesProps{
cellWidth: number;
cellHeight: number;
groupType: GroupType;
}
const Classes = styled.div<ClassesProps>`
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
border-radius: 10px;
/* background-color: rgb(100, 181, 246); */
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
margin-right: 5px;
text-align: center;
background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"}
`;
interface SchedulerRowProps { interface SchedulerRowProps {
groups: Array<Group>; groups: Array<Group & { name: string }>;
indexRow: number; indexRow: number;
cellTop: number; cellTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number;
} }
export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => { export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null);
console.log("123s"+JSON.stringify(groups));
//looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget);
setPopoverId(event.currentTarget.id);
};
const handlePopoverClose = () => {
setAnchorEl(null);
setPopoverId(null);
};
const open = Boolean(anchorEl);
return ( return (
<> <>
@ -35,11 +90,58 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
eventIndex={eventIndex} eventIndex={eventIndex}
cellTop={cellTop} cellTop={cellTop}
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight}
key={eventIndex} key={eventIndex}
id={`eventRow${indexRow}eventCol${eventIndex}`} id={`eventRow${indexRow}eventCol${eventIndex}`}
> >
{groups.map((group, index) => {groups.map(
group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>, (group, index) =>
group.day === eventIndex && (
<>
<Classes
groupType={group.type}
cellWidth={cellWidth}
cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
key={index}
aria-owns={open ? `mouse-over-popover` : undefined}
aria-haspopup="true"
onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose}
>
<p>
{groups[index].name}
<br></br>
{groups[index].room}
</p>
</Classes>
<Popover
id={`mouse-over-popover`}
className={classes.popover}
classes={{
paper: classes.paper,
}}
open={popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'center',
horizontal: 'left',
}}
onClose={handlePopoverClose}
disableRestoreFocus
>
<Typography>
<p>{groups[index].name}</p>
<p>{groups[index].lecturer}</p>
<p>{groups[index].room}</p>
</Typography>
</Popover>
</>
),
)} )}
</SchedulerEvent> </SchedulerEvent>
))} ))}

View File

@ -102,9 +102,9 @@ export default function ({ handleTransfer }: TopbarProps) {
<TopbarInputStyled> <TopbarInputStyled>
<TopbarInputIconStyled alt="search" src={Search} /> <TopbarInputIconStyled alt="search" src={Search} />
<TopbarInputFieldStyled> <TopbarInputFieldStyled>
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput}/> <Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
</TopbarInputFieldStyled> </TopbarInputFieldStyled>
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput}/> <TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
</TopbarInputStyled> </TopbarInputStyled>
<TopbarIconBox> <TopbarIconBox>
<TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} /> <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
@ -114,4 +114,4 @@ export default function ({ handleTransfer }: TopbarProps) {
</TopbarIconBox> </TopbarIconBox>
</Topbar> </Topbar>
); );
}; }

View File

@ -1,10 +1,10 @@
export const days = [ export const days = [
"", "",
"poniedziałek", "Poniedziałek",
"wtorek", "Wtorek",
"środa", "Środa",
"czwartek", "Czwartek",
"piątek", "Piątek",
]; ];
export const hours = [ export const hours = [
"8:00", "8:00",

View File

@ -1,4 +1,4 @@
import React, { useState, createContext, useEffect } from 'react'; import React, { useState, createContext, useEffect, ReactNode } from 'react';
import { Course, Group, Basket, GroupType } from '../types'; import { Course, Group, Basket, GroupType } from '../types';
import axios from 'axios'; import axios from 'axios';
@ -7,11 +7,12 @@ interface CourseContext {
basket: Array<Basket>; basket: Array<Basket>;
addToBasket: (courses: Basket) => void; addToBasket: (courses: Basket) => void;
addGroup: (group: Group, id: number) => void; addGroup: (group: Group, id: number) => void;
deleteFromBasket: (id: number) => void;
} }
export const coursesContext = createContext<CourseContext | null>(null); export const coursesContext = createContext<CourseContext | null>(null);
interface CoursesProviderProps { interface CoursesProviderProps {
children: React.ReactNode; children: ReactNode;
} }
export const CoursesProvider = ({ children }: CoursesProviderProps) => { export const CoursesProvider = ({ children }: CoursesProviderProps) => {
@ -21,6 +22,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const addToBasket = (course: Basket) => setBasket([...basket, course]); const addToBasket = (course: Basket) => setBasket([...basket, course]);
const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id));
useEffect(() => { useEffect(() => {
console.log('BASKET'); console.log('BASKET');
console.log(basket); console.log(basket);
@ -52,6 +56,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
}, []); }, []);
return ( return (
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup }}>{children}</coursesContext.Provider> <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>{children}</coursesContext.Provider>
); );
}; };

View File

@ -6,8 +6,8 @@ export enum GroupType {
export interface Basket { export interface Basket {
id: number; id: number;
name: string; name: string;
lecture: Group | null; lecture?: Group;
classes: Group | null; classes?: Group;
} }
export interface Group { export interface Group {