From d6aa58fd345a3311b2d49401da0f4abd52e0fe57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Thu, 1 Oct 2020 19:51:06 +0200
Subject: [PATCH 1/4] Added splitting groups into lectures and classes

---
 .vscode/launch.json              | 15 +++++++++++++++
 src/components/CourseCard.tsx    | 28 +++++++++++++++-------------
 src/components/Dropdown.tsx      | 25 +++++++++++--------------
 src/contexts/CoursesProvider.tsx | 32 ++++++++++++++++++++++++++------
 src/types/index.ts               |  5 +++--
 5 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..f6b35a0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 803f9e3..3652166 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -32,8 +32,8 @@ const CourseNameStyled = styled.div`
   padding-bottom: 10px;
 `;
 
-interface ClassGroupProps{
-  groupType:GroupType;
+interface ClassGroupProps {
+  groupType: GroupType;
 }
 
 const ClassGroupStyled = styled.div<ClassGroupProps>`
@@ -42,8 +42,8 @@ const ClassGroupStyled = styled.div<ClassGroupProps>`
   :hover {
     cursor: pointer;
   }
-    outline-offset: -5px;
-    outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
+  outline-offset: -5px;
+  outline: ${({ groupType }) => (groupType === 'CLASS' ? '2px solid #5642AA' : '2px solid #866DF7')};
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@@ -89,10 +89,10 @@ interface CourseCardProps {
 }
 
 export const CourseCard = ({ course }: CourseCardProps) => {
-  const [isSelected, setSelected] = useState(false);
   const classes = useStyles();
-
   const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
+  const [isSelected, setSelected] = useState(false);
+  const groups = course.lectures === undefined ? course.classes : [...course.lectures, ...course.classes];
 
   const onGroupClick = (group: Group, id: number) => addGroup(group, id);
 
@@ -101,13 +101,15 @@ export const CourseCard = ({ course }: CourseCardProps) => {
       <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
       <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
-        {course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
-          <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
-            <p>
-              {group.time} {group.room} <br></br> {group.lecturer}
-            </p>
-          </ClassGroupStyled>
-        ))}
+        {groups
+          .sort((a, b) => b.type.localeCompare(a.type))
+          .map((group, index) => (
+            <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
+              <p>
+                {group.time} {group.room} <br></br> {group.lecturer}
+              </p>
+            </ClassGroupStyled>
+          ))}
       </Collapse>
       <div onClick={() => setSelected(!isSelected)}>
         <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 26186b5..c33caf1 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -7,6 +7,13 @@ import { Course, Basket } from '../types';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 
+const DropdownStyled = styled.div`
+  max-height: 420px;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+`;
+
 const CourseStyled = styled.div`
   position: relative;
   z-index: 10;
@@ -15,20 +22,13 @@ const CourseStyled = styled.div`
   background-color: #e6c759;
   font-size: 18px;
   font-family: Lato;
+  scroll-snap-align: end;
   :hover {
     background-color: #d4b851;
     cursor: pointer;
   }
 `;
 
-const DropdownStyled = styled.div`
-  max-height: 400px;
-  overflow-y: auto;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-`;
-
 const useStyles = makeStyles({
   topbarInput: {
     marginTop: '8px',
@@ -76,12 +76,9 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
   const onCourseClick = async (event: MouseEvent) => {
     const target = event.currentTarget;
     if (target.id && target.textContent) {
-      const id = target.id;
-      const name = target.textContent;
-
-      //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
-      const course: Basket = { name: name.trim(), id: parseInt(id) };
-
+      const course = filteredCourses.find(({ id }) => id.toString() === target.id)!;
+      console.log('added course is');
+      console.log(course);
       addToBasket(course);
       setOpen(false);
     }
diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx
index 70c7167..4f31d40 100644
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@@ -5,7 +5,7 @@ import axios from 'axios';
 interface CourseContext {
   courses: Array<Course>;
   basket: Array<Basket>;
-  addToBasket: (courses: Basket) => void;
+  addToBasket: (courses: Course) => void;
   addGroup: (group: Group, id: number) => void;
   deleteFromBasket: (id: number) => void;
 }
@@ -20,10 +20,17 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const [courses, setCourses] = useState<Array<Course>>([]);
   const [basket, setBasket] = useState<Array<Basket>>([]);
 
-  const addToBasket = (course: Basket) => setBasket([...basket, course]);
-
-  const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id));
+  const addToBasket = (course: Course) => {
+    const courseToBasket = {
+      name: course.name,
+      id: course.id,
+      classes: course.classes[0],
+      lecture: course.lectures !== undefined ? course.lectures[0] : undefined,
+    } as Basket;
+    setBasket([...basket, courseToBasket]);
+  };
 
+  const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
 
   useEffect(() => {
     console.log('BASKET');
@@ -48,14 +55,27 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const { data: courses } = await axios.get(`${process.env.REACT_APP_API_URL}/getCoursesWithGroups`);
+      const { data } = await axios.get<Array<{ id: string; name: string; groups: Array<Group> }>>(
+        `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
+      );
+      const courses = data.map(({ id, name, groups }) => ({
+        id: parseInt(id),
+        name,
+        lectures: groups.filter(({ type }) => type === GroupType.LECTURE),
+        classes: groups.filter(({ type }) => type === GroupType.CLASS),
+      })) as Array<Course>;
+      console.log('courses mapped');
+      console.log(courses);
       courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1));
