[refactor] Replace moment with dayjs

agentlab · Aug 16, 2024 · eb0e390 · eb0e390
1 parent 2355d2b
commit eb0e390
Show file tree

Hide file tree

Showing 28 changed files with 147 additions and 122 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,9 +1,30 @@
 import React from 'react';
 
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import LocaleData from 'dayjs/plugin/localeData';
+import RelativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ru';
+
 import { ConfigProvider, theme } from 'antd';
 import ruRu from 'antd/es/locale/ru_RU';
 
+dayjs.extend(LocalizedFormat); // for longDateFormat
+dayjs.extend(LocaleData); // for localeData()
+dayjs.extend(RelativeTime); // for fromNow()
+
+dayjs.locale('ru');
+
+// for dayjs.defaultFormat
+// see https://stackoverflow.com/questions/72681674/how-to-set-the-default-format-in-dayjs
+const defaultFormat = 'LLL';
+dayjs.extend((option, dayjsClass, dayjsFactory) => {
+  const oldFormat = dayjsClass.prototype.format;
+
+  dayjsClass.prototype.format = function (formatString) {
+    return oldFormat.bind(this)(formatString ?? defaultFormat);
+  };
+});
 
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
@@ -34,6 +55,4 @@ export const decorators = [
   ),
 ];
 
-moment.locale('ru');
-moment.defaultFormat = 'LLL';
 export const tags = ['autodocs'];
diff --git a/package.json b/package.json
@@ -64,7 +64,6 @@
     "mobx": ">=6.13.1",
     "mobx-react-lite": ">=4.0.7",
     "mobx-state-tree": ">=6.0.1",
-    "moment": ">=2.30.1",
     "rc-util": ">=5.43.0",
     "react": ">=18.3.1",
     "react-base-table": ">=1.13.0",
@@ -98,7 +97,6 @@
     "antd": "^5.20.1",
     "history": "^5.3.0",
     "mobx-react-lite": "^4.0.7",
-    "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-base-table": "^1.13.0",
     "react-dnd": "13.1.1",

diff --git a/src/antd-controls/AntdInputDate.tsx b/src/antd-controls/AntdInputDate.tsx
@@ -7,20 +7,21 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import moment, { Moment } from 'moment';
+import dayjs, { Dayjs } from 'dayjs';
 import React, { useState, useEffect } from 'react';
 import { DatePicker } from 'antd';
 
