history first draft

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%;
@@ -124,7 +125,7 @@ export const Admin = () => {
             <Rightbar />
           </>
         ) : currentTab === 2 ? (
-          <HistoryDiv />
+          <SchedulerHistory />
         ) : currentTab === 3 ? (
           <StatsDiv />
         ) : (

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 (
     <>
       <LoadingOverlay active={role === undefined} spinner={<SyncLoader />}>
@@ -43,7 +37,7 @@ export const App = () => {
               <Scheduler />
               <Rightbar />
             </>
-          )}{' '}
+          )}
           {userPrivilige === 'DEANERY' && <Admin />}
         </Wrapper>
       </LoadingOverlay>

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);

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<Array<Course>>([]);
@@ -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();
   };
 

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';

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 (
+    <Wrapper>
+      {timetableHistory.length > 1 && (
+        <SchedulerHistoryNavigation commisionDate={commisionDate} changeCurrentTimetable={changeCurrentTimetable} />
+      )}
+      <Scheduler />
+    </Wrapper>
+  );
+};

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<ButtonProps>`
+  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 (
+    <Wrapper>
+      <StyledButton
+        direction="left"
+        onClick={() => {
+          console.log('left clicked');
+          changeCurrentTimetable(-1);
+        }}
+      >
+        LEFT
+      </StyledButton>
+      {commisionDate}
+      <StyledButton
+        direction="right"
+        onClick={() => {
+          console.log('right clicked');
+          changeCurrentTimetable(1);
+        }}
+      >
+        RIGHT
+      </StyledButton>
+    </Wrapper>
+  );
+};

src/components/SchedulerRow.tsx

@@ -146,14 +146,10 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
   };
 
   const handlePopoverClose = (e: MouseEvent<any>) => {
-    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;

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<Course>;
   basket: Array<Basket>;
+  timetableHistory: Array<TimetableHistory>;
   hoveredGroup: Group | undefined | null;
   userID: string;
   isDataLoading: boolean;
@@ -31,7 +32,9 @@ interface CourseContext {
   selectBasketCourses: () => Array<Course>;
   selectBasketCourseGroups: (courseId: number) => { lecture: Group | undefined; classes: Group | undefined };
   getNewestStudentTimetable: (studentId: string) => void;
+  getStudentTimetablesHistory: (studentId: string) => void;
   changeDataLoading: (isLoading: boolean) => void;
+  setBasketFromHistoryGroups: (groupsIds: Array<number>) => void;
 }
 export const coursesContext = createContext<CourseContext | undefined>(undefined);
 
@@ -46,6 +49,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   //fetch courses with groups
   const [courses, setCourses] = useState<Array<Course>>([]);
   const [basket, setBasket] = 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);
@@ -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,19 +200,59 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     }
   };
 
+  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`,
+      );
+      console.log('data is mordo: ', data);
+      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));
-      console.log('sortedCourses: ', sortedCourses);
       setCourses(sortedCourses);
     } catch (e) {
       console.log(e);
     }
   };
 
+  const setBasketFromHistoryGroups = (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);
+        }
+      }
+    }
+    console.log('baskeeeeeet: ', basket);
+    setBasket(basket);
+  };
+
   useEffect(() => {
     setIsDataLoading(true);
     setTimeout(() => {
@@ -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,
       }}
     >

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<Student>;
@@ -19,7 +18,9 @@ export const StudentsProvider = ({ children }: StudentsProviderProps) => {
   const [students, setStudents] = useState<Array<Student>>([]);
   const [selectedStudent, setSelectedStudent] = useState<Student | null>(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);
   }, []);

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<number>;
+  owner: {
+    id: number;
+    name: string;
+    surname: string;
+    email: string;
+  };
+}