show right time zone (codesandbox#2590)

* parse utc time

* add dependencies to package

* use api v2 date-fns

* skipLibCheck

Author: yeion7

packages/app/package.json

@@ -104,6 +104,8 @@
     "console": "^0.7.2",
     "console-feed": "CompuIves/console-feed#build2",
     "css-modules-loader-core": "^1.1.0",
+    "date-fns": "^2.4.1",
+    "date-fns-tz": "^1.0.7",
     "debug": "^2.6.8",
     "downshift": "^1.0.0-rc.14",
     "eslint-plugin-react-hooks": "1.6.0",

packages/app/src/app/pages/Curator/index.js

@@ -1,8 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import getTime from 'date-fns/get_time';
-import subMonths from 'date-fns/sub_months';
-import subWeeks from 'date-fns/sub_weeks';
-import format from 'date-fns/format';
+import { getTime, subMonths, subWeeks, format } from 'date-fns';
 import DayPicker from 'react-day-picker';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
@@ -94,7 +91,9 @@ const Curator = inject('store', 'signals')(
                 Last 6 Months
               </Button>
               <Button onClick={() => setShowPicker(show => !show)} small>
-                {selectedDate ? format(selectedDate, 'DD/MM/YYYY') : 'Custom'}
+                {selectedDate
+                  ? format(new Date(selectedDate), 'dd/MM/yyyy')
+                  : 'Custom'}
               </Button>
               {showPicker ? (
                 <PickerWrapper>

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { inject, observer } from 'app/componentConnectors';
 
-import { distanceInWordsToNow } from 'date-fns';
+import { formatDistanceToNow } from 'date-fns';
+import { zonedTimeToUtc } from 'date-fns-tz';
 import { uniq } from 'lodash-es';
 import { basename } from 'path';
 import { camelizeKeys } from 'humps';
@@ -45,6 +46,8 @@ const BASE_HEIGHT = 242;
 const IS_TABLE = false;
 
 const diff = (a, b) => (a > b ? a - b : b - a);
+const distanceInWordsToNow = date =>
+  formatDistanceToNow(zonedTimeToUtc(date, 'Etc/UTC'));
 
 class SandboxGridComponent extends React.Component<*, State> {
   state = {

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

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

packages/app/tsconfig.check.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "exclude": ["codesandbox-browserfs/*"],
   "compilerOptions": {
-    "allowJs": false
+    "allowJs": false,
+    "skipLibCheck": true
   }
 }

yarn.lock

@@ -8982,6 +8982,11 @@ data-urls@^1.0.0, data-urls@^1.0.1:
     whatwg-mimetype "^2.1.0"
     whatwg-url "^7.0.0"
 
+date-fns-tz@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.0.7.tgz#1c80f7592cca5da4fd2085132936dcc7fa9afecd"
+  integrity sha512-oNfi/3IxRfmysRIT+QJMbO/44Uj10nApAYJvlayTmNRFZG+JqdOJYXm1DWU65DNlG/ySbuQwpFkGIa3b2XFUVw==
+
 [email protected], date-fns@^1.23.0, date-fns@^1.27.2, date-fns@^1.30.1:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
@@ -8992,6 +8997,11 @@ date-fns@^2.0.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0.tgz#52f05c6ae1fe0e395670082c72b690ab781682d0"
   integrity sha512-nGZDA64Ktq5uTWV4LEH3qX+foV4AguT5qxwRlJDzJtf57d4xLNwtwrfb7SzKCoikoae8Bvxf0zdaEG/xWssp/w==
 
+date-fns@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.4.1.tgz#b53f9bb65ae6bd9239437035710e01cf383b625e"
+  integrity sha512-2RhmH/sjDSCYW2F3ZQxOUx/I7PvzXpi89aQL2d3OAxSTwLx6NilATeUbe0menFE3Lu5lFkOFci36ivimwYHHxw==
+
 date-format@^0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-0.0.0.tgz#09206863ab070eb459acea5542cbd856b11966b3"