Checkpoint

src/components/CourseCard.tsx

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

src/components/Dropdown.tsx

@@ -38,10 +38,10 @@ const useStyles = makeStyles({
 
 interface DropdownProps {
   clearInput: boolean;
-  handleClearInput: ()=>void;
+  handleClearInput: () => void;
 }
 
-export const Dropdown = ({clearInput,handleClearInput}:DropdownProps) => {
+export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
   const classes = useStyles();
 
   const [open, setOpen] = React.useState(false);
@@ -63,12 +63,12 @@ export const Dropdown = ({clearInput,handleClearInput}:DropdownProps) => {
     filterCourses(input);
   }, [input, open, choosenCourses]);
 
-  useEffect(()=>{
-    if(clearInput){
-      setInput('')
-      handleClearInput()
+  useEffect(() => {
+    if (clearInput) {
+      setInput('');
+      handleClearInput();
     }
-  },[clearInput])
+  }, [clearInput]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
 
@@ -82,16 +82,14 @@ export const Dropdown = ({clearInput,handleClearInput}:DropdownProps) => {
       const id = target.id;
       const name = target.textContent;
 
-      const { data } = await axios.get(`${process.env.REACT_APP_API_URL}/getCourseGroups?id=${id}`);
-
       //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
-      const course: Course = {
+      const choosenCourse = {
         name: name,
         id: parseInt(id),
-        groups: data,
+        groups: [],
       };
 
-      addChoosenCourse(course);
+      addChoosenCourse(choosenCourse);
       setOpen(false);
     }
   };

src/components/SchedulerEvents.tsx

@@ -16,7 +16,6 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
   interface GroupTimeToEventRowMapping {
     [time: string]: number;
   }
-  //delete later additional mappings
   const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
     '8.15': 0,
     '10.00': 1,

src/contexts/CoursesProvider.tsx

@@ -1,12 +1,14 @@
 import React, { useState, createContext, useEffect } from 'react';
-import { Course, Group } from '../types';
+import { Course, Group, CourseBasket } from '../types';
 import axios from 'axios';
+
 interface CourseContext {
   courses: Array<Course>;
   choosenCourses: Array<Course>;
   choosenGroups: Array<Group>;
+  coursesBasket: Array<CourseBasket>;
   addChoosenCourse: (courses: Course) => void;
-  addChoosenGroup: (group: Group) => void;
+  addChoosenGroup: (group: Group, id: number) => void;
 }
 export const coursesContext = createContext<CourseContext | null>(null);
 
@@ -15,25 +17,60 @@ interface CoursesProviderProps {
 }
 
 export const CoursesProvider = ({ children }: CoursesProviderProps) => {
+  //fetch courses with groups
   const [courses, setCourses] = useState<Array<Course>>([]);
+  const [coursesBasket, setCoursesBasket] = useState<Array<CourseBasket>>([]);
+  //with groups
   const [choosenCourses, setChoosenCourses] = useState<Array<Course>>([]);
   const [choosenGroups, setChoosenGroups] = useState<Array<Group>>([]);
 
   const addChoosenCourse = (choosenCourse: Course) => {
     setChoosenCourses([...choosenCourses, choosenCourse]);
   };
-  const addChoosenGroup = (choosenGroup: Group) => {
-    //const choosenCourse = courses.filter(course=>(course.groups.map(group=>group.id).includes(choosenGroup.id)))
-    console.log("id" + choosenGroup.id )
-    console.log("mapowanie: " + courses.filter(course=>(course.groups.map(group=>group.id))));
-    //console.log("wybrane kursy: " + choosenCourse);
-    setChoosenGroups([...choosenGroups, choosenGroup]);
+  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)!;
+
+    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;
+      }
+      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(() => {
     const fetchData = async () => {
-      const { data } = await axios.get(`${process.env.REACT_APP_API_URL}/getCourses`);
-      setCourses(data);
+      const { data: courses } = await axios.get(`${process.env.REACT_APP_API_URL}/getCourses`);
+
+      for (const course of courses) {
+        const { data: groups } = await axios.get(`${process.env.REACT_APP_API_URL}/getCourseGroups?id=${course.id}`);
+        //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
+        course.groups = groups;
+      }
+
+      setCourses(courses);
     };
     fetchData();
   }, []);

src/types/index.ts

@@ -1,6 +1,13 @@
-export enum GroupType {
-  course = 'course',
-  CLASS = 'class',
+const COURSE = 'course';
+const CLASS = 'class';
+
+export type GroupType = typeof COURSE | typeof CLASS;
+
+export interface CourseBasket {
+  id: number;
+  name: string;
+  lecture: Group | null;
+  class: Group | null;
 }
 
 export interface Group {
@@ -9,7 +16,7 @@ export interface Group {
   time: string;
   lecturer: string;
   room: string;
-  groupType: GroupType;
+  type: GroupType;
   capacity?: number;
 }
 
@@ -18,10 +25,7 @@ export interface Course {
   name: string;
   groups: Array<Group>;
 }
-export interface courseInit {
-  name: string;
-  id: number;
-}
+
 export interface User {
   name?: string;
   surname?: string;