-export interface DateControl {
-  momentLocale?: Moment;
-}
+/*export interface DateControl {
+  dateLocale?: Dayjs;
+}*/
 export const AntdInputDate: React.FC<any> = (props) => {
   const { data, enabled, handleChange, editing, inputRef } = props;
   const localeDateTimeFormat = 'L';
   const [currentData, setCurrentData] = useState(data);
-  const onChange = (datetime: any) => {
-    setCurrentData(datetime ? moment(datetime).format(localeDateTimeFormat) : '');
-    handleChange(datetime ? moment(datetime).format(localeDateTimeFormat) : '');
+  const onChange = (date: Dayjs) => {
+    const dateNonNullStr = date ? date.format(localeDateTimeFormat) : '';
+    setCurrentData(dateNonNullStr);
+    handleChange(dateNonNullStr);
   };
   useEffect(() => {
     if (!editing) {
@@ -31,7 +32,7 @@ export const AntdInputDate: React.FC<any> = (props) => {
     <DatePicker
       // id={id + '-input'}
       ref={inputRef}
-      value={moment(currentData) || null}
+      value={dayjs(currentData) || null}
       onChange={onChange}
       format={localeDateTimeFormat}
       disabled={!enabled}

diff --git a/src/antd-controls/AntdInputTime.tsx b/src/antd-controls/AntdInputTime.tsx
@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import moment from 'moment';
+import dayjs, { Dayjs } from 'dayjs';
 import React from 'react';
 import { TimePicker } from 'antd';
 
@@ -18,7 +18,7 @@ export const AntdInputTime = React.memo((props: any /*CellProps & WithClassname*
   return (
     <TimePicker
       value={data || ''}
-      onChange={(time, timeString) => handleChange(path, moment(timeString).format('LTS'))}
+      onChange={(time: Dayjs) => handleChange(path, time ? time.format('LTS') : '')}
       className={className}
       disabled={!enabled}
     />

diff --git a/src/controls/AntdDateControl.tsx b/src/controls/AntdDateControl.tsx
@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import moment, { Moment } from 'moment';
+import dayjs, { Dayjs } from 'dayjs';
 import React, { useState, useEffect } from 'react';
 import { DatePicker, Col, Row } from 'antd';
 
@@ -17,12 +17,12 @@ import { ControlComponent } from '../Form';
 import { withStoreToControlProps } from '../util/ContextToProps';
 
 export interface DateControlProps {
-  momentLocale?: Moment;
+  dateLocale?: Dayjs;
 }
 export const AntdDateControl: React.FC<ControlComponent & DateControlProps> = (props) => {
-  const { id, label, editing, enabled, required, handleChange, data, momentLocale, uiOptions = {} } = props;
+  const { id, label, editing, enabled, required, handleChange, data, dateLocale, uiOptions = {} } = props;
   const defaultLabel = label as string;
-  const localeDateTimeFormat = momentLocale ? `${momentLocale.localeData().longDateFormat('L')}` : 'YYYY-MM-DD';
+  const localeDateTimeFormat = dateLocale ? `${(dateLocale as any).localeData().longDateFormat('L')}` : 'YYYY-MM-DD';
   const [currentData, setCurrentData] = useState(data);
 
   let labelText;
@@ -32,9 +32,10 @@ export const AntdDateControl: React.FC<ControlComponent & DateControlProps> = (p
   } else {
     labelText = defaultLabel;
   }
-  const onChange = (datetime: any) => {
-    setCurrentData(datetime ? moment(datetime).format(localeDateTimeFormat) : 'YYYY-MM-DD');
-    handleChange(datetime ? moment(datetime).format(localeDateTimeFormat) : 'YYYY-MM-DD');
+  const onChange = (date: Dayjs) => {
+    const dateNonNullStr = date ? date.format(localeDateTimeFormat) : 'YYYY-MM-DD';
+    setCurrentData(dateNonNullStr);
+    handleChange(dateNonNullStr);
   };
   useEffect(() => {
     if (!editing) {
@@ -51,7 +52,7 @@ export const AntdDateControl: React.FC<ControlComponent & DateControlProps> = (p
       <Col span={16}>
         <DatePicker
           // id={id + '-input'}
-          value={moment(currentData) || null}
+          value={dayjs(currentData) || null}
           onChange={onChange}
           format={localeDateTimeFormat}
           disabled={!enabled}

diff --git a/src/controls/AntdDateTimeControl.tsx b/src/controls/AntdDateTimeControl.tsx
@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import moment, { Moment } from 'moment';
+import dayjs, { Dayjs } from 'dayjs';
 import React, { useState, useEffect } from 'react';
 import { DatePicker, Col, Row } from 'antd';
 
@@ -17,13 +17,15 @@ import { ControlComponent } from '../Form';
 import { withStoreToControlProps } from '../util/ContextToProps';
 
 export interface DateTimeControlProps {
-  momentLocale?: Moment;
+  dateLocale?: Dayjs;
 }
 
 export const AntdDateTimeControl: React.FC<ControlComponent & DateTimeControlProps> = (props) => {
-  const { id, label, editing, enabled, required, handleChange, data, momentLocale, uiOptions = {} } = props;
+  const { id, label, editing, enabled, required, handleChange, data, dateLocale, uiOptions = {} } = props;
   const defaultLabel = label as string;
-  const localeDateTimeFormat = momentLocale ? `${momentLocale.localeData().longDateFormat('L')}` : 'YYYY-MM-DD h:mm a';
+  const localeDateTimeFormat = dateLocale
+    ? `${(dateLocale as any).localeData().longDateFormat('L')}`
+    : 'YYYY-MM-DD h:mm a';
   const [currentData, setCurrentData] = useState(data);
 
   let labelText;
@@ -33,9 +35,10 @@ export const AntdDateTimeControl: React.FC<ControlComponent & DateTimeControlPro
   } else {
     labelText = defaultLabel;
   }
-  const onChange = (datetime: any) => {
-    setCurrentData(datetime ? moment(datetime).format(localeDateTimeFormat) : 'YYYY-MM-DD h:mm a');
-    handleChange(datetime ? moment(datetime).format(localeDateTimeFormat) : 'YYYY-MM-DD h:mm a');
+  const onChange = (datetime: Dayjs) => {
+    const datetimeNonNullStr = datetime ? datetime.format(localeDateTimeFormat) : 'YYYY-MM-DD h:mm a';
+    setCurrentData(datetimeNonNullStr);
+    handleChange(datetimeNonNullStr);
   };
   useEffect(() => {
     if (!editing) {
@@ -52,7 +55,7 @@ export const AntdDateTimeControl: React.FC<ControlComponent & DateTimeControlPro
       <Col span={16}>
         <DatePicker
           // id={id + '-input'}
-          value={moment(currentData) || null}
+          value={dayjs(currentData) || null}
           onChange={onChange}
           format={localeDateTimeFormat}
           disabled={!enabled}

diff --git a/src/controls/query/Filter.tsx b/src/controls/query/Filter.tsx
@@ -1,10 +1,10 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { Row, Col, Select, Typography } from 'antd';
-import { FilterType, Relation, ValueOfFilter } from './type';
-import { JSONSchema6DefinitionForRdfProperty, JsObject } from '@agentlab/sparql-jsld-client';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { JSONSchema6, JSONSchema6Definition } from 'json-schema';
+import { JSONSchema6DefinitionForRdfProperty, JsObject } from '@agentlab/sparql-jsld-client';
+import { Row, Col, Select, Typography } from 'antd';
 
+import { FilterType, Relation, ValueOfFilter } from './type';
 import { BodyOfListFilter } from './filtersBody/BodyOfListFilter';
 import { BodyOfIntegerFilter, equalTypesOfRelations } from './filtersBody/BodyOfIntegerFilter';
 import { BodyOfDateTimeFilter } from './filtersBody/BodyOfDateTimeFilter';
@@ -166,12 +166,12 @@ export const Filter: FunctionComponent<FilterProp> = ({
     if (typeOfFilter.type === 'date-time') {
       if (equalTypesOfRelations(typeOfCurrentRelation, 'twoDate')) {
         defaultValue = {
-          value: [moment().subtract(1, 'days'), moment()],
+          value: [dayjs().subtract(1, 'days'), dayjs()],
           valueName: [localeRus.fromYesterdayToToday],
         };
       } else {
         defaultValue = {
-          value: [moment()],
+          value: [dayjs()],
           valueName: [localeRus.today],
         };
       }
@@ -185,7 +185,7 @@ export const Filter: FunctionComponent<FilterProp> = ({
         defaultValue.valueName = prevFilter.valueName || [];
 
         if (typeOfFilter.type === 'date-time') {
-          defaultValue.value = prevFilter.value.map((value) => moment(value, 'YYYY-MM-DDThh:mm:ss'));
+          defaultValue.value = prevFilter.value.map((value) => dayjs(value, 'YYYY-MM-DDThh:mm:ss'));
         }
       }
     }

diff --git a/src/controls/query/filtersBody/BodyOfDateTimeFilter.tsx b/src/controls/query/filtersBody/BodyOfDateTimeFilter.tsx
@@ -1,7 +1,8 @@
+import dayjs, { Dayjs } from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { DatePicker, Select, Radio, InputNumber } from 'antd';
-import moment, { Moment } from 'moment';
 import { RadioChangeEvent } from 'antd/es/radio';
+
 import { ValueOfFilter } from '../type';
 
 const localeRus = {
@@ -29,19 +30,18 @@ export const BodyOfDateTimeFilter: React.FC<BodyOfDateTimeFilterProps> = ({ hand
   useEffect(() => {
     let newValue: any = {};
     if (firstValueInThreeVariant && secondValueInThreeVariant) {
-      let timeOption: moment.unitOfTime.DurationConstructor = 'days';
+      let timeOption: dayjs.ManipulateType = 'days';
       if (secondValueInThreeVariant.localeCompare(timeValue[0]) === 0) {
         timeOption = 'days';
       } else if (secondValueInThreeVariant.localeCompare(timeValue[1]) === 0) {
         timeOption = 'months';
       } else if (secondValueInThreeVariant.localeCompare(timeValue[2]) === 0) {
         timeOption = 'years';
       }
-      const date = moment().subtract(firstValueInThreeVariant, timeOption);
-      const foundDate = date.format('YYYY-MM-DD');
+      const foundDate = dayjs().subtract(parseInt(firstValueInThreeVariant), timeOption).format('YYYY-MM-DD');
       newValue = {
         value: [`${foundDate}T00:00:00`],
-        valueName: [moment(foundDate, 'YYYY-MM-DD').fromNow()],
+        valueName: [(dayjs(foundDate, 'YYYY-MM-DD') as any).fromNow()],
       };
     } else {
       newValue = { value: [], valueName: [] };
@@ -54,29 +54,25 @@ export const BodyOfDateTimeFilter: React.FC<BodyOfDateTimeFilterProps> = ({ hand
     const { value } = e.target;
     setCheckedOption(value);
     if (value === 1) {
-      const date = moment();
-      const today = `${date.format('YYYY-MM-DD')}T00:00:00`;
+      const today = `${dayjs().format('YYYY-MM-DD')}T00:00:00`;
       handleChange({ value: [today], valueName: [localeRus.today] });
     } else if (value === 2) {
-      const date = moment().subtract(1, 'days');
-      const yesterday = `${date.format('YYYY-MM-DD')}T00:00:00`;
+      const yesterday = `${dayjs().subtract(1, 'days').format('YYYY-MM-DD')}T00:00:00`;
       handleChange({ value: [yesterday], valueName: [localeRus.yesterday] });
     } else if (value === 3) {
       if (firstValueInThreeVariant && secondValueInThreeVariant) {
-        let timeOption: moment.unitOfTime.DurationConstructor = 'days';
+        let timeOption: dayjs.ManipulateType = 'days';
         if (secondValueInThreeVariant.localeCompare(timeValue[0]) === 0) {
           timeOption = 'days';
         } else if (secondValueInThreeVariant.localeCompare(timeValue[1]) === 0) {
           timeOption = 'months';
         } else if (secondValueInThreeVariant.localeCompare(timeValue[2]) === 0) {
           timeOption = 'years';
         }
-        const date = moment().subtract(firstValueInThreeVariant, timeOption);
-        const foundDate = date.format('YYYY-MM-DD');
-
+        const foundDate = dayjs().subtract(parseInt(firstValueInThreeVariant), timeOption).format('YYYY-MM-DD');
         handleChange({
           value: [`${foundDate}T00:00:00`],
-          valueName: [moment(foundDate, 'YYYY-MM-DD').fromNow()],
+          valueName: [(dayjs(foundDate, 'YYYY-MM-DD') as any).fromNow()],
         });
       } else {
         handleChange({ value: [], valueName: [] });
@@ -90,12 +86,17 @@ export const BodyOfDateTimeFilter: React.FC<BodyOfDateTimeFilterProps> = ({ hand
     return (
       <DatePicker
         showTime
-        defaultValue={defaultValues.value[0] as Moment}
-        format={moment.defaultFormat}
+        defaultValue={defaultValues.value[0] as Dayjs}
+        format={(dayjs as any).defaultFormat}
         style={{ marginTop: 25 }}
         onChange={(date, dateString) => {
           handleChange({
-            value: dateString === '' ? [] : [moment(dateString, moment.defaultFormat).format('YYYY-MM-DDThh:mm:ss')],
+            value:
+              dateString === ''
+                ? []
+                : Array.isArray(dateString)
+                  ? []
+                  : [dayjs(dateString, (dayjs as any).defaultFormat).format('YYYY-MM-DDThh:mm:ss')],
             valueName: [dateString],
           });
         }}
@@ -149,12 +150,16 @@ export const BodyOfDateTimeFilter: React.FC<BodyOfDateTimeFilterProps> = ({ hand
               <DatePicker
                 showTime
                 style={{ marginLeft: 10 }}
-                defaultValue={defaultValues.value[0] as Moment}
-                format={moment.defaultFormat}
+                defaultValue={defaultValues.value[0] as Dayjs}
+                format={(dayjs as any).defaultFormat}
                 onChange={(date, dateString) => {
                   handleChange({
                     value:
-                      dateString === '' ? [] : [moment(dateString, moment.defaultFormat).format('YYYY-MM-DDThh:mm:ss')],
+                      dateString === ''
+                        ? []
+                        : Array.isArray(dateString)
+                          ? []
+                          : [dayjs(dateString, (dayjs as any).defaultFormat).format('YYYY-MM-DDThh:mm:ss')],
                     valueName: [],
                   });
                 }}
@@ -170,14 +175,16 @@ export const BodyOfDateTimeFilter: React.FC<BodyOfDateTimeFilterProps> = ({ hand
       <DatePicker.RangePicker
         showTime
         style={{ marginTop: 25 }}
-        defaultValue={defaultValues.value as [Moment, Moment]}
-        format={moment.defaultFormat}
+        defaultValue={defaultValues.value as [Dayjs, Dayjs]}
+        format={(dayjs as any).defaultFormat}
         onChange={(date, dateString) => {
           handleChange({
             value:
               dateString[0] === '' || dateString[1] === ''
                 ? []
-                : dateString.map((rangeDate) => moment(rangeDate, moment.defaultFormat).format('YYYY-MM-DDThh:mm:ss')),
+                : dateString.map((rangeDate) =>
+                    dayjs(rangeDate, (dayjs as any).defaultFormat).format('YYYY-MM-DDThh:mm:ss'),
+                  ),
             valueName: [],
           });
         }}

diff --git a/src/formatters/baseFormatters.tsx b/src/formatters/baseFormatters.tsx
@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Image } from 'antd';
@@ -76,7 +76,7 @@ export const artifactTitle = ({ value, type }: any): JSX.Element => {
   );
 };
 
-export const dateTime = ({ value }: any): JSX.Element => <span>{moment(value).format('DD.MM.YYYY')}</span>;
+export const dateTime = ({ value }: any): JSX.Element => <span>{dayjs(value).format('DD.MM.YYYY')}</span>;
 
 export const link = ({ value, link, options }: any): JSX.Element => {
   const label = options.label || value || link;