Resolve #95: Added date format modes exact/relative (#96)

* Added dir .idea to .gitignore

* Resolve #95: Added date format modes exact/relative

.gitignore

@@ -19,6 +19,7 @@
 
 # misc
 .DS_Store
+.idea
 .env.local
 .env.development
 .env.development.local

src/components/appHeader/ConfigureButton.tsx

@@ -8,6 +8,8 @@ import {
   themeType,
 } from "src/hooks/themeSwitcherHook";
 
+import { DateFormat, setDateFormatMode, useDateFormatMode } from "src/hooks/dateFormatSwitcherHook";
+
 import {
   useCurrency,
   setCurrency,
@@ -17,6 +19,7 @@ import {
 export function ConfigureButton() {
   const theme = useThemeMode();
   const currency = useCurrency();
+  const dateFormat = useDateFormatMode();
 
   return (
     <DropButton
@@ -61,6 +64,21 @@ export function ConfigureButton() {
             ]}
             onChange={setCurrency}
           />
+          <Text
+            size="small"
+            weight="bold"
+            margin={{ bottom: "xsmall", top: "small" }}
+          >
+            Date Format
+          </Text>
+          <ToggleButton
+            value={dateFormat}
+            options={[
+              { text: "Exact", value: DateFormat.EXACT },
+              { text: "Relative", value: DateFormat.RELATIVE },
+            ]}
+            onChange={setDateFormatMode}
+          />
         </Box>
       }
     />
@@ -71,7 +89,7 @@ interface ToggleProps {
   value: string;
   options: Array<{
     text: string;
-    value: themeType | currencyType;
+    value: themeType | currencyType | DateFormat;
   }>;
   onChange: (value: any) => void;
 }

src/components/tables/TransactionsTable.tsx

@@ -7,7 +7,7 @@ import { FormNextLink } from "grommet-icons";
 import {
   Address,
   formatNumber,
-  RelativeTimer,
+  DateTime,
   PaginationNavigator,
   PaginationRecordsPerPage,
   ONEValue,
@@ -131,14 +131,7 @@ function getColumns(props: any) {
       ),
       render: (data: RPCTransactionHarmony) => (
         <Box direction="row" gap="xsmall" justify="end">
-          {/*<Text size="small">*/}
-          {/*  {dayjs(data.timestamp).format("YYYY-MM-DD, HH:mm:ss")},*/}
-          {/*</Text>*/}
-          <RelativeTimer
-            date={data.timestamp}
-            updateInterval={1000}
-            style={{ minWidth: "auto" }}
-          />
+          <DateTime date={data.timestamp} />
         </Box>
       ),
     },

src/components/transaction/TransactionDetails.tsx

@@ -21,8 +21,6 @@ import { TransactionSubType } from "src/components/transaction/helpers";
 import { parseSuggestedEvent, DisplaySignature } from "src/web3/parseByteCode";
 
 import { CaretDownFill, CaretUpFill, CircleQuestion } from "grommet-icons";
-import { ERC20Value } from "../ERC20Value";
-import { TokenValueBalanced } from "../ui/TokenValueBalanced";
 import { TxStatusComponent } from "../ui/TxStatusComponent";
 
 const getColumns = ({ type = "" }) => [

src/components/transaction/helpers.tsx

@@ -17,7 +17,8 @@ import {
     StakingTransactionTypeValue,
     CalculateFee,
     formatNumber,
-    RelativeTimer
+    RelativeTimer,
+    DateTime
 } from "../ui";
 import {Box, Text} from "grommet";
 import {CopyBtn} from "../ui/CopyBtn";
@@ -221,7 +222,7 @@ export const transactionPropertyDisplayValues: any = {
     ),
     hash_harmony: (value: any) => <TransactionHash hash={value}/>,
     blockHash: (value: any) => <BlockHash hash={value}/>,
-    timestamp: (value: any) => <RelativeTimer date={value}/>,
+    timestamp: (value: any) => <DateTime date={value}/>,
     gasUsed: (value: any, tx: RPCTransactionHarmony) => (
         <span>
       {value}

src/components/ui/DateTime.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Text } from "grommet";
+import dayjs from "dayjs";
+import { DateFormat, useDateFormatMode } from "../../hooks/dateFormatSwitcherHook";
+import { RelativeTimer } from "./RelativeTimer";
+
+interface IRelativeTimer {
+  date: number | string | Date;
+}
+
+export function DateTime(props: IRelativeTimer) {
+  const { date } = props;
+
+  const dateFormat = useDateFormatMode();
+
+  if (dateFormat === DateFormat.RELATIVE) {
+    return <RelativeTimer date={date} />
+  }
+
+  const formattedDate = dayjs(date).format("MM/DD/YYYY, HH:mm:ss");
+
+  return (
+    <Text
+      size="small"
+      style={{ minWidth: "125px" }}
+      color="minorText"
+      title={formattedDate}
+    >
+      {formattedDate}
+    </Text>
+  );
+}

src/components/ui/index.ts

@@ -18,4 +18,5 @@ export * from './TransactionType'
 export * from './StakingTransactionType';
 export * from './ExpandString';
 export * from './TokenValue';
+export * from './DateTime';
 export * from './utils'

src/hooks/dateFormatSwitcherHook.ts

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { singletonHook } from "react-singleton-hook";
+
+export enum DateFormat {
+  RELATIVE= 'relative',
+  EXACT = 'exact'
+}
+
+const defaultDateFormat: DateFormat = DateFormat.EXACT;
+
+let globalSetMode = () => {
+  throw new Error("you must useDarkMode before setting its state");
+};
+
+const ITEM_NAME = 'dateFormat';
+
+export const setDateFormatMode = (mode: DateFormat) => {
+  //@ts-ignore
+  globalSetMode(mode);
+  window.localStorage.setItem(ITEM_NAME, mode);
+};
+
+export const useDateFormatMode = singletonHook<DateFormat>(
+  (window.localStorage.getItem(ITEM_NAME) || defaultDateFormat) as DateFormat,
+  () => {
+    const currentDateFormat =
+      (window.localStorage.getItem(ITEM_NAME) as DateFormat) || defaultDateFormat;
+
+    const [mode, setMode] = useState<DateFormat>(currentDateFormat);
+    //@ts-ignore
+    globalSetMode = setMode;
+    return mode;
+  }
+);
+
+

src/pages/AddressPage/tabs/Transactions.tsx

@@ -1,24 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { Box, ColumnConfig, Text } from "grommet";
-import { FormNextLink } from "grommet-icons";
 import { useParams } from "react-router-dom";
 import {
   getByteCodeSignatureByHash,
-  getRelatedTransactions,
   getRelatedTransactionsByType,
 } from "src/api/client";
 import { TransactionsTable } from "src/components/tables/TransactionsTable";
 import {
   Address,
-  CalculateFee,
   ONEValue,
-  RelativeTimer,
+  DateTime,
 } from "src/components/ui";
 import {
   Filter,
   RelatedTransaction,
   RelatedTransactionType,
-  RPCTransaction,
 } from "src/types";
 import styled, { css } from "styled-components";
 import { TRelatedTransaction } from "src/api/client.interface";
@@ -224,10 +220,8 @@ function getColumns(id: string): ColumnConfig<any>[] {
       ),
       render: (data: RelatedTransaction) => (
         <Box direction="row" gap="xsmall" justify="end">
-          <RelativeTimer
+          <DateTime
             date={data.timestamp}
-            updateInterval={1000}
-            style={{ minWidth: "auto" }}
           />
         </Box>
       ),
@@ -362,11 +356,7 @@ const getStackingColumns = (id: string): ColumnConfig<any>[] => {
       ),
       render: (data: RelatedTransaction) => (
         <Box direction="row" gap="xsmall" justify="end">
-          <RelativeTimer
-            date={data.timestamp}
-            updateInterval={1000}
-            style={{ minWidth: "auto" }}
-          />
+          <DateTime date={data.timestamp} />
         </Box>
       ),
     },

src/pages/AddressPage/tabs/erc20Columns.tsx

@@ -1,5 +1,5 @@
 import { Box, ColumnConfig, Text } from 'grommet'
-import { Address, TokenValue, RelativeTimer } from 'src/components/ui'
+import { Address, TokenValue, DateTime } from 'src/components/ui'
 import { RelatedTransaction } from 'src/types'
 import React from 'react'
 import { parseSuggestedEvent } from 'src/web3/parseByteCode'
@@ -245,10 +245,8 @@ export function getERC20Columns(id: string): ColumnConfig<any>[] {
       ),
       render: (data: RelatedTransaction) => (
         <Box direction="row" gap="xsmall" justify="end">
-          <RelativeTimer
+          <DateTime
             date={data.timestamp}
-            updateInterval={1000}
-            style={{ minWidth: 'auto' }}
           />
         </Box>
       )

src/pages/AllBlocksPage/AllBlocksTable.tsx

@@ -7,7 +7,7 @@ import { useHistory, useParams } from "react-router-dom";
 import {
   Address,
   formatNumber,
-  RelativeTimer,
+  DateTime,
   PaginationBlockNavigator,
   PaginationRecordsPerPage,
 } from "src/components/ui";
@@ -55,10 +55,7 @@ function getColumns(props: any) {
       ),
       render: (data: Block) => (
         <Box direction="row" gap="xsmall">
-          {/*<Text size="small">*/}
-          {/*  {dayjs(data.timestamp).format("YYYY-MM-DD, HH:mm:ss")},*/}
-          {/*</Text>*/}
-          <RelativeTimer date={data.timestamp} updateInterval={1000} />
+          <DateTime date={data.timestamp} />
         </Box>
       ),
     },

src/pages/MainPage/LatestBlocksTable.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { Box, DataTable, Spinner, Text } from "grommet";
 import { Block } from "src/types";
 import { useHistory } from "react-router-dom";
-import { formatNumber, RelativeTimer } from "src/components/ui";
+import { formatNumber } from "src/components/ui";
+import { DateTime } from "../../components/ui/DateTime";
 
 function getColumns(props: any) {
   const { history } = props;
@@ -67,13 +68,8 @@ function getColumns(props: any) {
       ),
       render: (data: Block) => (
         <Box direction="row" justify="end" gap="xsmall">
-          {/*<Text size="small">*/}
-          {/*  {dayjs(data.timestamp).format("YYYY-MM-DD, HH:mm:ss")},*/}
-          {/*</Text>*/}
-          <RelativeTimer
+          <DateTime
             date={data.timestamp}
-            updateInterval={1000}
-            style={{ textAlign: "right" }}
           />
         </Box>
       ),

src/pages/MainPage/LatestTransactionsTable.tsx

@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom";
 import { RelativeTimer, Address } from "src/components/ui";
 import { getTransactions } from "src/api/client";
 import { FormNextLink } from "grommet-icons";
+import { DateTime } from "../../components/ui/DateTime";
 
 function getColumns(props: any) {
   const { history } = props;
@@ -78,10 +79,8 @@ function getColumns(props: any) {
         </Text>
       ),
       render: (data: RPCTransactionHarmony) => (
-        <RelativeTimer
+        <DateTime
           date={new Date(data.timestamp)}
-          updateInterval={1000}
-          style={{ textAlign: "right" }}
         />
       ),
     },