320 lines
10 KiB
TypeScript
320 lines
10 KiB
TypeScript
import React, { useState, createContext, useEffect, ReactNode } from 'react';
|
|
import { Course, Group, Basket, GroupType, SchedulerEvent, TimetableHistory } from '../types';
|
|
import { useSnackbar } from 'notistack';
|
|
import { axiosInstance } from '../utils/axiosInstance';
|
|
import CloseIcon from '@material-ui/icons/Close';
|
|
import styled from 'styled-components';
|
|
|
|
const StyledCloseIcon = styled(CloseIcon)`
|
|
color: #000000;
|
|
&:hover {
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
`;
|
|
|
|
interface CourseContext {
|
|
courses: Array<Course>;
|
|
basket: Array<Basket>;
|
|
timetableHistory: Array<TimetableHistory>;
|
|
hoveredGroup: Group | undefined | null;
|
|
userID: string;
|
|
isDataLoading: boolean;
|
|
historyBasket: Array<Basket>;
|
|
addCourseToBasket: (courses: Course) => void;
|
|
changeHoveredGroup: (group: Group | null) => void;
|
|
changeGroupInBasket: (group: any, courseId: number) => void;
|
|
restoreGroupInBasket: (restoreGroup: Group, courseId: number) => void;
|
|
deleteFromBasket: (id: number) => void;
|
|
saveBasket: (userID: string) => Promise<void>;
|
|
changeStudent: (studentId: string) => void;
|
|
selectSchedulerEvents: () => Array<SchedulerEvent>;
|
|
selectHistorySchedulerEvents: () => Array<SchedulerEvent>;
|
|
selectBasketNames: () => Array<string>;
|
|
selectBasketCourses: () => Array<Course>;
|
|
selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
|
|
selectGroups: () => Array<Group>;
|
|
getNewestStudentTimetable: (studentId: string) => void;
|
|
getStudentTimetablesHistory: (studentId: string) => void;
|
|
changeDataLoading: (isLoading: boolean) => void;
|
|
setHistoryBasketFromHistoryGroups: (groupsIds: Array<number>) => void;
|
|
}
|
|
export const coursesContext = createContext<CourseContext | undefined>(undefined);
|
|
|
|
interface CoursesProviderProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
const { closeSnackbar } = useSnackbar();
|
|
|
|
//fetch courses with groups
|
|
const [courses, setCourses] = useState<Array<Course>>([]);
|
|
const [basket, setBasket] = useState<Array<Basket>>([]);
|
|
const [historyBasket, setHistoryBasket] = useState<Array<Basket>>([]);
|
|
const [timetableHistory, setTimetableHistory] = useState<Array<TimetableHistory>>([]);
|
|
const [userID, setUserID] = useState('');
|
|
const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
|
|
const [isDataLoading, setIsDataLoading] = useState(false);
|
|
|
|
const selectBasketIds = () => {
|
|
const classesIds = basket.map((course) => course?.classes?.id).filter((course) => course !== undefined);
|
|
const lecturesIds = basket.map((course) => course?.lecture?.id).filter((course) => course !== undefined);
|
|
return [...classesIds, ...lecturesIds];
|
|
};
|
|
|
|
const selectBasketNames = () => basket.map(({ name }) => name);
|
|
|
|
const selectBasketCourses = () => {
|
|
const basketNames = selectBasketNames();
|
|
return basketNames.reduce((sum, basketName) => {
|
|
const course = courses.find(({ name }) => basketName === name);
|
|
return course === undefined ? sum : [...sum, course];
|
|
}, [] as Array<Course>);
|
|
};
|
|
|
|
const selectSchedulerEvents = () => {
|
|
return basket.reduce((res, el) => {
|
|
const { name } = el;
|
|
if (el.classes) {
|
|
res.push({ ...el.classes, name });
|
|
}
|
|
if (el.lecture) {
|
|
res.push({ ...el.lecture, name });
|
|
}
|
|
return res;
|
|
}, [] as Array<SchedulerEvent>);
|
|
};
|
|
|
|
const selectHistorySchedulerEvents = () => {
|
|
return historyBasket.reduce((res, el) => {
|
|
const { name } = el;
|
|
if (el.classes) {
|
|
res.push({ ...el.classes, name });
|
|
}
|
|
if (el.lecture) {
|
|
res.push({ ...el.lecture, name });
|
|
}
|
|
return res;
|
|
}, [] as Array<SchedulerEvent>);
|
|
};
|
|
|
|
const selectBasketCourseGroups = (courseId: number) => {
|
|
const course = basket.find(({ id }) => id === courseId);
|
|
if (course !== undefined) {
|
|
return { lecture: course.lecture, classes: course.classes };
|
|
} else {
|
|
return { lecture: undefined, classes: undefined };
|
|
}
|
|
};
|
|
|
|
const selectGroups = () => {
|
|
const groups = [];
|
|
console.log('courses are: ', courses);
|
|
return (courses as unknown) as Array<Group>;
|
|
};
|
|
|
|
const changeHoveredGroup = (group: Group | null) => setHoveredGroup(group);
|
|
|
|
const changeDataLoading = (isLoading: boolean) => setIsDataLoading(isLoading);
|
|
|
|
const addCourseToBasket = (course: Course) => {
|
|
const courseToBasket: Basket = {
|
|
name: course.name,
|
|
id: course.id,
|
|
classes: course.classes !== undefined ? course.classes[0] : undefined,
|
|
lecture: course.lectures !== undefined ? course.lectures[0] : undefined,
|
|
};
|
|
setBasket([...basket, courseToBasket]);
|
|
};
|
|
|
|
const deleteFromBasket = (id: number) => setBasket(basket.filter((course) => course.id !== id));
|
|
|
|
const changeStudent = async (studentId: string) => {
|
|
setUserID(studentId);
|
|
setTimeout(() => {
|
|
getNewestStudentTimetable(studentId);
|
|
getStudentTimetablesHistory(studentId);
|
|
}, 100);
|
|
};
|
|
|
|
const saveBasket = async (userID: string) => {
|
|
const basketIds = selectBasketIds();
|
|
const action = (key: any) => (
|
|
<>
|
|
<StyledCloseIcon
|
|
onClick={() => {
|
|
closeSnackbar(key);
|
|
}}
|
|
></StyledCloseIcon>
|
|
</>
|
|
);
|
|
|
|
try {
|
|
await axiosInstance.post(
|
|
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`,
|
|
JSON.stringify(basketIds),
|
|
);
|
|
enqueueSnackbar('Ustawienia zostały zapisane', {
|
|
variant: 'success',
|
|
action,
|
|
});
|
|
} catch (e) {
|
|
console.log('error: ', e);
|
|
enqueueSnackbar('Ustawienia nie zostały zapisane', {
|
|
variant: 'error',
|
|
action,
|
|
});
|
|
}
|
|
getStudentTimetablesHistory(userID);
|
|
};
|
|
|
|
const changeGroupInBasket = (choosenGroup: any, courseId: number) => {
|
|
const basketCourse = basket.filter((course) => course.id === courseId)[0];
|
|
if (choosenGroup.lecture && choosenGroup.classes) {
|
|
const prev = choosenGroup.prev === 'lecture' ? choosenGroup.lecture : choosenGroup.classes;
|
|
setBasket(
|
|
basket.map((basket) =>
|
|
basket.id === basketCourse.id
|
|
? { ...basket, lecture: choosenGroup.lecture, classes: choosenGroup.classes }
|
|
: basket,
|
|
),
|
|
);
|
|
changeHoveredGroup(prev);
|
|
}
|
|
};
|
|
|
|
const restoreGroupInBasket = (restoreGroup: Group, courseId: number) => {
|
|
const basketCourse = basket.filter((course) => course.id === courseId)[0];
|
|
const { type } = restoreGroup;
|
|
if (type === GroupType.CLASS) {
|
|
setBasket(
|
|
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, classes: restoreGroup } : basket)),
|
|
);
|
|
} else if (type === GroupType.LECTURE) {
|
|
setBasket(
|
|
basket.map((basket) => (basket.id === basketCourse.id ? { ...basket, lecture: restoreGroup } : basket)),
|
|
);
|
|
}
|
|
};
|
|
|
|
const getNewestTimetable = async () => {
|
|
try {
|
|
const { data } = await axiosInstance.get<Array<Basket> | ''>(
|
|
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/schedule`,
|
|
);
|
|
const basket = data === '' ? [] : data;
|
|
setBasket(basket);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
};
|
|
|
|
const getNewestStudentTimetable = async (studentId: string) => {
|
|
try {
|
|
const { data } = await axiosInstance.get(
|
|
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${studentId}/schedule`,
|
|
);
|
|
const basket = data === '' ? [] : data;
|
|
|
|
setBasket(basket);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
};
|
|
|
|
const getStudentTimetablesHistory = async (studentId: string) => {
|
|
try {
|
|
const { data } = await axiosInstance.get<Array<TimetableHistory> | []>(
|
|
`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${studentId}?groups=true`,
|
|
);
|
|
setTimetableHistory(data);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
};
|
|
|
|
const fetchCourses = async () => {
|
|
try {
|
|
const { data: courses } = await axiosInstance.get<Array<Course>>(
|
|
`${process.env.REACT_APP_API_URL}/api/v1/courses/all?groups=true&takenPlaces=true`,
|
|
);
|
|
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
|
|
setCourses(sortedCourses);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
};
|
|
|
|
const setHistoryBasketFromHistoryGroups = (groupsIds: Array<number>) => {
|
|
const basket: Array<Basket> = [];
|
|
for (const groupId of groupsIds) {
|
|
for (const course of courses) {
|
|
const { lectures, classes, name, id } = course;
|
|
let basketElement: Basket = { name: name, id: id };
|
|
if (lectures) {
|
|
for (const lecture of lectures) {
|
|
if (groupId === lecture.id) {
|
|
basketElement = { ...basketElement, lecture: lecture };
|
|
}
|
|
}
|
|
}
|
|
if (classes) {
|
|
for (const singleClass of classes) {
|
|
if (groupId === singleClass.id) {
|
|
basketElement = { ...basketElement, classes: singleClass };
|
|
}
|
|
}
|
|
}
|
|
if (basketElement.classes !== undefined || basketElement.lecture !== undefined) {
|
|
basket.push(basketElement);
|
|
}
|
|
}
|
|
}
|
|
setHistoryBasket(basket);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setIsDataLoading(true);
|
|
setTimeout(() => {
|
|
fetchCourses();
|
|
getNewestTimetable();
|
|
setIsDataLoading(false);
|
|
}, 600);
|
|
}, []);
|
|
|
|
return (
|
|
<coursesContext.Provider
|
|
value={{
|
|
userID,
|
|
courses,
|
|
basket,
|
|
hoveredGroup,
|
|
timetableHistory,
|
|
isDataLoading,
|
|
historyBasket,
|
|
addCourseToBasket,
|
|
changeHoveredGroup,
|
|
changeGroupInBasket,
|
|
deleteFromBasket,
|
|
restoreGroupInBasket,
|
|
saveBasket,
|
|
selectSchedulerEvents,
|
|
selectHistorySchedulerEvents,
|
|
selectBasketNames,
|
|
selectBasketCourses,
|
|
selectBasketCourseGroups,
|
|
selectGroups,
|
|
getNewestStudentTimetable,
|
|
changeStudent,
|
|
getStudentTimetablesHistory,
|
|
setHistoryBasketFromHistoryGroups,
|
|
changeDataLoading,
|
|
}}
|
|
>
|
|
{children}
|
|
</coursesContext.Provider>
|
|
);
|
|
};
|