enhancement fictadvisor#38: migrated to momentjs library

illiakroshka · Feb 7, 2024 · 50bbca6 · 50bbca6
1 parent c83eb0c
commit 50bbca6
Show file tree

Hide file tree

Showing 23 changed files with 95 additions and 94 deletions.
diff --git a/fictadvisor-api/src/v2/api/services/TeacherService.ts b/fictadvisor-api/src/v2/api/services/TeacherService.ts
@@ -262,7 +262,7 @@ export class TeacherService {
         mark,
       });
     }
-    return marks;
+    return marks.sort((a, b) => b.amount - a.amount);
   }
 
   checkQueryDate ({ semester, year }: ResponseQueryDTO) {

diff --git a/fictadvisor-web/.env.development b/fictadvisor-web/.env.development
@@ -1,5 +1,5 @@
-NEXT_PUBLIC_API_BASE_URL=https://api.fictadvisor.com/v2
-API_BASE_URL=https://api.fictadvisor.com/v2
+NEXT_PUBLIC_API_BASE_URL=https://apidev.fictadvisor.com/v2
+API_BASE_URL=https://apidev.fictadvisor.com/v2
 
 BOT_ID=5916509477
 BOT_NAME=fictadvisordevbot

diff --git a/fictadvisor-web/package.json b/fictadvisor-web/package.json
@@ -25,12 +25,13 @@
     "babel-plugin-import": "^1.13.8",
     "chart.js": "^4.4.0",
     "classnames": "^2.3.2",
-    "dayjs": "^1.11.9",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "formik": "^2.4.3",
     "lodash-es": "^4.17.21",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.45",
     "next": "^14.0.3",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
@@ -66,4 +67,4 @@
     "storybook": "^7.4.0",
     "typescript": "^5.2.2"
   }
-}
+}
diff --git a/fictadvisor-web/src/app/layout.tsx b/fictadvisor-web/src/app/layout.tsx
@@ -1,14 +1,10 @@
 'use client';
 
-import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProvider } from '@mui/system';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import dayjs from 'dayjs';
-import uk from 'dayjs/locale/uk';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import moment from 'moment';
 import Head from 'next/head';
 import Script from 'next/script';
 
@@ -17,14 +13,21 @@ import ToastContextProvider from '@/hooks/use-toast/toast-context';
 import theme from '@/styles/theme';
 import { manrope } from '@/styles/theme/constants/typography/typography';
 
+import 'moment/locale/uk';
+import 'moment-timezone';
+
 import '@/styles/reset.scss';
 import '@/styles/typography.scss';
 import '@/styles/global-styles.scss';
 
