import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react'; import { Course, Group, Basket, GroupType } from '../types'; import axios from 'axios'; import { CASContext, CASProvider } from './CASProvider'; interface CourseContext { courses: Array; basket: Array; addToBasket: (courses: Course) => void; addGroup: (group: Group, id: number) => void; deleteFromBasket: (id: number) => void; saveBasket: () => void; } export const coursesContext = createContext(undefined); interface CoursesProviderProps { children: ReactNode; } export const CoursesProvider = ({ children }: CoursesProviderProps) => { //fetch courses with groups const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); const CAS = useContext(CASContext)!; const token = CAS?.user?.token; 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)); const saveBasket = async () => { try { let data = [7, 43, 54]; let json = JSON.stringify(data); let post_data = { json_data: json }; const ech = await axios.post>( `${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, [7, 43, 54], { headers: { Authorization: `Bearer ${token}`, }, }, ); console.log('api response;', ech); } catch (e) { console.log(e); } console.log('saving to basket'); }; const addGroup = (choosenGroup: Group, id: number) => { const basketCourse = basket.filter((course) => course.id === id)[0]; const type = choosenGroup.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)), ); } }; useEffect(() => { const fetchData = async () => { const { data } = await axios.get }>>( `${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; courses.sort((a: Course, b: Course) => (a.name > b.name ? 1 : -1)); setCourses(courses); }; fetchData(); }, []); return ( {children} ); };