delete from basket

src/components/CourseCard.tsx

@@ -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) => {
-  
   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) => (

src/components/SchedulerRow.tsx

@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
     paper: {
       padding: theme.spacing(1),
       marginLeft: 5,
-      textAlign:"center"
+      textAlign: 'center',
     },
   }),
 );
@@ -36,9 +36,11 @@ 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;
@@ -62,7 +64,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
   //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>
                 </>
               ),

src/contexts/CoursesProvider.tsx

@@ -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>
   );
 };