-dayjs.extend(timezone);
-dayjs.extend(utc);
-dayjs.tz.setDefault('Europe/Kiev');
-dayjs.locale({ ...uk, weekStart: 1 });
+moment.tz.setDefault('Europe/Kiev');
+moment.tz.setDefault('uk');
+moment.updateLocale('uk', {
+  week: {
+    dow: 1,
+  },
+});
+
 const queryClient = new QueryClient();
 
 export default function RootLayout({
@@ -60,7 +63,7 @@ export default function RootLayout({
       <body className={manrope.className} style={manrope.style}>
         <Script async src="https://telegram.org/js/telegram-widget.js" />
         <ThemeProvider theme={theme}>
-          <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'uk'}>
+          <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="uk">
             <QueryClientProvider client={queryClient}>
               <AuthenticationProvider>
                 <ToastContextProvider>{children}</ToastContextProvider>

diff --git a/...src/components/pages/schedule-page/calendar-section/components/date-picker/DatePicker.tsx b/...src/components/pages/schedule-page/calendar-section/components/date-picker/DatePicker.tsx
@@ -1,5 +1,5 @@
 import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import { useSchedule } from '@/store/schedule/useSchedule';
 
@@ -16,7 +16,7 @@ export const DatePicker = () => {
 
   return (
     <DateCalendar
-      value={dayjs(chosenDay)}
+      value={moment(chosenDay)}
       onChange={newValue => {
         if (newValue && semester) {
           setChosenDay(newValue);
@@ -28,8 +28,8 @@ export const DatePicker = () => {
       dayOfWeekFormatter={day => {
         return day.charAt(0).toUpperCase() + day.slice(1);
       }}
-      minDate={dayjs(semester?.startDate)}
-      maxDate={dayjs(semester?.endDate)}
+      minDate={moment(semester?.startDate)}
+      maxDate={moment(semester?.endDate)}
     />
   );
 };
diff --git a/...-web/src/components/pages/schedule-page/schedule-event-edit-section/ScheduleEventEdit.tsx b/...-web/src/components/pages/schedule-page/schedule-event-edit-section/ScheduleEventEdit.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import { formValidationSchema } from '@/components/pages/schedule-page/schedule-event-edit-section/schedule-form/validation';
 import ScheduleInfoCard from '@/components/pages/schedule-page/schedule-event-edit-section/schedule-info-card';
@@ -31,7 +31,7 @@ export const ScheduleEventEdit = () => {
     () =>
       getWeekByDate(
         semester as GetCurrentSemester,
-        dayjs(openedEvent?.startTime as string).tz(),
+        moment(openedEvent?.startTime as string),
       ),
     [openedEvent],
   );

diff --git a/...nents/pages/schedule-page/schedule-event-edit-section/schedule-form/ScheduleEventForm.tsx b/...nents/pages/schedule-page/schedule-event-edit-section/schedule-form/ScheduleEventForm.tsx
@@ -7,8 +7,8 @@ import {
   TrashIcon,
 } from '@heroicons/react/24/outline';
 import { Box, Typography, useMediaQuery } from '@mui/material';
-import dayjs, { Dayjs } from 'dayjs';
 import { Form, Formik, FormikConfig } from 'formik';
+import moment, { Moment } from 'moment';
 
 import Button from '@/components/common/ui/button-mui';
 import {
@@ -60,8 +60,8 @@ export const ScheduleEventForm: FC<ScheduleEventFormProps> = ({
   isNewEvent = false,
 }) => {
   const chosenDay = useSchedule(state => state.chosenDay);
-  const [date, setDate] = useState<Dayjs | null>(
-    !initialValues.startTime ? null : dayjs(initialValues.startTime).tz(),
+  const [date, setDate] = useState<Moment | null>(
+    !initialValues.startTime ? null : moment(initialValues.startTime),
   );
   const [tabValue, setTabValue] = useState<InfoCardTabs>(InfoCardTabs.EVENT);
   const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));

diff --git a/...age/schedule-event-edit-section/schedule-form/components/calendar-input/CalendarInput.tsx b/...age/schedule-event-edit-section/schedule-form/components/calendar-input/CalendarInput.tsx
@@ -3,8 +3,8 @@ import { CalendarIcon as CalendarIconMUI } from '@heroicons/react/24/outline';
 import { Box, Typography } from '@mui/material';
 import { ukUA } from '@mui/x-date-pickers';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import dayjs, { Dayjs } from 'dayjs';
 import { useField } from 'formik';
+import moment, { Moment } from 'moment';
 
 import { useSchedule } from '@/store/schedule/useSchedule';
 
@@ -17,8 +17,8 @@ ukrainianLocale.fieldDayPlaceholder = () => 'ДД';
 ukrainianLocale.fieldYearPlaceholder = params => 'Р'.repeat(params.digitAmount);
 
 interface CalendarInputProps {
-  date: Dayjs | null;
-  setDate: Dispatch<Dayjs | null>;
+  date: Moment | null;
+  setDate: Dispatch<Moment | null>;
 }
 const CalendarIcon = () => {
   return <CalendarIconMUI height={24} width={24} />;
@@ -29,7 +29,7 @@ const CalendarInput: FC<CalendarInputProps> = ({ date, setDate }) => {
     useField('startTime');
   const [, , { setTouched: setTouchedEndTime }] = useField('endTime');
 
-  const onChange = (value: dayjs.Dayjs | null) => {
+  const onChange = (value: Moment | null) => {
     if (!date) {
       setTouchedStartTime(false);
       setTouchedEndTime(false);
@@ -47,10 +47,10 @@ const CalendarInput: FC<CalendarInputProps> = ({ date, setDate }) => {
         }}
         slots={{ openPickerIcon: CalendarIcon }}
         sx={styles.datePicker}
-        value={dayjs(date).tz()}
+        value={moment(date)}
         onChange={onChange}
-        minDate={dayjs(semester?.startDate).tz()}
-        maxDate={dayjs(semester?.endDate).tz()}
+        minDate={moment(semester?.startDate)}
+        maxDate={moment(semester?.endDate)}
         localeText={ukrainianLocale}
         dayOfWeekFormatter={day => {
           return day.charAt(0).toUpperCase() + day.slice(1);

diff --git a/...le-event-edit-section/schedule-form/components/schedule-dropdown/TimeScheduleDropdown.tsx b/...le-event-edit-section/schedule-form/components/schedule-dropdown/TimeScheduleDropdown.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect } from 'react';
-import dayjs from 'dayjs';
 import { useField } from 'formik';
+import moment, { Moment } from 'moment';
 
 import Dropdown from '@/components/common/ui/form/dropdown';
 import { FormikDropdownProps } from '@/components/common/ui/form/with-formik/dropdown/FormikDropdown';
@@ -10,7 +10,7 @@ import { getDateWithTimeSet } from '../../utils/getDateWithTimeSet';
 import * as styles from './ScheduleDropdown.styles';
 
 interface TimeScheduleDropdownProps extends FormikDropdownProps {
-  date: dayjs.Dayjs;
+  date: Moment;
 }
 
 const TimeScheduleDropdown: FC<TimeScheduleDropdownProps> = ({

diff --git a/...pages/schedule-page/schedule-event-edit-section/schedule-form/utils/getDateWithTimeSet.ts b/...pages/schedule-page/schedule-event-edit-section/schedule-form/utils/getDateWithTimeSet.ts
@@ -1,6 +1,6 @@
-import dayjs from 'dayjs';
+import { Moment } from 'moment';
 
-export function getDateWithTimeSet(date: dayjs.Dayjs, time: string) {
+export function getDateWithTimeSet(date: Moment, time: string) {
   return (
     date.format('YYYY-MM-DDTHH:mm:ssZ[Z]').toString().substring(0, 11) +
     time.substring(11)

diff --git a/...pages/schedule-page/schedule-event-edit-section/schedule-form/utils/getOptionsFromDate.ts b/...pages/schedule-page/schedule-event-edit-section/schedule-form/utils/getOptionsFromDate.ts
@@ -1,12 +1,12 @@
-import { Dayjs } from 'dayjs';
+import { Moment } from 'moment';
 
 import { DropDownOption } from '@/components/common/ui/form/dropdown/types';
 
 import { getStringTime } from '../../../utils/getStringTime';
 const MinuteMs = 1000 * 60;
 const HourMs = MinuteMs * 60;
 
-export const getOptionsFromDate = (date: Dayjs) => {
+export const getOptionsFromDate = (date: Moment) => {
   const startOfDayMs = date.startOf('day').valueOf();
 
   const startStudyTime = HourMs * 7 + startOfDayMs;

diff --git a/...advisor-web/src/components/pages/schedule-page/schedule-section/ScheduleSection.styles.ts b/...advisor-web/src/components/pages/schedule-page/schedule-section/ScheduleSection.styles.ts
@@ -6,7 +6,7 @@ export const scheduleSection: SxProps<Theme> = {
   flexDirection: 'column',
   margin: '6px',
   width: '75%',
-  overflow: 'scroll',
+  overflow: 'auto',
   height: `calc(100vh - ${100}px)`,
   position: 'relative',
 };

diff --git a/...advisor-web/src/components/pages/schedule-page/schedule-section/ScheduleSectionMobile.tsx b/...advisor-web/src/components/pages/schedule-page/schedule-section/ScheduleSectionMobile.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Box, Typography } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import { GetEventBody } from '@/lib/api/schedule/types/GetEventBody';
 import { transformEvents } from '@/lib/api/schedule/utils/transformEvents';
@@ -46,8 +46,8 @@ const ScheduleSectionMobile = () => {
                   </Typography>
                   <Typography
                     sx={styles.date(
-                      currentTime.date() === dayjs(day.day).tz().date() &&
-                        currentTime.month() === dayjs(day.day).tz().month(),
+                      currentTime.date() === moment(day.day).date() &&
+                        currentTime.month() === moment(day.day).month(),
                     )}
                   >
                     {day.day.getDate()}

diff --git a/...onents/pages/schedule-page/schedule-section/components/schedule-header/ScheduleHeader.tsx b/...onents/pages/schedule-page/schedule-section/components/schedule-header/ScheduleHeader.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { Box, Typography } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import Button from '@/components/common/ui/button-mui';
 import {
@@ -82,13 +82,9 @@ const ScheduleHeader = () => {
   }, [eventsBody, week]);
 
   const handleClick = () => {
-    if (
-      dayjs(semester?.endDate as string)
-        .tz()
-        .valueOf() > currentTime.valueOf()
-    )
+    if (moment(semester?.endDate as string).valueOf() > currentTime.valueOf())
       setChosenDay(currentTime);
-    else setChosenDay(dayjs(semester?.endDate as string).tz());
+    else setChosenDay(moment(semester?.endDate as string));
   };
 
   return (
@@ -143,16 +139,16 @@ const ScheduleHeader = () => {
           <Box sx={styles.column} key={i}>
             <Typography
               sx={styles.dayName(
-                days[i] ? dayjs(days[i].day).isSame(currentTime) : false,
+                days[i] ? moment(days[i].day).isSame(currentTime) : false,
               )}
             >
               {dayName}
             </Typography>
             {days[i] && !loading && (
               <Typography
                 sx={styles.dayNumber(
-                  dayjs(days[i].day).tz().isSame(currentTime, 'day'),
-                  dayjs(days[i].day).tz().isSame(chosenDay, 'day'),
+                  moment(days[i].day).isSame(currentTime, 'day'),
+                  moment(days[i].day).isSame(chosenDay, 'day'),
                 )}
               >
                 {days[i].day.getDate()}

diff --git a/.../components/schedule/components/schedule-column/components/schedule-card/ScheduleCard.tsx b/.../components/schedule/components/schedule-column/components/schedule-card/ScheduleCard.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { Box, useMediaQuery } from '@mui/material';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import { calculateScheduleLineTop } from '@/components/pages/schedule-page/schedule-section/components/schedule/components/schedule-column/components/schedule-card/utils/calculateScheduleLineTop';
 import ScheduleLine from '@/components/pages/schedule-page/schedule-section/components/schedule/components/schedule-line';
@@ -40,7 +40,7 @@ const ScheduleCard: FC<ScheduleCardProps> = ({ event, onClick, week }) => {
     setHeight(calculateHeight(_event.startTime, _event.endTime));
     setStart(getStringTime(_event.startTime));
     setEnd(getStringTime(_event.endTime));
-    setIsPastEvent(currentTime.valueOf() >= dayjs(_event.endTime).valueOf());
+    setIsPastEvent(currentTime.valueOf() >= moment(_event.endTime).valueOf());
     setLineTop(
       calculateScheduleLineTop(
         _event.startTime,
@@ -49,8 +49,8 @@ const ScheduleCard: FC<ScheduleCardProps> = ({ event, onClick, week }) => {
       ),
     );
     setIsCurEvent(
-      currentTime.valueOf() >= dayjs(_event.startTime).valueOf() &&
-        currentTime.valueOf() <= dayjs(_event.endTime).valueOf(),
+      currentTime.valueOf() >= moment(_event.startTime).valueOf() &&
+        currentTime.valueOf() <= moment(_event.endTime).valueOf(),
     );
   }, [currentTime, event]);
 

diff --git a/...umn/components/schedule-card/components/schedule-events-section/ScheduleEventsSection.tsx b/...umn/components/schedule-card/components/schedule-events-section/ScheduleEventsSection.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ClickAwayListener } from '@mui/base';
 import { Box, Typography } from '@mui/material';
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 import { Event } from '@/types/schedule';
 
@@ -51,7 +51,7 @@ export const ScheduleEventsSection: FC<ScheduleEventsExpandedProps> = ({
   });
 
   const eventDay = new Date(events[0].startTime).getDate();
-  const eventMonth = monthMapper[dayjs(events[0].startTime).tz().month()];
+  const eventMonth = monthMapper[moment(events[0].startTime).month()];
 
   const height = '100%';
 

diff --git a/...onents/schedule/components/schedule-column/components/schedule-card/utils/calculateTop.ts b/...onents/schedule/components/schedule-column/components/schedule-card/utils/calculateTop.ts
@@ -1,8 +1,7 @@
-import dayjs from 'dayjs';
-
+import moment from 'moment';
 export const calculateTop = (startTime: string): number => {
   if (startTime) {
-    const date = dayjs(startTime).tz();
+    const date = moment(startTime);
     const minutes = date.hour() * 60 + date.minute() - 7 * 60;
     return (minutes / 60) * 84 + 4;
   }

diff --git a/fictadvisor-web/src/components/pages/schedule-page/utils/getStringTime.ts b/fictadvisor-web/src/components/pages/schedule-page/utils/getStringTime.ts
@@ -1,9 +1,9 @@
 /**
  * @param time - time in ISOString format
  */
-import dayjs from 'dayjs';
+import moment from 'moment';
 
 export const getStringTime = (time: string) => {
-  const date = dayjs(time).tz();
+  const date = moment(time);
   return date.format('HH:mm');
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -262,7 +262,7 @@ export class TeacherService { @@
             mark,
           });
         }
-        return marks;
+        return marks.sort((a, b) => b.amount - a.amount);
       }
       checkQueryDate ({ semester, year }: ResponseQueryDTO) {
@@ Expand Down @@