Merge pull request #825 from L4Ph/moment-to-date-fns

Migrate Moment to date-fns
remap-keys · May 28, 2024 · c526dda · c526dda
2 parents 050460b + 608e8ac
commit c526dda
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -10,17 +10,15 @@
     "@mui/material": "^5.2.8",
     "@mui/styles": "^5.2.3",
     "@pdf-lib/fontkit": "^1.1.1",
-    "@types/moment": "^2.13.0",
     "@types/react-helmet-async": "^1.0.3",
     "@types/react-image-gallery": "^1.0.4",
     "ajv": "^7.0.3",
     "axios": "^0.21.1",
+    "date-fns": "^3.6.0",
     "downloadjs": "^1.4.7",
     "firebase": "^8.2.1",
     "immer": "^8.0.0",
     "intel-hex": "^0.1.2",
-    "moment": "^2.29.1",
-    "moment-timezone": "^0.5.32",
     "notistack": "^2.0.3",
     "pdf-lib": "^1.16.0",
     "prop-types": "^15.7.2",

diff --git a/src/components/catalog/keyboard/build/FirmwareBuildingTaskCard.tsx b/src/components/catalog/keyboard/build/FirmwareBuildingTaskCard.tsx
@@ -28,7 +28,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import moment from 'moment/moment';
+import { format } from 'date-fns';
 
 type ParameterNameValueMap = {
   [parameterName: string]: string;
@@ -260,12 +260,10 @@ export function FirmwareBuildingTaskCard(props: FirmwareBuildingTaskCardProps) {
         >
           <Typography variant="subtitle1">Task ID: {props.task.id}</Typography>
           <Typography variant="subtitle1">
-            Created at:{' '}
-            {moment(props.task.createdAt).format('YYYY-MM-DD hh:mm:ss')}
+            Created at: {format(props.task.createdAt, 'yyyy-MM-dd hh:mm:ss')}
           </Typography>
           <Typography variant="subtitle1">
-            Updated at:{' '}
-            {moment(props.task.updatedAt).format('YYYY-MM-DD hh:mm:ss')}
+            Updated at: {format(props.task.updatedAt, 'yyyy-MM-dd hh:mm:ss')}
           </Typography>
         </Box>
         <Stepper

diff --git a/src/components/catalog/keyboard/firmware/CatalogFirmware.tsx b/src/components/catalog/keyboard/firmware/CatalogFirmware.tsx
@@ -15,10 +15,10 @@ import {
   IFirmware,
   IKeyboardDefinitionDocument,
 } from '../../../../services/storage/Storage';
-import moment from 'moment';
 import { sendEventToGoogleAnalytics } from '../../../../utils/GoogleAnalytics';
 import { ICatalogPhase } from '../../../../store/state';
 import { hexadecimal } from '../../../../utils/StringUtils';
+import { format } from 'date-fns';
 
 type CatalogFirmwareState = {
   supportedBrowser: boolean;
@@ -182,8 +182,8 @@ function FirmwareCard(props: IFirmwareCardProps) {
             color="textSecondary"
             className="catalog-firmware-card-caption"
           >
-            {moment(props.firmware.created_at).format('MMMM Do YYYY, HH:mm:ss')}{' '}
-            | SHA256: {props.firmware.hash}
+            {format(props.firmware.created_at, 'MMMM do yyyy, HH:mm:ss')} |
+            SHA256: {props.firmware.hash}
           </Typography>
         </CardContent>
         <CardActions className="catalog-firmware-card-buttons">

diff --git a/src/components/common/footer/Footer.tsx b/src/components/common/footer/Footer.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { FooterActionsType, FooterStateType } from './Footer.container';
 import './Footer.scss';
-import moment from 'moment-timezone';
 import PaidIcon from '@mui/icons-material/Paid';
+import { format } from 'date-fns';
 
 type FooterState = {};
 
@@ -24,7 +24,7 @@ export default class Footer extends React.Component<
         <div className="footer-dev-team">
           ©{' '}
           <span className="footer-dev-team-years">
-            2020-{moment().format('YYYY')}
+            2020-{format(new Date(), 'yyyy')}
           </span>
           <a
             href="https://github.com/remap-keys"

diff --git a/src/components/keyboards/definitionlist/DefinitionList.tsx b/src/components/keyboards/definitionlist/DefinitionList.tsx
@@ -11,7 +11,7 @@ import {
   KeyboardDefinitionStatus,
 } from '../../../services/storage/Storage';
 import { hexadecimal } from '../../../utils/StringUtils';
-import moment from 'moment-timezone';
+import { format } from 'date-fns';
 
 type KeyboardListState = {};
 type OwnProps = {};
@@ -133,17 +133,13 @@ class KeyboardRow extends React.Component<KeyboardProps, any> {
                   <span className="definition-meta-info-label">
                     Created at:
                   </span>
-                  {moment(this.props.doc.createdAt).format(
-                    'YYYY-MM-DD HH:mm:ss'
-                  )}
+                  {format(this.props.doc.createdAt, 'yyyy-MM-dd HH:mm:ss')}
                 </div>
                 <div className="definition-meta-info">
                   <span className="definition-meta-info-label">
                     Updated at:{' '}
                   </span>
-                  {moment(this.props.doc.updatedAt).format(
-                    'YYYY-MM-DD HH:mm:ss'
-                  )}
+                  {format(this.props.doc.updatedAt, 'yyyy-MM-dd HH:mm:ss')}
                 </div>
               </div>
             </div>

diff --git a/src/components/keyboards/editdefinition/EditDefinition.tsx b/src/components/keyboards/editdefinition/EditDefinition.tsx
@@ -29,7 +29,6 @@ import {
 } from '../../../services/storage/Storage';
 import { KeyboardDefinitionSchema } from '../../../gen/types/KeyboardDefinition';
 import { Alert } from '@mui/material';
-import moment from 'moment-timezone';
 import { MoreVert } from '@mui/icons-material';
 import {
   isForkedQmkFirmwareCode,
@@ -41,6 +40,7 @@ import CatalogForm from './catalogform/CatalogForm.container';
 import FirmwareForm from './firmwareform/FirmwareForm.container';
 import BuildForm from './buildform/BuildForm.container';
 import Statistics from './statistics/Statistics.container';
+import { format } from 'date-fns';
 
 type ConfirmDialogMode =
   | 'save_as_draft'
@@ -473,8 +473,9 @@ type AlertMessageProps = {
 };
 
 function AlertMessage(props: AlertMessageProps) {
-  const updatedAt = moment(props.definitionDocument.updatedAt).format(
-    'YYYY-MM-DD HH:mm:ss'
+  const updatedAt = format(
+    props.definitionDocument.updatedAt,
+    'yyyy-MM-dd HH:mm:ss'
   );
   if (props.definitionDocument.status === KeyboardDefinitionStatus.in_review) {
     return (

diff --git a/src/components/keyboards/editdefinition/firmwareform/FirmwareForm.tsx b/src/components/keyboards/editdefinition/firmwareform/FirmwareForm.tsx
@@ -21,9 +21,9 @@ import {
   Typography,
 } from '@mui/material';
 import { IFirmware } from '../../../../services/storage/Storage';
-import moment from 'moment';
 import { IBootloaderType } from '../../../../services/firmware/Types';
 import ConfirmDialog from '../../../common/confirm/ConfirmDialog';
+import { format } from 'date-fns';
 
 type OwnProps = {};
 type FirmwareFormProps = OwnProps &
@@ -382,8 +382,7 @@ function FirmwareCard(props: IFirmwareCardProps) {
             {props.firmware.description}
           </Typography>
           <Typography variant="caption" color="textSecondary">
-            {moment(props.firmware.created_at).format('MMMM Do YYYY, HH:mm:ss')}{' '}
-            <br />
+            {format(props.firmware.created_at, 'MMMM do yyyy, HH:mm:ss')} <br />
             SHA256: {props.firmware.hash}
             <br />
             Flash Support: {props.firmware.flash_support ? 'Yes' : 'No'}

diff --git a/src/components/organizations/organizationlist/OrganizationList.tsx b/src/components/organizations/organizationlist/OrganizationList.tsx
@@ -5,8 +5,8 @@ import {
   OrganizationListStateType,
 } from './OrganizationList.container';
 import { Button, Card, CardContent, Link } from '@mui/material';
-import moment from 'moment-timezone';
 import { IOrganization } from '../../../services/storage/Storage';
+import { format } from 'date-fns';
 
 type OrganizationListState = {};
 type OwnProps = {};
@@ -60,6 +60,13 @@ type OrganizationProps = {
 
 class OrganizationRow extends React.Component<OrganizationProps, any> {
   render() {
+    const createdAt = this.props.organization.created_at
+      ? format(this.props.organization.created_at, 'yyyy-MM-dd HH:mm:ss')
+      : 'N/A';
+    const updatedAt = this.props.organization.updated_at
+      ? format(this.props.organization.updated_at, 'yyyy-MM-dd HH:mm:ss')
+      : 'N/A';
+
     return (
       <Card>
         <CardContent>
@@ -83,17 +90,13 @@ class OrganizationRow extends React.Component<OrganizationProps, any> {
                   <span className="organization-meta-info-label">
                     Created at:
                   </span>
-                  {moment(this.props.organization.created_at).format(
-                    'YYYY-MM-DD HH:mm:ss'
-                  )}
+                  {createdAt}
                 </div>
                 <div className="organization-meta-info">
                   <span className="organization-meta-info-label">
                     Updated at:{' '}
                   </span>
-                  {moment(this.props.organization.updated_at).format(
-                    'YYYY-MM-DD HH:mm:ss'
-                  )}
+                  {updatedAt}
                 </div>
               </div>
             </div>

diff --git a/yarn.lock b/yarn.lock
@@ -5047,15 +5047,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/moment@npm:^2.13.0":
-  version: 2.13.0
-  resolution: "@types/moment@npm:2.13.0"
-  dependencies:
-    moment: "npm:*"
-  checksum: 10c0/b9b668ca4b2584daaa03523a28dd26d542fa4da3de3e976242bbd1568dfc01736142118143a69ed26f62de1b49936ab346579a2ce3979410a1bab229d644cccb
-  languageName: node
-  linkType: hard
-
 "@types/node-fetch@npm:^2.5.7":
   version: 2.6.1
   resolution: "@types/node-fetch@npm:2.6.1"
@@ -5772,7 +5763,6 @@ __metadata:
     "@types/downloadjs": "npm:^1.4.2"
     "@types/jest": "npm:^26.0.15"
     "@types/lodash": "npm:^4.14.167"
-    "@types/moment": "npm:^2.13.0"
     "@types/node": "npm:^14.14.22"
     "@types/prop-types": "npm:^15.7.4"
     "@types/qs": "npm:^6.9.6"
@@ -5792,6 +5782,7 @@ __metadata:
     ajv: "npm:^7.0.3"
     axios: "npm:^0.21.1"
     babel-eslint: "npm:^10.1.0"
+    date-fns: "npm:^3.6.0"
     downloadjs: "npm:^1.4.7"
     eslint-config-prettier: "npm:^7.0.0"
     eslint-plugin-prettier: "npm:^5.1.3"
@@ -5802,8 +5793,6 @@ __metadata:
     intel-hex: "npm:^0.1.2"
     json-schema-to-typescript: "npm:^10.1.2"
     lint-staged: "npm:^10.5.3"
-    moment: "npm:^2.29.1"
-    moment-timezone: "npm:^0.5.32"
     notistack: "npm:^2.0.3"
     pdf-lib: "npm:^1.16.0"
     prettier: "npm:^3.2.5"
@@ -8784,6 +8773,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "date-fns@npm:3.6.0"
+  checksum: 10c0/0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6
+  languageName: node
+  linkType: hard
+
 "debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -14914,22 +14910,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"moment-timezone@npm:^0.5.32":
-  version: 0.5.34
-  resolution: "moment-timezone@npm:0.5.34"
-  dependencies:
-    moment: "npm:>= 2.9.0"
-  checksum: 10c0/26b2dc80648004ee29fdcf819d4aa153fadf71eb061a90386cf738214e388009ec189b9da39e7320ff81dd0d213c0b1958c15d69cdb660982246daf7d225a1d5
-  languageName: node
-  linkType: hard
-
-"moment@npm:*, moment@npm:>= 2.9.0, moment@npm:^2.29.1":
-  version: 2.29.1
-  resolution: "moment@npm:2.29.1"
-  checksum: 10c0/2617e383c0e0f910696214d026b9742173ea1916775d2023b39fd7d5fc3fae694f67c17876d154e246b139ad2a8028c42b2898c66cd665316b61c18453a5103f
-  languageName: node
-  linkType: hard
-
 "move-concurrently@npm:^1.0.1":
   version: 1.0.1
   resolution: "move-concurrently@npm:1.0.1"