Merge pull request #237 from qqlexa/replace-moment-with-dayjs

Replace moment with dayjs

package.json

@@ -14,10 +14,9 @@
     "@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",
+    "dayjs": "^1.11.13",
     "lodash-es": "^4.17.21",
-    "moment": "^2.29.4",
     "react": "17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

src/api/fullList.ts

@@ -4,15 +4,15 @@ import { PagedResponse } from '../models/PagedResponse';
 import Http from "./index";
 
 export const getAllLecturers = (): Promise<PagedResponse<Lecturer[]>> => {
-  return Http.get("/schedule/lecturer/list").then(({ data }) => data);
+  return Http.get("/schedule/lecturer/list");
 };
 
 export const getAllGroups = async (): Promise<PagedResponse<Group[]>> => {
-  const response = await Http.get<PagedResponse<Group[]>>("/schedule/groups")
+  const response = await Http.get("/schedule/groups");
 
   return {
-    ...response.data,
-    data: response.data.data.map(row => ({
+    ...(response as PagedResponse<Group[]>),
+    data: (response as PagedResponse<Group[]>).data.map(row => ({
       ...row,
       name: `${row.name.trim()} (${row.faculty.trim()})`,
       id: row.id,

src/api/getCurrentDateValues.ts

@@ -3,5 +3,5 @@ import { PagedResponse } from '../models/PagedResponse';
 import Http from './index';
 
 export const getCurrentDateValues = (): Promise<PagedResponse<CurrentTime>> => {
-  return Http.get('/time/current').then(res => res.data);
-};
+  return Http.get('/time/current');
+};

src/api/index.ts

@@ -1,9 +1,36 @@
-import axios from "axios";
-let headers = {};
+const BASE_URL = "https://api.campus.kpi.ua";
 
-export const Http = axios.create({
-  baseURL: "https://api.campus.kpi.ua/",
-  headers,
-});
+const defaultHeaders = {
+  "Content-Type": "application/json",
+};
+
+interface FetchOptions extends RequestInit {
+  headers?: Record<string, string>;
+}
+
+const fetchWrapper = async (requestUrl: string, options: FetchOptions = {}) => {
+  const { headers = {}, ...restOptions } = options;
+
+  const requestOptions: RequestInit = {
+    ...restOptions,
+    headers: {
+      ...defaultHeaders,
+      ...headers,
+    },
+  };
+
+  const url = BASE_URL + requestUrl;
+  const response = await fetch(url, requestOptions);
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status} in request to ${url}`);
+  }
+  return await response.json();
+};
+
+const Http = {
+  get: (url: string, options: FetchOptions = {}) =>
+    fetchWrapper(url, { ...options, method: 'GET' }),
+};
 
 export default Http;

src/api/schedule.ts

@@ -5,16 +5,13 @@ import { StudentLesson } from '../models/StudentLesson';
 import Http from './index';
 
 export const getScheduleByLecturer = (lecturerId: string): Promise<PagedResponse<LecturerLesson[]>> => {
-  return Http.get('/schedule/lecturer?lecturerId=' + lecturerId)
-    .then(res => res.data);
+  return Http.get('/schedule/lecturer?lecturerId=' + lecturerId);
 }
 
 export const getScheduleByGroup = (groupId: string): Promise<PagedResponse<StudentLesson[]>> => {
-  return Http.get('/schedule/lessons?groupId=' + groupId)
-    .then(res => res.data);
+  return Http.get('/schedule/lessons?groupId=' + groupId);
 }
 
 export const getExamsByGroup = (groupName: string): Promise<PagedResponse<Exam[]>> => {
-  return Http.get('/exams/group?groupId=' + groupName)
-    .then(res => res.data);
-}
+  return Http.get('/exams/group?groupId=' + groupName);
+}

src/common/constants/scheduleParams.ts

@@ -8,10 +8,10 @@ export const DAYS = [
 ];
 
 export const TIME_POINTS = [
-  '8:30',
+  '08:30',
   '10:25',
   '12:20',
   '14:15',
   '16:10',
   '18:30'
-];
+];

src/common/hooks/useCurrentDateParams.ts

@@ -15,4 +15,4 @@ export const useCurrentDateParams = () => {
   }, []);
 
   return dateParams;
-};
+};

src/common/utils/generateScheduleMatrix.ts

@@ -1,6 +1,6 @@
-import moment from "moment";
+import dayjs from 'dayjs';
 import { DAYS, TIME_POINTS } from "../../common/constants/scheduleParams";
-import { getActiveTimePoint } from "../../common/utils/getActiveTimePoint";
+import { getActiveTimePoint, parseTime } from "../../common/utils/getActiveTimePoint";
 import { Schedule } from '../../models/Schedule';
 import { Pair } from '../../models/Pair';
 
@@ -19,13 +19,14 @@ export const generateScheduleMatrix = <T extends Pair,>(weekSchedule: Schedule<T
     .map(() => new Array(DAYS.length).fill(null));
 
   const activePair: number = getActiveTimePoint();
-  const currentDay = moment().day();
+  const currentDay = dayjs().day();
 
   weekSchedule.forEach((schedule) => {
     const yIndex = DAYS.findIndex((item) => item === schedule.day);
 
     schedule.pairs.forEach((pair) => {
-      const xIndex = TIME_POINTS.findIndex((item) => item === pair.time);
+      const normalizedPairTime = parseTime(pair.time).format('HH:mm');
+      const xIndex = TIME_POINTS.findIndex((item) => item === normalizedPairTime);
       const cell = scheduleMatrix[xIndex][yIndex];
       let newCell: ScheduleMatrixCell | ScheduleMatrixCell[] = {
         ...pair,

src/common/utils/getActiveTimePoint.ts

@@ -1,15 +1,26 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { TIME_POINTS } from '../../common/constants/scheduleParams';
 
+export const parseTime = (timeString: string) => {
+  const [hours, minutes] = timeString.split(':').map(Number);
+
+  const today = dayjs().startOf('day');
+
+  return today
+    .hour(hours)
+    .minute(minutes)
+    .second(0);
+};
+
+
 export const getActiveTimePoint = () => {
   const PAIR_DURATION_IN_MINUTES = 95;
-  const now = moment();
+  const now = dayjs();
 
   return TIME_POINTS.findIndex((timePoint) => {
-    const timeNumbers = timePoint.split('.').map(item => +item);
-    const pairStartDate = moment().set({ hours: timeNumbers[0], minutes: timeNumbers[1], seconds: 0 });
-    const pairEndDate = moment(pairStartDate).set({ minutes: timeNumbers[1] + PAIR_DURATION_IN_MINUTES })
+    const pairStartDate = parseTime(timePoint);
+    const pairEndDate = pairStartDate.add(PAIR_DURATION_IN_MINUTES, 'minute');
 
     return now.isBetween(pairStartDate, pairEndDate);
   });
-};
+};

src/components/Footer/Footer.tsx

@@ -1,14 +1,14 @@
-import { FooterWrapper, FooterLogo, FooterSection } from './Footer.style'
+import { FooterWrapper, FooterLogo, FooterSection } from './Footer.style';
 import logo from '../../assets/footer-logo.svg';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 export const Footer = () => {
   return (
     <FooterWrapper>
       <FooterLogo src={logo} alt="footer logo" />
       <FooterSection>
         <p>
-          Національний технічний університет України"Київський політехнічний інститут імені Ігоря Сікорського" © 1998-{moment().year()}
+          Національний технічний університет України"Київський політехнічний інститут імені Ігоря Сікорського" © 1998-{dayjs().year()}
         </p>
         <p>
           Адреса: Україна, 03056 м.Київ-56, проспект Перемоги, 37
@@ -24,9 +24,9 @@ export const Footer = () => {
       </FooterSection>
       <FooterSection>
         <p>
-        Використання матеріалу сайту тільки з обов’язковим посиланням на schedule.kpi.ua
+          Використання матеріалу сайту тільки з обов’язковим посиланням на schedule.kpi.ua
         </p>
       </FooterSection>
     </FooterWrapper>
-  )
+  );
 };

src/components/examSchedule/examSchedule.tsx

@@ -1,11 +1,11 @@
-import { CardDate, CardMainData, CardWrapper, Divider, DividerRed, Location, Subject, Teacher, } from './exam.style';
+import dayjs from 'dayjs';
+import { CardDate, CardMainData, CardWrapper, Divider, DividerRed, Location, Subject, Teacher } from './exam.style';
 import teacherIcon from '../../assets/icons/teacher.svg';
 import locationIcon from '../../assets/icons/location.svg';
 import clock from '../../assets/icons/clock.svg';
 import { Flex, Pictogram } from '../../common/styles/styles';
 import React from 'react';
 import { Exam } from '../../models/Exam';
-import moment from 'moment';
 
 interface Props {
   exam: Exam;
@@ -18,9 +18,8 @@ const ExamSchedule = ({ exam }: Props) => {
     room,
   } = exam;
 
-  const date = moment(exam.date);
-  const time = moment(exam.date).locale('en-US');
-  const daysLeft = moment.duration(date.diff(moment())).days();
+  const date = dayjs(exam.date);
+  const daysLeft = dayjs(date).diff(dayjs(), 'day');
 
   return (
     <div>
@@ -35,7 +34,7 @@ const ExamSchedule = ({ exam }: Props) => {
             </Teacher>
             <Teacher>
               <Pictogram src={clock} alt="time"/>
-              {time.format('h:mm A')}
+              {date.format('h:mm A')}
             </Teacher>
             <Location>
               <Pictogram src={locationIcon} alt="location"/>

src/components/timeDivider/timeDivider.tsx

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import {
   Container,
   Divider,
@@ -9,7 +8,7 @@ import {
 const TimeDivider = ({ value }: { value: string }) => (
   <Container>
     <InnerContainer>
-      <TimeCell>{moment(value, 'H:mm').format('HH:mm')}</TimeCell>
+      <TimeCell>{value}</TimeCell>
       <Divider />
     </InnerContainer>
   </Container>