Classes display correctly, still need to work on lectures:

src/components/CourseCard.tsx

@@ -77,29 +77,23 @@ interface CourseCardProps {
 export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => {
   const classes = useStyles();
 
-  const { addChoosenGroup, courses, choosenCourses } = useContext(coursesContext)!;
+  const { addGroup } = useContext(coursesContext)!;
 
-  const choosenCoursesIds = choosenCourses.map(({ id }) => id);
-
-  const choosenCoursesWithGroups = courses.filter(({ id }) => choosenCoursesIds.includes(id));
-
-  const onGroupClick = (group: Group, id: number) => addChoosenGroup(group, id);
+  console.log(`course`);
+  console.log(course);
+  const onGroupClick = (group: Group, id: number) => addGroup(group, id);
 
   return (
     <CourseStyled onClick={onCardClick} id={id}>
       <CourseNameStyled>{course.name}</CourseNameStyled>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
-        {choosenCoursesWithGroups.map((course) => (
-          <div key={id}>
-            {course.groups!.map((group, index) => (
+        {course.groups.map((group, index) => (
           <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
             <p>
               {group.time} {group.room} <br></br> {group.lecturer}
             </p>
           </ClassGroupStyled>
         ))}
-          </div>
-        ))}
       </Collapse>
       <div onClick={onCardClick} id={id}>
         <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />

src/components/Dropdown.tsx

@@ -50,18 +50,18 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
   //courses - choosenCourses
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
 
-  const { courses, choosenCourses, addToBasket } = useContext(coursesContext)!;
+  const { courses, basket, addToBasket } = useContext(coursesContext)!;
 
   useEffect(() => {
     const filterCourses = (input: string) => {
-      const choosenCoursesNames = choosenCourses.map(({ name }) => name.trim());
+      const choosenCoursesNames = basket.map(({ name }) => name.trim());
       const filteredCourses = courses.filter(
         ({ name }) => name.toLowerCase().includes(input.toLowerCase()) && !choosenCoursesNames.includes(name),
       );
       setFilteredCourses(filteredCourses);
     };
     filterCourses(input);
-  }, [input, open, choosenCourses]);
+  }, [input, open, basket]);
 
   useEffect(() => {
     if (clearInput) {
@@ -83,7 +83,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
       const name = target.textContent;
 
       //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
-      const course: Basket = { name: name, id: parseInt(id), lecture: null, class: null };
+      const course: Basket = { name: name, id: parseInt(id), lecture: null, classes: null };
 
       addToBasket(course);
       setOpen(false);

src/components/Rightbar.tsx

@@ -33,7 +33,14 @@ const RightbarTextStyled = styled.div`
 export const Rightbar = () => {
   const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
 
-  const { choosenCourses } = useContext(coursesContext)!;
+  const { courses, basket } = useContext(coursesContext)!;
+
+  const getBasketGroups = () => {
+    const ids = basket.map(({ id }) => id);
+    return courses.filter(({ id }) => ids.includes(id));
+  };
+
+  const filteredCourses = getBasketGroups();
 
   //działa clunky
   const onCardClick = (event: MouseEvent) => {
@@ -48,7 +55,7 @@ export const Rightbar = () => {
         Hubert Wrzesiński<br></br>
         Semestr zimowy 2020/2021
       </RightbarTextStyled>
-      {choosenCourses.map((course, index) => (
+      {filteredCourses.map((course, index) => (
         <CourseCard
           course={course}
           key={index}

src/components/SchedulerEvents.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { SchedulerRow } from './SchedulerRow';
 import { coursesContext } from '../contexts/CoursesProvider';
-import { Group } from '../types';
+import { Group, Basket } from '../types';
 
 interface SchedulerEventsProps {
   cellTop: number;
@@ -9,7 +9,7 @@ interface SchedulerEventsProps {
 }
 
 export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
-  const { choosenGroups } = useContext(coursesContext)!;
+  const { basket } = useContext(coursesContext)!;
 
   const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
 
@@ -26,8 +26,17 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
   };
 
   useEffect(() => {
-    function mapGroupTimeToEventRow(choosenGroups: Array<Group>) {
-      const groupsMapped = choosenGroups.map(({ id, day, lecturer, room, time }) => ({
+    function mapGroupTimeToEventRow(basket: Array<Basket>) {
+      const basketGroups = basket.map(({ classes, lecture }) => ({
+        ...classes,
+        ...lecture,
+      })) as Array<Group>;
+
+      console.log('passed basket');
+      console.log(basket);
+      console.log(`basketgroups`);
+      console.log(basketGroups);
+      const groupsMapped = basketGroups.map(({ id, day, lecturer, room, time }) => ({
         id,
         day,
         lecturer,
@@ -36,8 +45,8 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
       }));
       setChoosenGroupsMappedToEvents(groupsMapped);
     }
-    mapGroupTimeToEventRow(choosenGroups);
-  }, [choosenGroups]);
+    mapGroupTimeToEventRow(basket);
+  }, [basket]);
 
   return (
     <div>

src/contexts/CoursesProvider.tsx

@@ -1,14 +1,12 @@
 import React, { useState, createContext, useEffect } from 'react';
-import { Course, Group, Basket } from '../types';
+import { Course, Group, Basket, GroupType } from '../types';
 import axios from 'axios';
 
 interface CourseContext {
   courses: Array<Course>;
-  choosenCourses: Array<Course>;
-  choosenGroups: Array<Group>;
   basket: Array<Basket>;
   addToBasket: (courses: Basket) => void;
-  addChoosenGroup: (group: Group, id: number) => void;
+  addGroup: (group: Group, id: number) => void;
 }
 export const coursesContext = createContext<CourseContext | null>(null);
 
@@ -20,47 +18,28 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   //fetch courses with groups
   const [courses, setCourses] = useState<Array<Course>>([]);
   const [basket, setBasket] = useState<Array<Basket>>([]);
-  //with groups
-  const [choosenCourses, setChoosenCourses] = useState<Array<Course>>([]);
-  const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
 
   const addToBasket = (course: Basket) => setBasket([...basket, course]);
 
   useEffect(() => {
+    console.log('BASKET');
     console.log(basket);
   }, [basket]);
 
-  const addChoosenGroup = (choosenGroup: Group, id: number) => {
-    //move to utilities
-    //change type to group type from api
-    function hasChoosenGroupType(type: string) {
-      const res = choosenCourse.groups!.find((group) => group.type === type);
-      console.log(`res is: ${JSON.stringify(res)}`);
-      return !!res;
-    }
-
-    const choosenCourse = choosenCourses.find((cc) => cc.id === id)!;
+  //immutability
 
+  const addGroup = (choosenGroup: Group, id: number) => {
+    const basketCourse = basket.filter((course) => course.id === id)[0];
     const type = choosenGroup.type;
-    console.log(`group type is: ${type}`);
-    if (hasChoosenGroupType(type)) {
-      const group = choosenCourse.groups!.find((group) => group.type === type);
-      console.log(`group is: ${JSON.stringify(group)}`);
-      console.log(choosenCourse.groups);
-      if (group) {
-        group.type = type;
+    if (type === GroupType.CLASS) {
+      setBasket(
+        basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: choosenGroup } : basket)),
+      );
+    } else if (type === GroupType.LECTURE) {
+      setBasket(
+        basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: choosenGroup } : basket)),
+      );
     }
-      setChoosenGroups([...choosenGroups, choosenGroup]);
-    } else {
-      console.log('pierwsza grupa/wykłąd');
-      //może być złe
-      choosenCourse.groups!.push(choosenGroup);
-      // setChoosenCourses(course => course.id === choosenCourse.id)
-      setChoosenGroups([...choosenGroups, choosenGroup]);
-    }
-    console.log(`choosen courses after changing group: ${JSON.stringify(choosenCourses)}`);
-
-    console.log(choosenCourse);
   };
 
   useEffect(() => {
@@ -79,8 +58,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   }, []);
 
   return (
-    <coursesContext.Provider value={{ courses, choosenGroups, choosenCourses, basket, addToBasket, addChoosenGroup }}>
-      {children}
-    </coursesContext.Provider>
+    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup }}>{children}</coursesContext.Provider>
   );
 };

src/contexts/reducers.ts

@@ -3,7 +3,7 @@
 export enum Types {
   addToBasket = 'ADD_CHOOSEN_COURSE',
   removeChoosenCourse = 'REMOVE_CHOOSEN_COURSE',
-  addChoosenGroup = 'ADD_CHOOSEN_GROUP',
+  addGroup = 'ADD_CHOOSEN_GROUP',
   removeChoosenGroup = 'REMOVE_CHOOSEN_GROUP',
 }
 
@@ -21,7 +21,7 @@ export enum Types {
 
 // export const choosenGroupsReducer = (state, action) => {
 //   switch (action.type) {
-//     case Types.addChoosenGroup:
+//     case Types.addGroup:
 //       return add;
 //   }
 // };

src/types/index.ts

@@ -1,13 +1,13 @@
-const COURSE = 'course';
-const CLASS = 'class';
-
-export type GroupType = typeof COURSE | typeof CLASS;
+export enum GroupType {
+  LECTURE = 'LECTURE',
+  CLASS = 'CLASS',
+}
 
 export interface Basket {
   id: number;
   name: string;
   lecture: Group | null;
-  class: Group | null;
+  classes: Group | null;
 }
 
 export interface Group {