Merge pull request 'debounce i css' (#20) from update-endpoints into master

Reviewed-on: http://git.plannaplan.pl/y0rune/frontend/pulls/20
Reviewed-by: Maciej <glowackimaciej97@gmail.com>

package-lock.json

@@ -1808,6 +1808,12 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
       "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
     },
+    "@types/lodash": {
+      "version": "4.14.162",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.162.tgz",
+      "integrity": "sha512-alvcho1kRUnnD1Gcl4J+hK0eencvzq9rmzvFPRmP5rPHx9VVsJj6bKLTATPVf9ktgv4ujzh7T+XWKp+jhuODig==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2056,7 +2062,7 @@
       "dependencies": {
         "semver": {
           "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "resolved": "https://npm.mlabs.pl:443/semver/-/semver-7.3.2.tgz",
           "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
           "dev": true
         }
@@ -8090,9 +8096,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",

package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@types/jest": "^24.9.1",
+    "@types/lodash": "^4.14.162",
     "@types/node": "^12.12.54",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",

src/components/CourseCard.tsx

@@ -56,12 +56,17 @@ const ClassExandIconStyled = styled.img<ClassExandIconProps>`
   transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
 `;
 
-const TypeClass = styled.div<ClassGroupProps>`
+const TypeClass = styled.div`
+  font-size:12px;
   position:absolute;
-  min-width:55px;
-  padding:1px;
+  border-radius:15px;
+  background-color:#00506B;
+  border:2px solid;
+  min-width:45px;
   top:5px;
-  border-radius:1px;
+  left:5px;
+  color:white;
+  font-weight:bold;
 `;
 
 const useStyles = makeStyles({
@@ -114,7 +119,7 @@ export const CourseCard = ({ course }: CourseCardProps) => {
           .sort((a, b) => b.type.localeCompare(a.type))
           .map((group, index) => (
             <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
-              <TypeClass groupType={group.type}>{group.type==="CLASS"? "(Ćw.)" : "(Wyk.)"}</TypeClass>
+              <TypeClass>{group.type==="CLASS"? "Ćw." : "Wyk."}</TypeClass>
               <p>
                 {group.time} {group.room} <br></br> {group.lecturer}
               </p>

src/components/Rightbar.tsx

@@ -4,6 +4,7 @@ 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";
 
 const RightbarStyled = styled.div`
   padding-top: 10px;
@@ -65,10 +66,11 @@ export const Rightbar = () => {
 
   const filteredCourses = getBasketGroups();
 
-  const save = () => {
+  const save = debounce(() => {
     saveBasket();
     setOpen(true);
-  };
+    console.log("zmiana")
+  },500);
 
   const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
     if (reason === 'clickaway') {
@@ -91,7 +93,7 @@ export const Rightbar = () => {
       {filteredCourses.map((course, index) => (
         <CourseCard course={course} key={index} />
       ))}
-      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+      <Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
         <Alert onClose={handleClose} severity="success">
           Zapisano plan!
         </Alert>