+
       setCourses(courses);
     };
     fetchData();
   }, []);
 
   return (
-    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>{children}</coursesContext.Provider>
+    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>
+      {children}
+    </coursesContext.Provider>
   );
 };
diff --git a/src/types/index.ts b/src/types/index.ts
index 09c6f40..ee23cf1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,7 +7,7 @@ export interface Basket {
   id: number;
   name: string;
   lecture?: Group;
-  classes?: Group;
+  classes: Group;
 }
 
 export interface Group {
@@ -23,7 +23,8 @@ export interface Group {
 export interface Course {
   id: number;
   name: string;
-  groups: Array<Group>;
+  lectures?: Array<Group>;
+  classes: Array<Group>;
 }
 
 export interface User {

From ffce67ab42597a82b1e4be1e9a73b2c5437a7a6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciek=20G=C5=82owacki?= <glowackimaciej97@gmail.com>
Date: Thu, 1 Oct 2020 20:06:38 +0200
Subject: [PATCH 2/4] mocked saveBasket to backend

---
 src/components/Rightbar.tsx      |  7 +++++--
 src/contexts/CoursesProvider.tsx | 17 ++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index d300e33..f87c609 100644
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -42,10 +42,13 @@ const SaveButton = styled.div`
   height: 40px;
   background-color: red;
   margin-bottom: 10px;
+  &:hover {
+    color: #d3d3d3;
+  }
 `;
 
 export const Rightbar = () => {
-  const { courses, basket } = useContext(coursesContext)!;
+  const { courses, basket, saveBasket } = useContext(coursesContext)!;
 
   const getBasketGroups = () => {
     const names = basket.map(({ name }) => name);
@@ -62,7 +65,7 @@ export const Rightbar = () => {
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </p>
-        <SaveButton>SAVE</SaveButton>
+        <SaveButton onClick={saveBasket}>SAVE</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
         <CourseCard course={course} key={index} />
diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx
index 4f31d40..9206767 100644
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@@ -8,6 +8,7 @@ interface CourseContext {
   addToBasket: (courses: Course) => void;
   addGroup: (group: Group, id: number) => void;
   deleteFromBasket: (id: number) => void;
+  saveBasket: () => void;
 }
 export const coursesContext = createContext<CourseContext | null>(null);
 
@@ -32,12 +33,14 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
 
-  useEffect(() => {
-    console.log('BASKET');
-    console.log(basket);
-  }, [basket]);
-
-  //immutability
+  const saveBasket = () => {
+    // try {
+    //   axios.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add`);
+    // } catch (e) {
+    //   console.log(e);
+    // }
+    console.log('saving to basket');
+  };
 
   const addGroup = (choosenGroup: Group, id: number) => {
     const basketCourse = basket.filter((course) => course.id === id)[0];
@@ -74,7 +77,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   }, []);
 
   return (
-    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>
+    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket, saveBasket }}>
       {children}
     </coursesContext.Provider>
   );

From 15448503e37a03e48f944a58dc2eaeeae639c1ad Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Sun, 4 Oct 2020 17:21:51 +0200
Subject: [PATCH 3/4] snackbar

---
 package-lock.json               | 86 +++++++++++++++++++++------------
 package.json                    |  1 +
 src/components/Rightbar.tsx     | 31 +++++++++++-
 src/components/SchedulerRow.tsx |  4 +-
 4 files changed, 86 insertions(+), 36 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f7602f0..c6001fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1350,6 +1350,30 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      },
+      "dependencies": {
+        "@material-ui/utils": {
+          "version": "4.10.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+          "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0"
+          }
+        }
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
@@ -1415,7 +1439,7 @@
     },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.3",
-      "resolved": "https://npm.mlabs.pl:443/@sheerun%2fmutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
       "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw=="
     },
     "@svgr/babel-plugin-add-jsx-attribute": {
@@ -1529,7 +1553,7 @@
     },
     "@testing-library/dom": {
       "version": "6.16.0",
-      "resolved": "https://npm.mlabs.pl:443/@testing-library%2fdom/-/dom-6.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz",
       "integrity": "sha512-lBD88ssxqEfz0wFL6MeUyyWZfV/2cjEZZV3YRpb2IoJRej/4f1jB0TzqIOznTpfR1r34CNesrubxwIlAQ8zgPA==",
       "requires": {
         "@babel/runtime": "^7.8.4",
@@ -1552,7 +1576,7 @@
         },
         "@jest/types": {
           "version": "25.5.0",
-          "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
           "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -1563,7 +1587,7 @@
         },
         "@types/yargs": {
           "version": "15.0.5",
-          "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
           "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
           "requires": {
             "@types/yargs-parser": "*"
@@ -1571,7 +1595,7 @@
         },
         "ansi-styles": {
           "version": "4.2.1",
-          "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
           "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "requires": {
             "@types/color-name": "^1.1.1",
@@ -1599,7 +1623,7 @@
         },
         "chalk": {
           "version": "3.0.0",
-          "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -1608,7 +1632,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
@@ -1616,17 +1640,17 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://npm.mlabs.pl:443/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://npm.mlabs.pl:443/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "pretty-format": {
           "version": "25.5.0",
-          "resolved": "https://npm.mlabs.pl:443/pretty-format/-/pretty-format-25.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
           "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
           "requires": {
             "@jest/types": "^25.5.0",
@@ -1637,7 +1661,7 @@
         },
         "supports-color": {
           "version": "7.1.0",
-          "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
           "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
           "requires": {
             "has-flag": "^4.0.0"
@@ -1647,7 +1671,7 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
-      "resolved": "https://npm.mlabs.pl:443/@testing-library%2fjest-dom/-/jest-dom-4.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
       "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
@@ -1663,7 +1687,7 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
-      "resolved": "https://npm.mlabs.pl:443/@testing-library%2freact/-/react-9.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
       "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
@@ -1673,7 +1697,7 @@
     },
     "@testing-library/user-event": {
       "version": "7.2.1",
-      "resolved": "https://npm.mlabs.pl:443/@testing-library%2fuser-event/-/user-event-7.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
       "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
@@ -1877,7 +1901,7 @@
     },
     "@types/testing-library__dom": {
       "version": "6.14.0",
-      "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__dom/-/testing-library__dom-6.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
       "integrity": "sha512-sMl7OSv0AvMOqn1UJ6j1unPMIHRXen0Ita1ujnMX912rrOcawe4f7wu0Zt9GIQhBhJvH2BaibqFgQ3lP+Pj2hA==",
       "requires": {
         "pretty-format": "^24.3.0"
@@ -1885,7 +1909,7 @@
     },
     "@types/testing-library__react": {
       "version": "9.1.3",
-      "resolved": "https://npm.mlabs.pl:443/@types%2ftesting-library__react/-/testing-library__react-9.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.3.tgz",
       "integrity": "sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==",
       "requires": {
         "@types/react-dom": "*",
@@ -1895,7 +1919,7 @@
       "dependencies": {
         "@jest/types": {
           "version": "25.5.0",
-          "resolved": "https://npm.mlabs.pl:443/@jest%2ftypes/-/types-25.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
           "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -1906,7 +1930,7 @@
         },
         "@types/yargs": {
           "version": "15.0.5",
-          "resolved": "https://npm.mlabs.pl:443/@types%2fyargs/-/yargs-15.0.5.tgz",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
           "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
           "requires": {
             "@types/yargs-parser": "*"
@@ -1914,7 +1938,7 @@
         },
         "ansi-styles": {
           "version": "4.2.1",
-          "resolved": "https://npm.mlabs.pl:443/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
           "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "requires": {
             "@types/color-name": "^1.1.1",
@@ -1923,7 +1947,7 @@
         },
         "chalk": {
           "version": "3.0.0",
-          "resolved": "https://npm.mlabs.pl:443/chalk/-/chalk-3.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
           "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -1932,7 +1956,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://npm.mlabs.pl:443/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
@@ -1940,17 +1964,17 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://npm.mlabs.pl:443/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://npm.mlabs.pl:443/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "pretty-format": {
           "version": "25.5.0",
-          "resolved": "https://npm.mlabs.pl:443/pretty-format/-/pretty-format-25.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
           "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
           "requires": {
             "@jest/types": "^25.5.0",
@@ -1961,7 +1985,7 @@
         },
         "supports-color": {
           "version": "7.1.0",
-          "resolved": "https://npm.mlabs.pl:443/supports-color/-/supports-color-7.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
           "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
           "requires": {
             "has-flag": "^4.0.0"
@@ -4276,7 +4300,7 @@
     },
     "css.escape": {
       "version": "1.5.1",
-      "resolved": "https://npm.mlabs.pl:443/css.escape/-/css.escape-1.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
     },
     "cssdb": {
@@ -4717,7 +4741,7 @@
     },
     "dom-accessibility-api": {
       "version": "0.3.0",
-      "resolved": "https://npm.mlabs.pl:443/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
       "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA=="
     },
     "dom-converter": {
@@ -10339,7 +10363,7 @@
     },
     "prettier": {
       "version": "2.0.5",
-      "resolved": "https://npm.mlabs.pl:443/prettier/-/prettier-2.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
       "integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
       "dev": true
     },
@@ -11188,7 +11212,7 @@
     },
     "redent": {
       "version": "3.0.0",
-      "resolved": "https://npm.mlabs.pl:443/redent/-/redent-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
       "requires": {
         "indent-string": "^4.0.0",
@@ -12569,7 +12593,7 @@
     },
     "strip-indent": {
       "version": "3.0.0",
-      "resolved": "https://npm.mlabs.pl:443/strip-indent/-/strip-indent-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
       "requires": {
         "min-indent": "^1.0.0"
@@ -13351,7 +13375,7 @@
     },
     "wait-for-expect": {
       "version": "3.0.2",
-      "resolved": "https://npm.mlabs.pl:443/wait-for-expect/-/wait-for-expect-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz",
       "integrity": "sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag=="
     },
     "walker": {
diff --git a/package.json b/package.json
index 124c9f8..f8e9576 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.10.0",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index f87c609..1094c5b 100644
--- a/src/components/Rightbar.tsx
+++ b/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>
   );
 };
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index 9d62060..e3a6529 100644
--- a/src/components/SchedulerRow.tsx
+++ b/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);

From 0c7fe6348fa480ce6041b9ed2230d3424aa5f2fa Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Thu, 8 Oct 2020 20:21:52 +0200
Subject: [PATCH 4/4] css changes

---
 src/components/CourseCard.tsx      | 40 +++++++++++++++++++-----------
 src/components/Dropdown.tsx        | 17 +++++++++++++
 src/components/Rightbar.tsx        | 15 ++++++-----
 src/components/Scheduler.tsx       | 26 ++++++++++++-------
 src/components/SchedulerEvents.tsx |  2 +-
 src/components/SchedulerRow.tsx    |  5 +++-
 6 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 3652166..6c0bb0c 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -13,7 +13,7 @@ interface ClassExandIconProps {
 
 const CourseStyled = styled.div`
   display: flex;
-  min-height: 50px;
+  min-height: 40px;
   background-color: rgb(100, 181, 246) !important;
   align-items: center;
   justify-content: center;
@@ -25,25 +25,28 @@ const CourseStyled = styled.div`
   cursor: pointer;
   align-items: stretch;
   position: relative;
+  box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59);
 `;
 
 const CourseNameStyled = styled.div`
-  padding-top: 10px;
-  padding-bottom: 10px;
+padding-top:20px;
+padding-bottom:10px;
+padding-left:35px;
+padding-right:35px;
 `;
 
 interface ClassGroupProps {
   groupType: GroupType;
 }
 
-const ClassGroupStyled = styled.div<ClassGroupProps>`
+const ClassGroupStyled = styled.div`
+position:relative;
   padding-top: 1px;
   padding-bottom: 1px;
   :hover {
     cursor: pointer;
+    background-color:#9ED3FF;
   }
-  outline-offset: -5px;
-  outline: ${({ groupType }) => (groupType === 'CLASS' ? '2px solid #5642AA' : '2px solid #866DF7')};
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@@ -53,19 +56,25 @@ const ClassExandIconStyled = styled.img<ClassExandIconProps>`
   transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
 `;
 
+const TypeClass = styled.div<ClassGroupProps>`
+  position:absolute;
+  min-width:55px;
+  padding:1px;
+  top:5px;
+  border-radius:1px;
+`;
+
 const useStyles = makeStyles({
   expanded: {
     maxHeight: '244px',
     overflowY: 'auto',
-  },
-  '@global': {
-    '*::-webkit-scrollbar': {
+    '&::-webkit-scrollbar': {
       width: '0.4em',
     },
-    '*::-webkit-scrollbar-track': {
+    '&::-webkit-scrollbar-track': {
       '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
     },
-    '*::-webkit-scrollbar-thumb': {
+    '&::-webkit-scrollbar-thumb': {
       borderRadius: '10px',
       backgroundColor: '#d4b851',
       outline: '1px solid slategrey',
@@ -77,10 +86,10 @@ const DeleteFromBasketIcon = styled(CloseIcon)`
   width: 20px;
   cursor: pointer;
   position: absolute;
-  left: 235px;
-  top: -10px;
+  left: 230px;
+  top: -5px;
   &:hover {
-    fill: #d3d3d3;
+    fill: white;
   }
 `;
 
@@ -104,7 +113,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
         {groups
           .sort((a, b) => b.type.localeCompare(a.type))
           .map((group, index) => (
-            <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
+            <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
+              <TypeClass groupType={group.type}>{group.type==="CLASS"? "(Ćw.)" : "(Wyk.)"}</TypeClass>
               <p>
                 {group.time} {group.room} <br></br> {group.lecturer}
               </p>
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index c33caf1..b270f2d 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -12,6 +12,22 @@ const DropdownStyled = styled.div`
   overflow-y: auto;
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
+  z-index: 100;
+ position: relative;
+  border-radius:0px 0px 0px 15px;
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #f5f5f5;
+  }
+  ::-webkit-scrollbar {
+    width: 12px;
+    background-color: #f5f5f5;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #d4b851;
+    border: 1px solid;
+  }
 `;
 
 const CourseStyled = styled.div`
@@ -23,6 +39,7 @@ const CourseStyled = styled.div`
   font-size: 18px;
   font-family: Lato;
   scroll-snap-align: end;
+  border-bottom:1px solid;
   :hover {
     background-color: #d4b851;
     cursor: pointer;
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index 1094c5b..83a8db2 100644
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -5,7 +5,6 @@ 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;
@@ -32,22 +31,22 @@ const RightbarStyled = styled.div`
 const RightbarTextStyled = styled.div`
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid;
 `;
 
 const SaveButton = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgb(100, 181, 246) !important;
+  background-color: #417cab !important;
   border-radius: 10px;
   cursor: pointer;
   height: 40px;
   background-color: red;
   margin-bottom: 10px;
   &:hover {
-    color: #d3d3d3;
+    color: white;
   }
+  box-shadow: 6px 6px 6px -2px rgba(0,0,0,0.59);
 `;
 
 function Alert(props: AlertProps) {
@@ -69,7 +68,7 @@ export const Rightbar = () => {
   const save = () => {
     saveBasket();
     setOpen(true);
-  }
+  };
 
   const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
     if (reason === 'clickaway') {
@@ -87,14 +86,14 @@ export const Rightbar = () => {
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </p>
-        <SaveButton onClick={save}>SAVE</SaveButton>
+        <SaveButton onClick={save}>ZAPISZ</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
         <CourseCard course={course} key={index} />
       ))}
-            <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
         <Alert onClose={handleClose} severity="success">
-          This is a success message!
+          Zapisano plan!
         </Alert>
       </Snackbar>
     </RightbarStyled>
diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx
index b2d7598..1db75bd 100644
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -35,7 +35,7 @@ const TableCell = styled.div<TableCellProps>`
   align-items: center;
   justify-content: center;
   flex: 1;
-  font-size: 24px;
+  font-size: 1.25vw;
 `;
 
 const T = styled.table`
@@ -67,20 +67,28 @@ export const Scheduler = () => {
     <>
       <SchedulerWrapper ref={wrapperRef}>
         <TableHead>
-          {days.map((day, index) => (
-            <TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
-              {day}
-            </TableCell>
-          ))}
+          {days.map((day, indexCell) =>
+            indexCell === 0 ? (
+              <TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
+                {day}
+              </TableCell>
+            ) : (
+              <TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
+                {day}
+              </TableCell>
+            ),
+          )}
         </TableHead>
         <TableBody>
           {hours.map((hour, indexRow) => (
             <TableRow key={indexRow}>
               {[hour, '', '', '', '', ''].map((value, indexCell) =>
-                indexRow === 0 && indexCell === 1 ? (
-                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
+                indexCell === 0 ? (
+                  <TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
                 ) : (
-                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                  <TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
                 ),
diff --git a/src/components/SchedulerEvents.tsx b/src/components/SchedulerEvents.tsx
index c0b447b..da8c9db 100644
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -35,7 +35,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
       //deleted if statement, maybe it is needed
       const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
         id,
-        day: day === 5 ? 4 : day,
+        day,
         lecturer,
         room,
         eventRow: groupTimeToEventRowMapping[time],
diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx
index e3a6529..cb45953 100644
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -47,12 +47,15 @@ const Classes = styled.div<ClassesProps>`
   align-items: center;
   z-index: 2;
   border-radius: 10px;
+  
+  font-size:0.90vw;
   /* 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;
-  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"};
+  background-color:${({groupType})=>groupType === "CLASS" ? "#FFDC61" : "#A68820"};
+  box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59);
 `;
 
 interface SchedulerRowProps {