delete from basket
This commit is contained in:
parent
fe1d103759
commit
c1cf27d828
@ -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) => (
|
||||
|
@ -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>
|
||||
</>
|
||||
),
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user