Merge pull request #262 from blockscout/blocks-time-ago

increment block timestamp in list view

lib/consts.ts

@@ -4,3 +4,9 @@ export const WEI = new BigNumber(10 ** 18);
 export const GWEI = new BigNumber(10 ** 9);
 export const WEI_IN_GWEI = WEI.dividedBy(GWEI);
 export const ZERO = new BigNumber(0);
+
+export const SECOND = 1_000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;

lib/hooks/useTimeAgoIncrement.tsx

+import React from 'react';
+
+import { DAY, HOUR, MINUTE, SECOND } from 'lib/consts';
+import dayjs from 'lib/date/dayjs';
+
+function getUnits(diff: number) {
+  if (diff < MINUTE) {
+    return [ SECOND, MINUTE ];
+  }
+
+  if (diff < HOUR) {
+    return [ MINUTE, HOUR ];
+  }
+
+  if (diff < DAY) {
+    return [ HOUR, DAY ];
+  }
+
+  return [ DAY, 2 * DAY ];
+}
+
+function getUpdateParams(ts: string) {
+  const timeDiff = Date.now() - new Date(ts).getTime();
+  const [ unit, higherUnit ] = getUnits(timeDiff);
+
+  if (unit === DAY) {
+    return { interval: DAY };
+  }
+
+  const leftover = unit - timeDiff % unit;
+
+  return {
+    startTimeout: unit === SECOND ?
+      0 :
+      // here we assume that in current dayjs locale time difference is rounded by Math.round function
+      // so we have to update displayed value whenever time comes over the middle of the unit interval
+      // since it will be rounded to the upper bound
+      (leftover < unit / 2 ? leftover + unit / 2 : leftover - unit / 2) + SECOND,
+    endTimeout: higherUnit - timeDiff + SECOND,
+    interval: unit,
+  };
+}
+
+export default function useTimeAgoIncrement(ts: string, isEnabled?: boolean) {
+  const [ value, setValue ] = React.useState(dayjs(ts).fromNow());
+
+  React.useEffect(() => {
+    const timeouts: Array<number> = [];
+    const intervals: Array<number> = [];
+
+    const startIncrement = () => {
+      const { startTimeout, interval, endTimeout } = getUpdateParams(ts);
+      if (!startTimeout && !endTimeout) {
+        return;
+      }
+
+      let intervalId: number;
+
+      const startTimeoutId = window.setTimeout(() => {
+        setValue(dayjs(ts).fromNow());
+
+        intervalId = window.setInterval(() => {
+          setValue(dayjs(ts).fromNow());
+        }, interval);
+
+        intervals.push(intervalId);
+      }, startTimeout);
+
+      const endTimeoutId = window.setTimeout(() => {
+        window.clearInterval(intervalId);
+        startIncrement();
+      }, endTimeout);
+
+      timeouts.push(startTimeoutId);
+      timeouts.push(endTimeoutId);
+    };
+
+    isEnabled && startIncrement();
+
+    return () => {
+      timeouts.forEach(window.clearTimeout);
+      intervals.forEach(window.clearInterval);
+    };
+  }, [ isEnabled, ts ]);
+
+  return value;
+}

ui/blocks/BlockTimestamp.tsx

+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
+
+interface Props {
+  ts: string;
+  isEnabled?: boolean;
+}
+
+const BlockTimestamp = ({ ts, isEnabled }: Props) => {
+  const timeAgo = useTimeAgoIncrement(ts, isEnabled);
+
+  return <Text variant="secondary" fontWeight={ 400 }>{ timeAgo }</Text>;
+};
+
+export default React.memo(BlockTimestamp);

ui/blocks/BlocksList.tsx

@@ -12,7 +12,8 @@ interface Props {
 const BlocksList = ({ data }: Props) => {
   return (
     <Box mt={ 8 }>
-      { data.map((item) => <BlocksListItem key={ item.height } data={ item }/>) }
+      { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+      { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }
     </Box>
   );
 };

ui/blocks/BlocksListItem.tsx

@@ -9,9 +9,9 @@ import appConfig from 'configs/app/config';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
 import link from 'lib/link/link';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
@@ -20,9 +20,10 @@ import Utilization from 'ui/shared/Utilization';
 interface Props {
   data: Block;
   isPending?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const BlocksListItem = ({ data, isPending }: Props) => {
+const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const { totalReward, burntFees, txFees } = getBlockReward(data);
 
@@ -38,7 +39,7 @@ const BlocksListItem = ({ data, isPending }: Props) => {
             { data.height }
           </Link>
         </Flex>
-        <Text variant="secondary" fontWeight={ 400 }>{ dayjs(data.timestamp).fromNow() }</Text>
+        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>

ui/blocks/BlocksTable.tsx

@@ -29,7 +29,8 @@ const BlocksTable = ({ data }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { data.map((item) => <BlocksTableItem key={ item.height } data={ item }/>) }
+          { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+          { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
         </Tbody>
       </Table>
     </TableContainer>

ui/blocks/BlocksTableItem.tsx

-import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
+import { Tr, Td, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -7,8 +7,8 @@ import type { Block } from 'types/api/block';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
 import link from 'lib/link/link';
+import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
 import Utilization from 'ui/shared/Utilization';
@@ -16,15 +16,16 @@ import Utilization from 'ui/shared/Utilization';
 interface Props {
   data: Block;
   isPending?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const BlocksTableItem = ({ data, isPending }: Props) => {
+const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const { totalReward, burntFees, txFees } = getBlockReward(data);
 
   return (
     <Tr>
       <Td fontSize="sm">
-        <Flex columnGap={ 2 } alignItems="center">
+        <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
           { isPending && <Spinner size="sm" flexShrink={ 0 }/> }
           <Tooltip isDisabled={ data.type !== 'reorg' } label="Chain reorganizations">
             <Link
@@ -35,7 +36,7 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
             </Link>
           </Tooltip>
         </Flex>
-        <Text variant="secondary" mt={ 2 } fontWeight={ 400 }>{ dayjs(data.timestamp).fromNow() }</Text>
+        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Td>
       <Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
       <Td fontSize="sm">

ui/shared/Utilization.tsx

@@ -25,4 +25,4 @@ const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
   );
 };
 
-export default chakra(Utilization);
+export default React.memo(chakra(Utilization));