Added splitting groups into lectures and classes

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} />

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