chore: 🤖 user timezone handling (#90)

* chore: 🤖 guess user timezone, modifies dateRelative

* chore: 🤖 chante date parser

* chore: 🤖 remove comments

* chore: 🤖 WIP offset time based in user timezone

* test: 💍 test the data computations

* test: 💍 use past time, not future time computations

packages/dashboard/src/utils/date.test.ts

@@ -0,0 +1,84 @@
+import { dateRelative } from './date';
+
+describe('date', () => {
+  describe('dateRelative', () => {
+    describe('for date 10/12/2021 15h00 (as ISOString)', () => {
+      const timezoneEuropeLondon = 'Europe/London';
+      const timezoneAmericaLosAngels = 'America/Los_Angeles';
+      const timestamp = '2021-12-10T15:00:00.000Z';
+      const timestampMinusEigthHours = '2021-12-10T07:00:00.000Z';
+      const timestampPlusThirtyMinutes = '2021-12-10T15:30:00.000Z';
+      const timestampPlusTwoHours = '2021-12-10T17:00:00.000Z';
+      const getNow = (
+        timestamp: string,
+        timeZone: string,
+      ) => new Date(
+        new Date(timestamp).toLocaleString("en-US", { timeZone }),
+      ).toISOString();
+
+      describe('on timezone Europe/London', () => {
+          it('on checking immediately should describe as few seconds ago', () => {
+            const now = getNow(
+              timestamp,
+              timezoneEuropeLondon,
+            );
+            const humanFriendlyDate = dateRelative(
+              timestamp,
+              now,
+            );
+
+            const expected = 'a few seconds ago';
+
+            expect(humanFriendlyDate).toBe(expected);
+          });
+
+          it('on checking 30m after should be a 30m difference', () => {
+            const now = getNow(
+              timestampPlusThirtyMinutes,
+              timezoneEuropeLondon,
+            );
+            const humanFriendlyDate = dateRelative(
+              timestamp,
+              now,
+            );
+
+            const expected = '30 minutes ago';
+
+            expect(humanFriendlyDate).toBe(expected);
+          });
+      });
+
+      describe('on timezone America/Los Angeles', () => {
+        it('on a timestamp which is 8 hours earlier should show few seconds ago', () => {
+          const now = getNow(
+            timestamp,
+            timezoneAmericaLosAngels,
+          );
+          const humanFriendlyDate = dateRelative(
+            timestampMinusEigthHours,
+            now,
+          );
+
+          const expected = 'a few seconds ago';
+
+          expect(humanFriendlyDate).toBe(expected);
+        });
+
+        it('on 2 hours from source timestamp should be a 2 hours difference', () => {
+          const now = getNow(
+            timestampPlusTwoHours,
+            timezoneAmericaLosAngels,
+          );
+          const humanFriendlyDate = dateRelative(
+            timestampMinusEigthHours,
+            now,
+          );
+
+          const expected = '2 hours ago';
+
+          expect(humanFriendlyDate).toBe(expected);
+        });
+    });
+    });
+  });
+});

packages/dashboard/src/utils/date.ts

@@ -1,10 +1,23 @@
 /* eslint-disable import/prefer-default-export */
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 // Extensions
-[utc, relativeTime, customParseFormat].forEach((plugin) => dayjs.extend(plugin as any));
+[utc, timezone, relativeTime, customParseFormat].forEach((plugin) => dayjs.extend(plugin as any));
 
-export const dateRelative = (timestamp: string) => dayjs.utc(timestamp, 'DD/MM/YYYY').fromNow();
+// Defaults
+dayjs.tz.setDefault("Europe/London");
+
+const USER_TIMEZONE = dayjs.tz.guess();
+
+const NOW = new Date(
+  new Date().toLocaleString("en-US", { timeZone: USER_TIMEZONE })
+).toISOString();
+
+export const dateRelative = (
+  timestamp: string,
+  now: string = NOW,
+) => dayjs.utc(timestamp).from(now);

packages/dashboard/src/utils/transactions.test.ts

@@ -8,7 +8,7 @@ describe('utils/transactions', () => {
       it('should return valid transaction time (large number)', () => {
         const time = 1600000000000n;
         const result = toTransactionTime(time);
-        const expected = '13/09/2020';
+        const expected = '2020-09-13T12:26:40.000Z';
         expect(result).toBe(expected);
       })
     });

packages/dashboard/src/utils/transactions.ts

@@ -28,10 +28,7 @@ export const toTransactionTime = (time: bigint) => {
     return;
   };
 
-  const dateChunks = ISOString.split('T')[0].split('-');
-  const formated = `${dateChunks[2]}/${dateChunks[1]}/${dateChunks[0]}`;
-
-  return formated;
+  return ISOString;
 }
 
 type TransactionDetails = {