plan history is working correctly (i think)

src/components/Admin.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent } from 'react';
+import React, { useState, MouseEvent,useContext } from 'react';
 import styled from 'styled-components/macro';
 import Plan from '../assets/plan.svg';
 import History from '../assets/history.svg';
@@ -6,6 +6,7 @@ import Statistics from '../assets/statistics.svg';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
 import { SchedulerHistory } from './SchedulerHistory';
+import { coursesContext } from '../contexts/CoursesProvider';
 
 const LeftSide = styled.div`
   height: 100%;
@@ -97,9 +98,11 @@ const Icon = styled.img`
 
 export const Admin = () => {
   const [currentTab, setCurrentTab] = useState<null | number>(1);
+  const { getNewestStudentTimetable,userID } = useContext(coursesContext)!;
 
   const handleClick = (e: MouseEvent<HTMLDivElement>) => {
     setCurrentTab(Number(e.currentTarget.id));
+    getNewestStudentTimetable(userID);
   };
 
   return (

src/components/SchedulerHistory.tsx

@@ -12,29 +12,35 @@ const Wrapper = styled.div`
 
 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 [currentTimetable, setCurrentTimetable] = useState(timetableHistory.length===0 ? 0 : timetableHistory.length - 1);
+  let commisionDate = timetableHistory[currentTimetable]?.commisionDate;
 
-  const changeCurrentTimetable = (value: number) => {
-    setCurrentTimetable((currentTimetable) => currentTimetable + value);
+  const SubstractCurrentTimetable = (value: number) => {
+    if (currentTimetable > 0) {
+      setCurrentTimetable((currentTimetable) => currentTimetable + value);
+    }
+  };
+
+  const AddCurrentTimetable = (value: number) => {
+    if (currentTimetable < timetableHistory.length - 1) {
+      setCurrentTimetable((currentTimetable) => currentTimetable + value);
+    }
   };
 
   useEffect(() => {
     console.log('current timetable is: ', currentTimetable);
+    console.log('23113knkalsdnkasdlk', timetableHistory);
     const timetable = timetableHistory[currentTimetable];
     if (timetable) {
       const { groups } = timetable;
       setBasketFromHistoryGroups(groups);
     }
-  }, [currentTimetable]);
+  }, [currentTimetable,timetableHistory]);
 
   return (
     <Wrapper>
-      {timetableHistory.length > 1 && (
-        <SchedulerHistoryNavigation commisionDate={commisionDate} changeCurrentTimetable={changeCurrentTimetable} />
+      {timetableHistory.length > 0 && (
+        <SchedulerHistoryNavigation commisionDate={commisionDate} SubstractCurrentTimetable={SubstractCurrentTimetable} AddCurrentTimetable={AddCurrentTimetable} />
       )}
       <Scheduler />
     </Wrapper>

src/components/SchedulerHistoryNavigation.tsx

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { coursesContext } from '../contexts/CoursesProvider';
+import RightArrow  from '../assets/right-arrow.svg';
+import LeftArrow  from '../assets/left-arrow.svg';
 
 type ButtonProps = {
   direction: 'left' | 'right';
@@ -8,44 +10,83 @@ type ButtonProps = {
 
 const Wrapper = styled.div`
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
+  align-items: center;
+  margin-top:-15px;
 `;
 
-const StyledButton = styled.button<ButtonProps>`
-  width: 100px;
-  height: 100px;
-  background-color: ${({ direction }) => (direction === 'left' ? 'red' : 'blue')};
+const StyledButton = styled.div<ButtonProps>`
+cursor:pointer;
+user-select: none;
+margin:10px;
+border-radius:5px;
+  border-radius: 15px;
+  background-color: #9ed3ff;
+  border: 2px solid white;
+  min-width: 45px;
+  color: black;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding: 12px;
+  :hover{
+  background-color:#85c8ff;
+}
+  transition: color 0.3s, background-color 0.3s;
+`;
+
+const StyledArrow = styled.img`
+width:20px;
+`;
+
+
+const StyledDate = styled.div`
+user-select: none;
+margin:10px;
+border-radius:5px;
+  border-radius: 15px;
+  background-color: #FFDC61;
+  border: 2px solid white;
+  min-width: 45px;
+  text-align:center;
+  color: black;
+  padding: 10px;
 `;
 
 type SchedulerHistoryNavigationProps = {
   commisionDate?: Date;
-  changeCurrentTimetable: (value: number) => void;
+  SubstractCurrentTimetable: (value: number) => void;
+  AddCurrentTimetable: (value: number) => void;
 };
 
 export const SchedulerHistoryNavigation = ({
   commisionDate,
-  changeCurrentTimetable,
+  SubstractCurrentTimetable,
+  AddCurrentTimetable,
 }: SchedulerHistoryNavigationProps) => {
+
+  console.log("231213231231",commisionDate)
+
   return (
     <Wrapper>
       <StyledButton
         direction="left"
         onClick={() => {
           console.log('left clicked');
-          changeCurrentTimetable(-1);
+          SubstractCurrentTimetable(-1);
         }}
       >
-        LEFT
+        <StyledArrow src={LeftArrow}></StyledArrow>
       </StyledButton>
-      {commisionDate}
+      <StyledDate>{commisionDate}</StyledDate>
       <StyledButton
         direction="right"
         onClick={() => {
           console.log('right clicked');
-          changeCurrentTimetable(1);
+          AddCurrentTimetable(1);
         }}
       >
-        RIGHT
+        <StyledArrow src={RightArrow}></StyledArrow>
       </StyledButton>
     </Wrapper>
   );