From 0b10ed05d6a3c51bb884a22b6b8e40edace79f7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Tue, 5 Jan 2021 23:46:51 +0100 Subject: [PATCH] history first draft --- src/components/Admin.tsx | 13 ++-- src/components/App.tsx | 12 +--- src/components/CourseCard.tsx | 1 - src/components/Dropdown.tsx | 3 +- src/components/Scheduler.tsx | 2 +- src/components/SchedulerHistory.tsx | 42 +++++++++++++ src/components/SchedulerHistoryNavigation.tsx | 52 ++++++++++++++++ src/components/SchedulerRow.tsx | 4 -- src/contexts/CoursesProvider.tsx | 59 ++++++++++++++++--- src/contexts/StudentsProvider.tsx | 7 +-- src/types/index.ts | 17 ++++++ 11 files changed, 178 insertions(+), 34 deletions(-) create mode 100644 src/components/SchedulerHistory.tsx create mode 100644 src/components/SchedulerHistoryNavigation.tsx diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx index 0a3c371..7832a40 100644 --- a/src/components/Admin.tsx +++ b/src/components/Admin.tsx @@ -5,6 +5,7 @@ import History from '../assets/history.svg'; import Statistics from '../assets/statistics.svg'; import { Scheduler } from './Scheduler'; import { Rightbar } from './Rightbar'; +import { SchedulerHistory } from './SchedulerHistory'; const LeftSide = styled.div` height: 100%; @@ -13,7 +14,7 @@ const LeftSide = styled.div` flex-direction: column; background-color: white; text-align: center; - border-radius:5px; + border-radius: 5px; `; const Wrap = styled.div` @@ -45,11 +46,11 @@ const LeftPanelElement = styled.div` cursor: pointer; box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 11px 0px rgba(0,0,0,0.30)` : '')}; border-bottom: 1px solid #979797; - :first-child{ - border-radius:0px 5px 0px 0px; + :first-child { + border-radius: 0px 5px 0px 0px; } - :last-child{ - border-radius:0px 0px 5px 0px; + :last-child { + border-radius: 0px 0px 5px 0px; } `; @@ -124,7 +125,7 @@ export const Admin = () => { ) : currentTab === 2 ? ( - + ) : currentTab === 3 ? ( ) : ( diff --git a/src/components/App.tsx b/src/components/App.tsx index c6d3313..a916f1f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,11 +1,10 @@ -import React, { ElementType, useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import Topbar from './Topbar'; import { Transfer } from './Transfer'; import { Admin } from './Admin'; import { Scheduler } from './Scheduler'; import { Rightbar } from './Rightbar'; import styled from 'styled-components'; -import { coursesContext } from '../contexts/CoursesProvider'; import LoadingOverlay from 'react-loading-overlay'; import { SyncLoader } from 'react-spinners'; import { CASContext } from '../contexts/CASProvider'; @@ -19,8 +18,7 @@ const Wrapper = styled.div` `; export const App = () => { - const { isDataLoading } = useContext(coursesContext)!; - const { isFetchingToken, user, role } = useContext(CASContext)!; + const { role } = useContext(CASContext)!; const [isOpenTransfer, setOpenTransfer] = useState(false); const handleTransfer = () => { @@ -28,10 +26,6 @@ export const App = () => { }; const userPrivilige = localStorage.getItem('userPrivilige'); - console.log('role of that user is: ', role); - useEffect(() => { - console.log('is fetching token: ', isFetchingToken); - }, [isFetchingToken]); return ( <> }> @@ -43,7 +37,7 @@ export const App = () => { - )}{' '} + )} {userPrivilige === 'DEANERY' && } diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index d411814..87b8307 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -161,7 +161,6 @@ export const CourseCard = ({ course }: CourseCardProps) => { const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []); const [previous, setPrevious] = useState(basketCourseGroups); - console.log('course is: ', course); const onGroupClick = (group: Group, courseId: number) => { setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group })); changeGroupInBasket(group, courseId); diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 3f1bbb3..1bda1fd 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -50,7 +50,7 @@ interface DropdownProps { } export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => { - const { courses, selectBasketNames, addCourseToBasket, changeStudent } = useContext(coursesContext)!; + const { courses, selectBasketNames, addCourseToBasket, changeStudent, getStudentTimetablesHistory } = useContext(coursesContext)!; const { students, changeSelectedStudent } = useContext(studentsContext)!; const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]); const [filteredCourses, setFilteredCourses] = useState>([]); @@ -71,6 +71,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D //to be moved to students provider changeStudent(target.id); changeSelectedStudent(Number(target.id)); + handleCloseDropdown(); }; diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index 2996e45..c48bcb7 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useLayoutEffect, useRef } from 'react'; +import React, { useLayoutEffect, useRef } from 'react'; import { useState } from 'react'; import { SchedulerEvents } from './SchedulerEvents'; import { days, hours } from '../constants/index'; diff --git a/src/components/SchedulerHistory.tsx b/src/components/SchedulerHistory.tsx new file mode 100644 index 0000000..e882f84 --- /dev/null +++ b/src/components/SchedulerHistory.tsx @@ -0,0 +1,42 @@ +import React, { useContext, useEffect, useState } from 'react'; +import styled from 'styled-components'; +import { coursesContext } from '../contexts/CoursesProvider'; +import { Scheduler } from './Scheduler'; +import { SchedulerHistoryNavigation } from './SchedulerHistoryNavigation'; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + +export const SchedulerHistory = () => { + const { timetableHistory, setBasketFromHistoryGroups } = useContext(coursesContext)!; + const [currentTimetable, setCurrentTimetable] = useState(timetableHistory === [] ? 0 : timetableHistory.length - 1); + let commisionDate = undefined; + if (currentTimetable) { + commisionDate = timetableHistory[currentTimetable]?.commisionDate; + } + + const changeCurrentTimetable = (value: number) => { + setCurrentTimetable((currentTimetable) => currentTimetable + value); + }; + + useEffect(() => { + console.log('current timetable is: ', currentTimetable); + const timetable = timetableHistory[currentTimetable]; + if (timetable) { + const { groups } = timetable; + setBasketFromHistoryGroups(groups); + } + }, [currentTimetable]); + + return ( + + {timetableHistory.length > 1 && ( + + )} + + + ); +}; diff --git a/src/components/SchedulerHistoryNavigation.tsx b/src/components/SchedulerHistoryNavigation.tsx new file mode 100644 index 0000000..8e0563b --- /dev/null +++ b/src/components/SchedulerHistoryNavigation.tsx @@ -0,0 +1,52 @@ +import React, { useContext } from 'react'; +import styled from 'styled-components'; +import { coursesContext } from '../contexts/CoursesProvider'; + +type ButtonProps = { + direction: 'left' | 'right'; +}; + +const Wrapper = styled.div` + display: flex; + justify-content: space-around; +`; + +const StyledButton = styled.button` + width: 100px; + height: 100px; + background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')}; +`; + +type SchedulerHistoryNavigationProps = { + commisionDate?: Date; + changeCurrentTimetable: (value: number) => void; +}; + +export const SchedulerHistoryNavigation = ({ + commisionDate, + changeCurrentTimetable, +}: SchedulerHistoryNavigationProps) => { + return ( + + { + console.log('left clicked'); + changeCurrentTimetable(-1); + }} + > + LEFT + + {commisionDate} + { + console.log('right clicked'); + changeCurrentTimetable(1); + }} + > + RIGHT + + + ); +}; diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index a007620..e5aaf58 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -146,14 +146,10 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } }; const handlePopoverClose = (e: MouseEvent) => { - console.log('current target:', e.currentTarget); - console.log(' target:', e.target); setPopoverId(null); setAnchorEl(null); - console.log('click awayyy'); }; useEffect(() => { - console.log('anchorEl: ', anchorEl); }, [anchorEl]); const open = Boolean(anchorEl); const id = open ? 'simple-popover' : undefined; diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 6962fb7..c508d7e 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -1,5 +1,5 @@ import React, { useState, createContext, useEffect, ReactNode } from 'react'; -import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types'; +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'; @@ -16,6 +16,7 @@ const StyledCloseIcon = styled(CloseIcon)` interface CourseContext { courses: Array; basket: Array; + timetableHistory: Array; hoveredGroup: Group | undefined | null; userID: string; isDataLoading: boolean; @@ -31,7 +32,9 @@ interface CourseContext { selectBasketCourses: () => Array; selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined }; getNewestStudentTimetable: (studentId: string) => void; + getStudentTimetablesHistory: (studentId: string) => void; changeDataLoading: (isLoading: boolean) => void; + setBasketFromHistoryGroups: (groupsIds: Array) => void; } export const coursesContext = createContext(undefined); @@ -46,6 +49,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { //fetch courses with groups const [courses, setCourses] = useState>([]); const [basket, setBasket] = useState>([]); + const [timetableHistory, setTimetableHistory] = useState>([]); const [userID, setUserID] = useState(''); const [hoveredGroup, setHoveredGroup] = useState(null); const [isDataLoading, setIsDataLoading] = useState(false); @@ -70,12 +74,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { return basket.reduce((res, el) => { const { name } = el; if (el.classes) { - console.log('element kurwa is: ', el); res.push({ ...el.classes, name }); } if (el.lecture) { - console.log('element kurwa is: ', el); - res.push({ ...el.lecture, name }); } return res; @@ -111,6 +112,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { setUserID(studentId); setTimeout(() => { getNewestStudentTimetable(studentId); + getStudentTimetablesHistory(studentId); }, 100); }; @@ -179,8 +181,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/schedule`, ); const basket = data === '' ? [] : data; - console.log('basket is: ', basket); - console.log('mordo weź'); setBasket(basket); } catch (e) { console.log(e); @@ -200,17 +200,57 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { } }; + const getStudentTimetablesHistory = async (studentId: string) => { + try { + const { data } = await axiosInstance.get | []>( + `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${studentId}?groups=true`, + ); + console.log('data is mordo: ', data); + setTimetableHistory(data); + } catch (e) { + console.log(e); + } + }; + const fetchCourses = async () => { try { const { data: courses } = await axiosInstance.get>( `${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)); - console.log('sortedCourses: ', sortedCourses); setCourses(sortedCourses); } catch (e) { console.log(e); - } + } + }; + + const setBasketFromHistoryGroups = (groupsIds: Array) => { + const basket: Array = []; + 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); + } + } + } + console.log('baskeeeeeet: ', basket); + setBasket(basket); }; useEffect(() => { @@ -229,6 +269,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { courses, basket, hoveredGroup, + timetableHistory, isDataLoading, addCourseToBasket, changeHoveredGroup, @@ -242,6 +283,8 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { selectBasketCourseGroups, getNewestStudentTimetable, changeStudent, + getStudentTimetablesHistory, + setBasketFromHistoryGroups, changeDataLoading, }} > diff --git a/src/contexts/StudentsProvider.tsx b/src/contexts/StudentsProvider.tsx index 11faf16..c5ba54c 100644 --- a/src/contexts/StudentsProvider.tsx +++ b/src/contexts/StudentsProvider.tsx @@ -1,7 +1,6 @@ import React, { useState, createContext, useEffect, ReactNode, useRef, useContext } from 'react'; import { Student } from '../types'; import { axiosInstance } from '../utils/axiosInstance'; -import { CASContext } from './CASProvider'; interface StudentContext { students: Array; @@ -19,7 +18,9 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => { const [students, setStudents] = useState>([]); const [selectedStudent, setSelectedStudent] = useState(null); - //not working currently + useEffect(() => { + console.log('selected student: ', selectedStudent); + }, [selectedStudent]); const getStudents = async () => { try { @@ -27,7 +28,6 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => { `${process.env.REACT_APP_API_URL}/api/v1/users/students`, ); setStudents(data); - console.log(data); } catch (e) { console.log(e); } @@ -40,7 +40,6 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => { useEffect(() => { setTimeout(() => { const userPrivilige = localStorage.getItem('userPrivilige'); - console.log('mordo privilidż: ', userPrivilige); userPrivilige === 'DEANERY' && getStudents(); }, 500); }, []); diff --git a/src/types/index.ts b/src/types/index.ts index fcf3b7c..9fcf290 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -54,3 +54,20 @@ export interface SchedulerEvent { takenPlaces: number; name: string; } + +export interface TimetableHistory { + commisionDate: Date; + commiter: { + id: number; + name: string; + surname: string; + email: string; + }; + groups: Array; + owner: { + id: number; + name: string; + surname: string; + email: string; + }; +}