Added splitting groups into lectures and classes

.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}"
+        }
+    ]
+}

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

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

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 {