Merge pull request #207 from kpi-ua/fix/alex-ts-migration-fixes

fix: ts migrate

package.json

@@ -8,19 +8,22 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/material-ui": "^0.21.17",
+    "@types/node": "^20.14.2",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^18.3.0",
     "@types/styled-components": "^5.1.34",
     "@types/styled-system": "^5.1.22",
     "axios": "^0.27.2",
     "clsx": "^1.2.0",
     "moment": "^2.29.4",
-    "node-sass": "^7.0.3",
     "react": "17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "react-select": "^5.4.0",
     "react-select-virtualized": "5.2.0",
     "react-virtualized": "^9.22.3",
+    "sass": "^1.77.5",
     "styled-components": "^5.3.5",
     "styled-system": "^5.1.5",
     "web-vitals": "^3.0.2"

src/app/App.tsx

@@ -1,18 +1,20 @@
-import ScheduleRouter from '../containers/router';
-import Navbar from '../containers/navbar';
-import { Wrapper } from './app.style';
-import { WeekContextProvider } from '@/common/context/weekContext';
-import ThemeContextProvider from '../common/context/themeContext';
-import { GroupContextProvider } from '@/common/context/groupContext';
-import { LecturerContextProvider } from '@/common/context/lecturerContext';
-import { PreloadedListsContextProvider } from '@/common/context/preloadedListsContext';
-import { useCurrentDateParams } from '@/common/utils/useCurrentDateParams';
-import ScrollToTop from '../containers/scrollToTop/index';
+import { GroupContextProvider } from "../common/context/groupContext";
+import { LecturerContextProvider } from "../common/context/lecturerContext";
+import { PreloadedListsContextProvider } from "../common/context/preloadedListsContext";
+import { WeekContextProvider } from "../common/context/weekContext";
+import { useCurrentDateParams } from "../common/utils/useCurrentDateParams";
+import ThemeContextProvider from "../common/context/themeContext";
+import Navbar from "../containers/navbar";
+import ScheduleRouter from "../containers/router";
+import ScrollToTop from "../containers/scrollToTop/index";
+import { Wrapper } from "./app.style";
 
 function App() {
-  const { currentWeek } = useCurrentDateParams()
+  const { currentWeek } = useCurrentDateParams();
   return (
-    <WeekContextProvider initialValue={currentWeek === 1 ? 'firstWeek' : 'secondWeek'}>
+    <WeekContextProvider
+      initialValue={currentWeek === 1 ? "firstWeek" : "secondWeek"}
+    >
       <PreloadedListsContextProvider>
         <GroupContextProvider>
           <ThemeContextProvider>

src/app/app.style.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { getValueFromTheme } from '@/common/utils/getValueFromTheme';
+import { getValueFromTheme } from '../common/utils/getValueFromTheme';
 
 export const Wrapper = styled.div`
   background: ${getValueFromTheme('bgPrimary')};

src/common/constants/subjectTypes.ts

@@ -1,16 +1,22 @@
-import { ScheduleItemTypeLab, ScheduleItemTypeLec, ScheduleItemTypePrac } from "@/components/scheduleItemContent/scheduleItemContent.style";
+import { AnyStyledComponent } from "styled-components";
+import {
+  ScheduleItemTypeLab,
+  ScheduleItemTypeLec,
+  ScheduleItemTypePrac,
+} from "../../components/scheduleItemContent/scheduleItemContent.style";
 
-export const SUBJECT_TYPES = {
+export const SUBJECT_TYPES: Record<string, { component: AnyStyledComponent; title: string }> =
+  {
     lec: {
-        component: ScheduleItemTypeLec,
-        title: "Лек"
+      component: ScheduleItemTypeLec,
+      title: "Лек",
     },
     lab: {
-        component: ScheduleItemTypeLab,
-        title: "Лаб"
+      component: ScheduleItemTypeLab,
+      title: "Лаб",
     },
     prac: {
-        component: ScheduleItemTypePrac,
-        title: "Прак"
+      component: ScheduleItemTypePrac,
+      title: "Прак",
     },
-}
+  };

src/common/context/groupContext.tsx

@@ -1,21 +1,25 @@
 import React, { createContext, useContext, useState } from "react";
 
 interface Props {
-  initialValue?: any,
-  children: React.FC
+  children: React.ReactNode
 }
 
 interface GroupContextType {
-  group: any;
+  group?: any;
   setGroup: React.Dispatch<any>;
 };
 
-const GroupContext = createContext<GroupContextType | null>( null);
+
+const defaultContext: GroupContextType = {
+  setGroup: () => {},
+};
+
+const GroupContext = createContext<GroupContextType>(defaultContext);
 
 export const useGroupContext = () => useContext(GroupContext);
 
-export const GroupContextProvider: React.FC<Props> = ({ initialValue = null, children }) => {
-  const [group, setGroup] = useState(initialValue);
+export const GroupContextProvider: React.FC<Props> = ({ children }) => {
+  const [group, setGroup] = useState<any>();
 
   const params: GroupContextType = { setGroup, group };
 

src/common/context/preloadedListsContext.tsx

@@ -1,38 +1,39 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { getAllGroups, getAllLecturers } from '@/api/fullList';
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { getAllGroups, getAllLecturers } from "../../api/fullList";
 
 interface Props {
-  children: React.ReactNode,
+  children: React.ReactNode;
 }
 
 interface ContextType {
-  groups: any[],
-  lecturers: any[],
+  groups: any[];
+  lecturers: any[];
 }
 
 const PreloadedListsContext = createContext<ContextType | null>(null);
 
 export const usePreloadedListContext = () => useContext(PreloadedListsContext);
-// TODO add exams here 
-export const PreloadedListsContextProvider: React.FC<Props> = ({children}) => {
+// TODO add exams here
+export const PreloadedListsContextProvider: React.FC<Props> = ({
+  children,
+}) => {
   const [lists, setLists] = useState<ContextType>({
     groups: [],
     lecturers: [],
   });
 
-  const promises = [getAllGroups(), getAllLecturers()];
-
   useEffect(() => {
-    Promise.all(promises)
-      .then(([groups, lecturers]) => {
-        setLists({
-          groups: groups.data,
-          lecturers: lecturers.data,
-        });
+    Promise.all([getAllGroups(), getAllLecturers()]).then(([groups, lecturers]) => {
+      setLists({
+        groups: groups.data,
+        lecturers: lecturers.data,
       });
+    });
   }, []);
 
   return (
-    <PreloadedListsContext.Provider value={lists}>{children}</PreloadedListsContext.Provider>
+    <PreloadedListsContext.Provider value={lists}>
+      {children}
+    </PreloadedListsContext.Provider>
   );
-};
+};

src/common/context/themeContext.tsx

@@ -1,6 +1,6 @@
 import { ThemeProvider } from 'styled-components';
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { theme } from '@/common/constants/theme';
+import { theme } from '../../common/constants/theme';
 import { getLocalStorageItem, setLocalStorageItem } from '../utils/parsedLocalStorage';
 
 interface Props {
@@ -12,15 +12,22 @@ interface ContextType {
   changeTheme: (isLightTheme: boolean) => void,
 }
 
-const ThemeSelectorContext = createContext<ContextType | null>(null);
+const defaultContext: ContextType = {
+  changeTheme: () => {},
+};
+
+const ThemeSelectorContext = createContext<ContextType>(defaultContext);
+
 
 export const useThemeSelectorContext = () => useContext(ThemeSelectorContext);
 
 const ThemeContextProvider: React.FC<Props> = ({ children, initialValue = 'light' }) => {
   const [currentTheme, setTheme] = useState(initialValue);
+
   useEffect(() => {
     const localStorageTheme = getLocalStorageItem("theme")
     const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+
     if (localStorageTheme) {
       changeTheme(localStorageTheme === 'light')
     }

src/common/context/weekContext.tsx

@@ -10,7 +10,12 @@ interface ContextProps {
   currentWeek: any,
 }
 
-const WeekContext = createContext<ContextProps | null>(null);
+const defaultContext: ContextProps = {
+  setCurrentWeek: () => {},
+  currentWeek: 0,
+};
+
+const WeekContext = createContext<ContextProps>(defaultContext);
 
 export const useWeekContext = () => useContext(WeekContext);
 

src/common/styles/styles.ts

@@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
 import { flexbox, space } from 'styled-system';
-import { MODES } from '@/common/constants/modes';
+import { MODES } from '../../common/constants/modes';
 import { getModeSize } from '../utils/getModeSize';
-import { getValueFromTheme } from '@/common/utils/getValueFromTheme';
+import { getValueFromTheme } from '../../common/utils/getValueFromTheme';
 import { Link } from 'react-router-dom';
 
-export const Flex = styled.div<{gap?: number}>`
+export const Flex = styled.div<{gap?: string}>`
   display: flex;
   ${space};
   ${flexbox};

src/common/utils/generateScheduleMatrix.ts

@@ -1,32 +1,38 @@
-import { DAYS, TIME_POINTS } from '@/common/constants/scheduleParams';
-import { getActiveTimePoint } from '@/common/utils/getActiveTimePoint';
-import moment from 'moment';
+import { DAYS, TIME_POINTS } from "../../common/constants/scheduleParams";
+import { getActiveTimePoint } from "../../common/utils/getActiveTimePoint";
+import moment from "moment";
 
-type WeekSchedule = Array<{day: any, pairs: any[]}>
+type WeekSchedule = Array<{ day: any; pairs: any[] }>;
 
 export const generateScheduleMatrix = (weekSchedule: WeekSchedule) => {
-  const scheduleMatrix = new Array(TIME_POINTS.length).fill(null).map(() => new Array(DAYS.length).fill(null));
+  const scheduleMatrix = new Array(TIME_POINTS.length)
+    .fill(null)
+    .map(() => new Array(DAYS.length).fill(null));
   const activePair = getActiveTimePoint();
   const currentDay = moment().day() - 1;
 
-  weekSchedule.forEach(day => {
-    const yIndex = DAYS.findIndex(item => item === day.day);
+  weekSchedule.forEach((day) => {
+    const yIndex = DAYS.findIndex((item) => item === day.day);
 
-    day.pairs.forEach(pair => {
-      const xIndex = TIME_POINTS.findIndex(item => item === pair.time);
+    day.pairs.forEach((pair) => {
+      const xIndex = TIME_POINTS.findIndex((item) => item === pair.time);
       const cell = scheduleMatrix[xIndex][yIndex];
-      let newCell = {...pair, currentDay: activePair !== -1 && currentDay === yIndex && activePair === xIndex };
+      let newCell = {
+        ...pair,
+        currentDay:
+          activePair !== -1 && currentDay === yIndex && activePair === xIndex,
+      };
 
       if (cell) {
-        let extendedCell = [];
+        let extendedCell: any[] = [];
 
         if (Array.isArray(cell)) {
-          extendedCell = [...cell]
+          extendedCell = [...cell];
         } else {
-          extendedCell = [cell]
+          extendedCell = [cell];
         }
 
-        extendedCell.push({...pair, currentDay: newCell.currentDay});
+        extendedCell.push({ ...pair, currentDay: newCell.currentDay });
         newCell = extendedCell;
       }
 
@@ -35,4 +41,4 @@ export const generateScheduleMatrix = (weekSchedule: WeekSchedule) => {
   });
 
   return scheduleMatrix;
-};
+};

src/common/utils/getActiveTimePoint.ts

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { TIME_POINTS } from '@/common/constants/scheduleParams';
+import { TIME_POINTS } from '../../common/constants/scheduleParams';
 
 export const getActiveTimePoint = () => {
   const PAIR_DURATION_IN_MINUTES = 95;

src/common/utils/getApiFunction.ts

@@ -1,6 +1,6 @@
 import { routes } from '../constants/routes';
-import { getScheduleByGroup, getScheduleByLecturer, getExamsByGroup } from '@/api/schedule';
-import { getAllGroups, getAllLecturers } from '@/api/fullList';
+import { getScheduleByGroup, getScheduleByLecturer, getExamsByGroup } from '../../api/schedule';
+import { getAllGroups, getAllLecturers } from '../../api/fullList';
 
 export const getScheduleApiFunction = (route: string) => {
   const functions = {

src/common/utils/getModeSize.ts

@@ -1,4 +1,4 @@
-import {MODES} from "@/common/constants/modes";
+import {MODES} from "../../common/constants/modes";
 
 export const getModeSize = (MODE: string): string => {
   const MODE_SIZES = {

src/common/utils/useCurrentDateParams.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { getCurrentDateValues } from '@/api/getCurrentDateValues';
+import { getCurrentDateValues } from '../../api/getCurrentDateValues';
 
 export const useCurrentDateParams = () => {
   const [dateParams, setDateParams] = useState({currentWeek: null, currentDay: null, currentLesson: null});

src/common/utils/useCurrentMode.ts

@@ -1,15 +1,15 @@
-import {MODES} from "@/common/constants/modes";
-import {getModeSize} from "./getModeSize";
-import { useEffect, useState } from 'react';
+import { MODES } from "../../common/constants/modes";
+import { getModeSize } from "./getModeSize";
+import { useEffect, useState } from "react";
 
 export const useCurrentMode = () => {
   const [currentMode, setCurrentMode] = useState<string | null>(null);
 
   useEffect(() => {
     detectCurrentMode();
-    window.addEventListener('resize', detectCurrentMode);
+    window.addEventListener("resize", detectCurrentMode);
 
-    return () => window.removeEventListener('resize', detectCurrentMode);
+    return () => window.removeEventListener("resize", detectCurrentMode);
   }, []);
 
   const detectCurrentMode = () => {
@@ -21,7 +21,7 @@ export const useCurrentMode = () => {
     }
 
     setCurrentMode(MODES.BIG);
-  }
+  };
 
   return currentMode;
-}
+};

src/components/entitySearch/entitySearch.style.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { getValueFromTheme } from '@/common/utils/getValueFromTheme';
+import { getValueFromTheme } from '../../common/utils/getValueFromTheme';
 
 export const Label = styled.label`
   display: flex;