From bc77dcdfbf8631d6dd6bce1b9c29f938b67f0b2c Mon Sep 17 00:00:00 2001 From: Sergey Karasev Date: Tue, 30 Nov 2021 19:38:43 +0300 Subject: [PATCH] Resolve #95: Added date format modes exact/relative (#96) * Added dir .idea to .gitignore * Resolve #95: Added date format modes exact/relative --- .gitignore | 1 + src/components/appHeader/ConfigureButton.tsx | 20 ++++++++++- src/components/tables/TransactionsTable.tsx | 11 ++---- .../transaction/TransactionDetails.tsx | 2 -- src/components/transaction/helpers.tsx | 5 +-- src/components/ui/DateTime.tsx | 32 +++++++++++++++++ src/components/ui/index.ts | 1 + src/hooks/dateFormatSwitcherHook.ts | 36 +++++++++++++++++++ src/pages/AddressPage/tabs/Transactions.tsx | 16 ++------- src/pages/AddressPage/tabs/erc20Columns.tsx | 6 ++-- src/pages/AllBlocksPage/AllBlocksTable.tsx | 7 ++-- src/pages/MainPage/LatestBlocksTable.tsx | 10 ++---- .../MainPage/LatestTransactionsTable.tsx | 5 ++- 13 files changed, 106 insertions(+), 46 deletions(-) create mode 100644 src/components/ui/DateTime.tsx create mode 100644 src/hooks/dateFormatSwitcherHook.ts diff --git a/.gitignore b/.gitignore index 2a904ee..3381cfe 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,7 @@ # misc .DS_Store +.idea .env.local .env.development .env.development.local diff --git a/src/components/appHeader/ConfigureButton.tsx b/src/components/appHeader/ConfigureButton.tsx index e17c3cd..7212e12 100644 --- a/src/components/appHeader/ConfigureButton.tsx +++ b/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 ( + + Date Format + + } /> @@ -71,7 +89,7 @@ interface ToggleProps { value: string; options: Array<{ text: string; - value: themeType | currencyType; + value: themeType | currencyType | DateFormat; }>; onChange: (value: any) => void; } diff --git a/src/components/tables/TransactionsTable.tsx b/src/components/tables/TransactionsTable.tsx index 9985252..cc0a2bc 100644 --- a/src/components/tables/TransactionsTable.tsx +++ b/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) => ( - {/**/} - {/* {dayjs(data.timestamp).format("YYYY-MM-DD, HH:mm:ss")},*/} - {/**/} - + ), }, diff --git a/src/components/transaction/TransactionDetails.tsx b/src/components/transaction/TransactionDetails.tsx index 217936c..33cf93c 100644 --- a/src/components/transaction/TransactionDetails.tsx +++ b/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 = "" }) => [ diff --git a/src/components/transaction/helpers.tsx b/src/components/transaction/helpers.tsx index 1fbfeab..8510a99 100644 --- a/src/components/transaction/helpers.tsx +++ b/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) => , blockHash: (value: any) => , - timestamp: (value: any) => , + timestamp: (value: any) => , gasUsed: (value: any, tx: RPCTransactionHarmony) => ( {value} diff --git a/src/components/ui/DateTime.tsx b/src/components/ui/DateTime.tsx new file mode 100644 index 0000000..09ed332 --- /dev/null +++ b/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 + } + + const formattedDate = dayjs(date).format("MM/DD/YYYY, HH:mm:ss"); + + return ( + + {formattedDate} + + ); +} diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 2f5b0da..4e7783f 100644 --- a/src/components/ui/index.ts +++ b/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' \ No newline at end of file diff --git a/src/hooks/dateFormatSwitcherHook.ts b/src/hooks/dateFormatSwitcherHook.ts new file mode 100644 index 0000000..7020164 --- /dev/null +++ b/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( + (window.localStorage.getItem(ITEM_NAME) || defaultDateFormat) as DateFormat, + () => { + const currentDateFormat = + (window.localStorage.getItem(ITEM_NAME) as DateFormat) || defaultDateFormat; + + const [mode, setMode] = useState(currentDateFormat); + //@ts-ignore + globalSetMode = setMode; + return mode; + } +); + + diff --git a/src/pages/AddressPage/tabs/Transactions.tsx b/src/pages/AddressPage/tabs/Transactions.tsx index c18e368..a119551 100644 --- a/src/pages/AddressPage/tabs/Transactions.tsx +++ b/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[] { ), render: (data: RelatedTransaction) => ( - ), @@ -362,11 +356,7 @@ const getStackingColumns = (id: string): ColumnConfig[] => { ), render: (data: RelatedTransaction) => ( - + ), }, diff --git a/src/pages/AddressPage/tabs/erc20Columns.tsx b/src/pages/AddressPage/tabs/erc20Columns.tsx index 0dc1d5e..1fd2e63 100644 --- a/src/pages/AddressPage/tabs/erc20Columns.tsx +++ b/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[] { ), render: (data: RelatedTransaction) => ( - ) diff --git a/src/pages/AllBlocksPage/AllBlocksTable.tsx b/src/pages/AllBlocksPage/AllBlocksTable.tsx index d14ba27..62226a6 100644 --- a/src/pages/AllBlocksPage/AllBlocksTable.tsx +++ b/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) => ( - {/**/} - {/* {dayjs(data.timestamp).format("YYYY-MM-DD, HH:mm:ss")},*/} - {/**/} - + ), }, diff --git a/src/pages/MainPage/LatestBlocksTable.tsx b/src/pages/MainPage/LatestBlocksTable.tsx index 221e465..ff75bec 100644 --- a/src/pages/MainPage/LatestBlocksTable.tsx +++ b/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) => ( - {/**/} - {/* {dayjs(data.timestamp).format("YYYY-MM-DD, HH:mm:ss")},*/} - {/**/} - ), diff --git a/src/pages/MainPage/LatestTransactionsTable.tsx b/src/pages/MainPage/LatestTransactionsTable.tsx index 7644a78..2a5b883 100644 --- a/src/pages/MainPage/LatestTransactionsTable.tsx +++ b/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) { ), render: (data: RPCTransactionHarmony) => ( - ), },