feat: cf-375 fullscreen for graphical selector (#950)

* wip: moved out the graph so I can actually work with this file

* feat: some animations

* feat: implemented fullscreen mode for graphical selector

* fix: deleted old graphical selector

* fix: defaults to not fullscreen

* fix: small fixes asked by leo, such as padding and index.ts

* feat: added window resizing

* fix: removednested ternary in sidebar wrapper style, also changed some styled component names

* feat: moved sidebar into components

frontend/src/components/SidebarDrawer/SidebarDrawer.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import S from './styles';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const SidebarDrawer = ({ children }: Props) => {
+  const [open, setOpen] = useState<boolean | undefined>(undefined);
+
+  return (
+    <S.Wrapper open={open}>
+      <S.ButtonWrapper role="button" title="See Info..." onClick={() => setOpen(!open)}>
+        <S.SVGWrapper xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 48">
+          <S.SVGLine y1="2" y2="46" x1="2" x2="2" />
+          <S.SVGLine y1="2" y2="46" x1="10" x2="10" />
+        </S.SVGWrapper>
+      </S.ButtonWrapper>
+      <S.ChildrenWrapper>{children}</S.ChildrenWrapper>
+    </S.Wrapper>
+  );
+};
+
+export default SidebarDrawer;

frontend/src/components/SidebarDrawer/index.ts

@@ -0,0 +1,3 @@
+import SidebarDrawer from './SidebarDrawer';
+
+export default SidebarDrawer;

frontend/src/components/SidebarDrawer/styles.ts

@@ -0,0 +1,101 @@
+import styled, { css } from 'styled-components';
+
+const getAnimationState = (openState: boolean | undefined) => {
+  // hasnt been opened or closed yet, is closed
+  if (openState === undefined)
+    return css`
+      right: -30rem;
+    `;
+
+  // to be opened or closed
+  return openState
+    ? css`
+        animation-name: animation_opening;
+      `
+    : css`
+        animation-name: animation_closing;
+      `;
+};
+
+const Wrapper = styled.div<{ open?: boolean }>`
+  position: absolute;
+  height: 85%;
+  width: 30rem;
+
+  top: 5rem;
+
+  background-color: white;
+  border-radius: 10px 0 0 10px;
+  filter: drop-shadow(-2px 2px 4px rgba(0, 0, 0, 0.3));
+
+  animation-duration: 0.7s;
+  animation-fill-mode: forwards;
+  ${({ open }) => getAnimationState(open)}
+
+  @keyframes animation_opening {
+    from {
+      right: -30rem;
+    }
+    to {
+      right: 0;
+    }
+  }
+
+  @keyframes animation_closing {
+    from {
+      right: 0;
+    }
+    to {
+      right: -30rem;
+    }
+  }
+`;
+
+const ChildrenWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 12px 20px;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
+const ButtonWrapper = styled.div`
+  height: 40%;
+  width: 2rem;
+
+  position: absolute;
+  left: -2rem;
+  top: 30%;
+  background-color: white;
+
+  border-radius: 10px 0 0 10px;
+  cursor: pointer;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  :hover {
+    background: #f0f0f0;
+  }
+`;
+
+const SVGWrapper = styled.svg`
+  width: 12px;
+  height: 48px;
+`;
+
+const SVGLine = styled.line`
+  stroke-linecap: round;
+  stroke-width: 2px;
+  stroke: #aaa;
+`;
+
+export default {
+  Wrapper,
+  ChildrenWrapper,
+  ButtonWrapper,
+  SVGLine,
+  SVGWrapper
+};

frontend/src/config/constants.ts

@@ -5,7 +5,7 @@ export const FEEDBACK_LINK =
 
 export const CURR_YEAR = new Date().getFullYear();
 export const TERM = `${CURR_YEAR + (getMostRecentPastTerm(CURR_YEAR).T === 3 ? 1 : 0)}-T${
-  getMostRecentPastTerm(CURR_YEAR).T + 1
+  (getMostRecentPastTerm(CURR_YEAR).T + 1) % 3
 }`;
 export const TIMETABLE_API_URL = `https://timetable.csesoc.app/api/terms/${TERM}/courses`;
 

frontend/src/hooks/index.ts

@@ -1,6 +1,8 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import type { AppDispatch, RootState } from 'config/store';
+import useWindowSize, { WindowSize } from './useWindowSize';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+export const useAppWindowSize: () => WindowSize = useWindowSize;

frontend/src/hooks/useWindowSize.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+// https://usehooks.com/useWindowSize/
+export interface WindowSize {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: undefined,
+    height: undefined
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowSize;
+};
+
+export default useWindowSize;