remove moment (codesandbox#2315)

* remove momemt

* fix dates

* Update packages/app/src/app/pages/common/Modals/SelectSandboxModal/Sandbox/index.js

Co-Authored-By: Michaël De Boey <[email protected]>

Author: 2 people

packages/app/package.json

@@ -207,7 +207,6 @@
     "mobx-react": "^6.1.1",
     "mobx-react-lite": "^1.4.1",
     "mobx-state-tree": "^3.14.0",
-    "moment": "^2.18.1",
     "monaco-editor-textmate": "^2.0.0",
     "monaco-textmate": "^3.0.0",
     "monaco-vue": "^0.2.1",

packages/app/src/app/components/SandboxList/SandboxList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { Link } from 'react-router-dom';
 import FullHeartIcon from 'react-icons/lib/fa/heart';
 import EyeIcon from 'react-icons/lib/fa/eye';
@@ -65,8 +65,8 @@ export const SandboxList: React.FC<ISandboxListProps> = ({
               <Link to={sandboxUrl(s)}>{s.title || s.id}</Link>
               <PrivacyStatus privacy={s.privacy} asIcon />
             </td>
-            <td>{moment(s.insertedAt).format('ll')}</td>
-            <td>{moment(s.updatedAt).format('ll')}</td>
+            <td>{format(s.insertedAt, 'MMM DD, YYYY')}</td>
+            <td>{format(s.updatedAt, 'MMM DD, YYYY')}</td>
             <StatBody>
               <Icon width={30} height={30} />
             </StatBody>

packages/app/src/app/pages/Dashboard/Content/SandboxGrid/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { inject, observer } from 'app/componentConnectors';
 
-import moment from 'moment';
+import { distanceInWordsToNow } from 'date-fns';
 import { uniq } from 'lodash-es';
 import { basename } from 'path';
 import { camelizeKeys } from 'humps';
@@ -270,15 +270,15 @@ class SandboxGrid extends React.Component<*, State> {
 
     const getOrder = () => {
       if (item.removedAt) {
-        return `Deleted ${moment.utc(item.removedAt).fromNow()}`;
+        return `Deleted ${distanceInWordsToNow(item.removedAt)} ago`;
       }
 
       const orderField = this.props.store.dashboard.orderBy.field;
       if (orderField === 'insertedAt') {
-        return `Created ${moment.utc(item.insertedAt).fromNow()}`;
+        return `Created ${distanceInWordsToNow(item.insertedAt)} ago`;
       }
 
-      return `Edited ${moment.utc(item.updatedAt).fromNow()}`;
+      return `Edited ${distanceInWordsToNow(item.updatedAt)} ago`;
     };
 
     let editedSince = getOrder();
@@ -409,15 +409,15 @@ class SandboxGrid extends React.Component<*, State> {
                     label="Last Updated"
                     dataKey="updatedAt"
                     cellDataGetter={({ rowData }) =>
-                      moment.utc(rowData.updatedAt).fromNow()
+                      distanceInWordsToNow(rowData.updatedAt) + ' ago'
                     }
                     width={150}
                   />
                   <Column
                     label="Created"
                     dataKey="insertedAt"
                     cellDataGetter={({ rowData }) =>
-                      moment.utc(rowData.insertedAt).fromNow()
+                      distanceInWordsToNow(rowData.insertedAt) + ' ago'
                     }
                     width={150}
                   />

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/ChangeSubscription/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { inject, hooksObserver } from 'app/componentConnectors';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { LinkButton } from 'app/components/LinkButton';
 
 import { SmallText, Buttons, StyledButton, StripeInput } from './elements';
@@ -84,9 +84,9 @@ function ChangeSubscription({
     <div>
       {buttons}
       <SmallText>
-        You will be billed every <strong>{moment(date).format('Do')}</strong> of
-        the month, you can change or cancel your subscription at any time. You
-        can change your payment method in{' '}
+        You will be billed every <strong>{format(date, 'Do')}</strong> of the
+        month, you can change or cancel your subscription at any time. You can
+        change your payment method in{' '}
         <LinkButton
           onClick={e => {
             e.preventDefault();

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import { format } from 'date-fns';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Relative from '@codesandbox/common/lib/components/Relative';
 import badges from '@codesandbox/common/lib/utils/badges/patron-info';
@@ -91,7 +91,7 @@ const PricingChoice = inject('store', 'signals')(
                 <Notice>
                   You will be billed now and on the{' '}
                   <strong style={{ color: 'white' }}>
-                    {moment().format('Do')}
+                    {format(new Date(), 'Do')}
                   </strong>{' '}
                   of each month thereafter. You can cancel or change your
                   subscription at any time.

packages/app/src/app/pages/common/Modals/SelectSandboxModal/Sandbox/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 
 import { Date, Button } from './elements';
@@ -17,7 +17,7 @@ export default class Sandbox extends React.PureComponent {
           {getSandboxName(sandbox)}
           {active && ' (Selected)'}
         </div>
-        <Date>{moment(sandbox.insertedAt).format('ll')}</Date>
+        <Date>{format(sandbox.insertedAt, 'MMM DD, YYYY')}</Date>
       </Button>
     );
   }

packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import moment from 'moment';
 import { sortBy, isEmpty } from 'lodash-es';
 import filesize from 'filesize';
 import { Button } from '@codesandbox/common/lib/components/Button';
@@ -71,10 +70,10 @@ class FilesList extends Component {
                 `}
               />
               <HeaderTitle>File</HeaderTitle>
-              <HeaderTitle>Created</HeaderTitle>
               <HeaderTitle>Size</HeaderTitle>
               <HeaderTitle />
               <HeaderTitle />
+              <HeaderTitle />
             </tr>
           </thead>
           <Body>
@@ -100,8 +99,6 @@ class FilesList extends Component {
                     {f.name}
                   </a>
                 </td>
-
-                <td>{moment(f.insertedAt).format('ll')}</td>
                 <td>{filesize(f.objectSize)}</td>
                 <StatBody
                   css={`

packages/common/package.json

@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "@sentry/browser": "^5.6.2",
     "@babel/polyfill": "^7.4.4",
     "@codesandbox/notifications": "^1.0.3",
     "@codesandbox/template-icons": "^0.7.0",
+    "@sentry/browser": "^5.6.2",
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
     "codesandbox-api": "^0.0.22",
@@ -39,7 +39,6 @@
     "lodash": "^4.17.11",
     "markty-toml": "^0.0.9",
     "memoize-one": "^3.1.1",
-    "moment": "^2.18.1",
     "ot": "^0.0.15",
     "react": "^16.8.6",
     "react-icons": "^2.2.7",

packages/common/src/components/PatronStar/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import moment from 'moment';
+import { format } from 'date-fns';
 import StarIcon from 'react-icons/lib/go/star';
 import Tooltip from '../Tooltip';
 
@@ -12,9 +12,7 @@ interface PatronStarProps {
 
 export function PatronStar({ subscriptionSince, ...props }: PatronStarProps) {
   return (
-    <Tooltip
-      content={`Patron since ${moment(subscriptionSince).format('MMM Y')}`}
-    >
+    <Tooltip content={`Patron since ${format(subscriptionSince, 'MMM Y')}`}>
       <Container>
         <StarIcon {...props} />
       </Container>

yarn.lock

@@ -15893,10 +15893,9 @@ modularscale@^1.0.2:
   dependencies:
     lodash.isnumber "^3.0.0"
 
-moment@^2.18.1, moment@^2.21.0, moment@^2.6.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+moment@^2.21.0, moment@^2.6.0:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
 
 monaco-editor-textmate@^2.0.0:
   version "2.0.0"