Save timetable button connected to backend

package-lock.json

@@ -8794,6 +8794,15 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "notistack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-1.0.1.tgz",
+      "integrity": "sha512-2T1WkokzRCM8N9EdueaXja160IMFIMHVhRu0fGkDje7qCzwBHlTMZY2NULQzB2GFOO6iGVzl5GCX2XrJIzI8bw==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
+    "notistack": "^1.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

src/components/Rightbar.tsx

@@ -1,10 +1,8 @@
 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';
-import { debounce } from "lodash";
+import { debounce } from 'lodash';
 
 const RightbarStyled = styled.div`
   padding-top: 10px;
@@ -47,18 +45,12 @@ const SaveButton = styled.div`
   &:hover {
     color: white;
   }
-  box-shadow: 6px 6px 6px -2px rgba(0,0,0,0.59);
+  box-shadow: 6px 6px 6px -2px rgba(0, 0, 0, 0.59);
 `;
 
-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));
@@ -66,19 +58,7 @@ export const Rightbar = () => {
 
   const filteredCourses = getBasketGroups();
 
-  const save = debounce(() => {
-    saveBasket();
-    setOpen(true);
-    console.log("zmiana")
-  },500);
-
-  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
-    if (reason === 'clickaway') {
-      return;
-    }
-
-    setOpen(false);
-  };
+  const handleSave = debounce(() => saveBasket(), 500);
 
   //need to insert student name from db and course maybe based on current time or from db too
   return (
@@ -88,16 +68,11 @@ export const Rightbar = () => {
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </p>
-        <SaveButton onClick={save}>ZAPISZ</SaveButton>
+        <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
         <CourseCard course={course} key={index} />
       ))}
-      <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success">
-          Zapisano plan!
-        </Alert>
-      </Snackbar>
     </RightbarStyled>
   );
 };

src/contexts/CoursesProvider.tsx

@@ -1,7 +1,8 @@
 import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react';
 import { Course, Group, Basket, GroupType } from '../types';
 import axios from 'axios';
-import { CASContext, CASProvider } from './CASProvider';
+import { CASContext } from './CASProvider';
+import { useSnackbar } from 'notistack';
 
 interface CourseContext {
   courses: Array<Course>;
@@ -22,9 +23,18 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const [courses, setCourses] = useState<Array<Course>>([]);
   const [basket, setBasket] = useState<Array<Basket>>([]);
 
+  const { enqueueSnackbar } = useSnackbar();
+
   const CAS = useContext(CASContext)!;
   const token = CAS?.user?.token;
 
+  const selectBasketIds = (basket: Array<Basket>) => {
+    const classesIds = basket.map((course) => course.classes.id);
+    const lecturesIds = basket.map((course) => course?.lecture?.id);
+
+    return lecturesIds[0] === undefined ? classesIds : [...classesIds, ...lecturesIds];
+  };
+
   const addToBasket = (course: Course) => {
     const courseToBasket: Basket = {
       name: course.name,
@@ -38,30 +48,33 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
 
   const saveBasket = async () => {
+    const basketIds = selectBasketIds(basket);
+
+    const config = {
+      method: 'post' as const,
+      url: `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`,
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      data: JSON.stringify(basketIds),
+    };
+
     try {
-      //to be deleted
-      let data = [7, 43, 54];
-      let json = JSON.stringify(data);
-      let post_data = { json_data: json };
-      const ech = await axios.post<Array<number>>(
-        `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`,
-        [7, 43, 54],
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      );
-      console.log('api response;', ech);
+      await axios.request(config);
+      enqueueSnackbar('Plan został zapisany', {
+        variant: 'success',
+      });
     } catch (e) {
-      console.log(e);
+      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
+        variant: 'error',
+      });
     }
-    console.log('saving to basket');
   };
 
   const addGroup = (choosenGroup: Group, id: number) => {
     const basketCourse = basket.filter((course) => course.id === id)[0];
-    const type = choosenGroup.type;
+    const { type } = choosenGroup;
     if (type === GroupType.CLASS) {
       setBasket(
         basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: choosenGroup } : basket)),
@@ -78,7 +91,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
       const { data: courses } = await axios.get<Array<Course>>(
         `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
       );
-      courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1));
+      courses.sort((a, b) => (a.name > b.name ? 1 : -1));
       setCourses(courses);
     };
     fetchData();

src/index.tsx

@@ -4,15 +4,24 @@ import { App } from './components/App';
 import { CASProvider } from './contexts/CASProvider';
 import { CoursesProvider } from './contexts/CoursesProvider';
 import { GlobalStyles } from './styles/GlobalStyles';
+import { SnackbarProvider } from 'notistack';
 
 ReactDOM.render(
   <>
-    <CASProvider>
-      <CoursesProvider>
-        <GlobalStyles />
-        <App />
-      </CoursesProvider>
-    </CASProvider>
+    <SnackbarProvider
+      maxSnack={3}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center',
+      }}
+    >
+      <CASProvider>
+        <CoursesProvider>
+          <GlobalStyles />
+          <App />
+        </CoursesProvider>
+      </CASProvider>
+    </SnackbarProvider>
   </>,
   document.getElementById('root'),
 );