delete from basket

This commit is contained in:
wrzesinski-hubert 2020-09-28 18:36:38 +02:00
parent fe1d103759
commit c1cf27d828
3 changed files with 41 additions and 18 deletions

View File

@ -5,6 +5,7 @@ import { Course, Group } from '../types/index';
import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
import CloseIcon from '../assets/close.svg';
interface ClassExandIconProps {
isSelected: boolean;
@ -23,6 +24,7 @@ const CourseStyled = styled.div`
border-radius: 10px;
cursor: pointer;
align-items: stretch;
position:relative;
`;
const CourseNameStyled = styled.div`
@ -67,21 +69,32 @@ const useStyles = makeStyles({
},
});
const DeleteFromBasketIcon = styled.img`
width: 20px;
cursor: pointer;
position:absolute;
left:235px;
top:5px;
:hover{
color:red;
}
`;
interface CourseCardProps {
course: Course;
}
export const CourseCard = ({course }: CourseCardProps) => {
export const CourseCard = ({ course }: CourseCardProps) => {
const [isSelected, setSelected] = useState(false);
const classes = useStyles();
const { addGroup } = useContext(coursesContext)!;
const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
return (
<CourseStyled>
<DeleteFromBasketIcon alt="close" src={CloseIcon} onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{course.groups.map((group, index) => (

View File

@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
paper: {
padding: theme.spacing(1),
marginLeft: 5,
textAlign:"center"
textAlign: 'center',
},
}),
);
@ -36,14 +36,16 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
`;
const Classes = styled.div<SchedulerEventProps>`
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
border-radius: 10px;
padding-left: 5px;
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;
margin-right: 5px;
text-align: center;
`;
interface SchedulerRowProps {
@ -57,12 +59,12 @@ interface 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);
const [popoverId, setPopoverId] = useState<string | null>(null);
//looks weird
const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
setAnchorEl(event.currentTarget);
setPopoverId(event.currentTarget.id)
setPopoverId(event.currentTarget.id);
};
const handlePopoverClose = () => {
@ -72,10 +74,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
const open = Boolean(anchorEl);
useEffect(()=>{
console.log("1231312"+popoverId);
},[popoverId])
return (
<>
{[...Array(5)].map((_, eventIndex) => (
@ -103,7 +101,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose}
>
{groups[index].name}<p>{groups[index].room}</p>
<p>
{groups[index].name}
<br></br>
{groups[index].room}
</p>
</Classes>
<Popover
id={`mouse-over-popover`}
@ -111,7 +113,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
classes={{
paper: classes.paper,
}}
open={(popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`)}
open={popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
@ -124,7 +126,11 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
onClose={handlePopoverClose}
disableRestoreFocus
>
<Typography><p>{groups[index].name}</p><p>{groups[index].lecturer}</p><p>{groups[index].room}</p></Typography>
<Typography>
<p>{groups[index].name}</p>
<p>{groups[index].lecturer}</p>
<p>{groups[index].room}</p>
</Typography>
</Popover>
</>
),

View File

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