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%;
@@ -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<LeftPanelElement>`
   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 = () => {
             <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;