snackbar

src/components/Rightbar.tsx

@@ -1,8 +1,11 @@
-import React, { useState, useContext, MouseEvent } from 'react';
+import React, { useContext } from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
 import { CourseCard } from './CourseCard';
 import { coursesContext } from '../contexts/CoursesProvider';
+import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
 import styled from 'styled-components';
 
+
 const RightbarStyled = styled.div`
   padding-top: 10px;
   padding-left: 15px;
@@ -47,9 +50,15 @@ const SaveButton = styled.div`
   }
 `;
 
+function Alert(props: AlertProps) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
 export const Rightbar = () => {
   const { courses, basket, saveBasket } = useContext(coursesContext)!;
 
+  const [open, setOpen] = React.useState(false);
+
   const getBasketGroups = () => {
     const names = basket.map(({ name }) => name);
     return courses.filter(({ name }) => names.includes(name));
@@ -57,6 +66,19 @@ export const Rightbar = () => {
 
   const filteredCourses = getBasketGroups();
 
+  const save = () => {
+    saveBasket();
+    setOpen(true);
+  }
+
+  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   //need to insert student name from db and course maybe based on current time or from db too
   return (
     <RightbarStyled>
@@ -65,11 +87,16 @@ export const Rightbar = () => {
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </p>
-        <SaveButton onClick={saveBasket}>SAVE</SaveButton>
+        <SaveButton onClick={save}>SAVE</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
         <CourseCard course={course} key={index} />
       ))}
+            <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="success">
+          This is a success message!
+        </Alert>
+      </Snackbar>
     </RightbarStyled>
   );
 };

src/components/SchedulerRow.tsx

@@ -52,7 +52,7 @@ const Classes = styled.div<ClassesProps>`
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   margin-right: 5px;
   text-align: center;
-  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"}
+  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"};
 `;
 
 interface SchedulerRowProps {
@@ -68,8 +68,6 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
   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);