chore: added useYesterday hook (#1635)

* chore: added useYesteday hook

* chore: added useYesterday hook

apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx

@@ -4,6 +4,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import {
   useScreenDimensions,
   useDataProvider,
+  useYesterday,
 } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { MarketState } from '@vegaprotocol/types';
@@ -33,13 +34,13 @@ const SimpleMarketList = () => {
   const statusesRef = useRef<Record<string, MarketState | ''>>({});
   const gridRef = useRef<AgGridReact | null>(null);
 
+  const yesterday = useYesterday();
   const variables = useMemo(() => {
-    const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
     return {
-      since: new Date(yesterday * 1000).toISOString(),
+      since: new Date(yesterday).toISOString(),
       interval: Interval.INTERVAL_I1H,
     };
-  }, []);
+  }, [yesterday]);
   const { data, error, loading } = useDataProvider({
     dataProvider: marketsWithCandlesProvider,
     variables,

apps/console-lite/src/app/components/simple-market-list/simple-market-percent-change.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { InView } from 'react-intersection-observer';
-import { useDataProvider } from '@vegaprotocol/react-helpers';
+import { useDataProvider, useYesterday } from '@vegaprotocol/react-helpers';
 import type { Candle } from '@vegaprotocol/market-list';
 import { marketCandlesProvider } from '@vegaprotocol/market-list';
 import { Interval } from '@vegaprotocol/types';
@@ -68,13 +68,13 @@ const SimpleMarketPercentChangeWrapper = (props: Props) => {
 };
 
 const SimpleMarketPercentChange = ({ candles, marketId, setValue }: Props) => {
-  const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
+  const yesterday = useYesterday();
   const { data } = useDataProvider({
     dataProvider: marketCandlesProvider,
     variables: {
       marketId,
       interval: Interval.INTERVAL_I1D,
-      since: new Date(yesterday * 1000).toISOString(),
+      since: new Date(yesterday).toISOString(),
     },
   });
 

apps/trading/pages/markets/[marketId].page.tsx

@@ -4,6 +4,7 @@ import {
   addDecimalsFormatNumber,
   t,
   titlefy,
+  useYesterday,
 } from '@vegaprotocol/react-helpers';
 import { Interval } from '@vegaprotocol/types';
 import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
@@ -113,12 +114,12 @@ const MarketPage = ({ id }: { id?: string }) => {
     }
   };
 
+  const yesterday = useYesterday();
   // Cache timestamp for yesterday to prevent full unmount of market page when
   // a rerender occurs
   const yTimestamp = useMemo(() => {
-    const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
+    return new Date(yesterday).toISOString();
-    return new Date(yesterday * 1000).toISOString();
+  }, [yesterday]);
-  }, []);
 
   const variables = useMemo(
     () => ({

libs/market-info/src/components/market-info/info-market.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { formatNumber, t } from '@vegaprotocol/react-helpers';
+import { formatNumber, t, useYesterday } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, Splash, Accordion } from '@vegaprotocol/ui-toolkit';
 import pick from 'lodash/pick';
 import BigNumber from 'bignumber.js';
@@ -57,10 +57,10 @@ export const MarketInfoContainer = ({
   marketId,
   onSelect,
 }: MarketInfoContainerProps) => {
+  const yesterday = useYesterday();
   const yTimestamp = useMemo(() => {
-    const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
+    return new Date(yesterday).toISOString();
-    return new Date(yesterday * 1000).toISOString();
+  }, [yesterday]);
-  }, []);
   const variables = useMemo(
     () => ({ marketId, since: yTimestamp, interval: Interval.INTERVAL_I1H }),
     [marketId, yTimestamp]

libs/market-list/src/lib/markets-provider.ts

@@ -2,6 +2,7 @@ import {
   makeDataProvider,
   makeDerivedDataProvider,
   useDataProvider,
+  useYesterday,
 } from '@vegaprotocol/react-helpers';
 import type {
   MarketsQuery,
@@ -90,13 +91,13 @@ export const marketListProvider = makeDerivedDataProvider<
 );
 
 export const useMarketList = () => {
+  const yesterday = useYesterday();
   const variables = useMemo(() => {
-    const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
     return {
-      since: new Date(yesterday * 1000).toISOString(),
+      since: new Date(yesterday).toISOString(),
       interval: Interval.INTERVAL_I1H,
     };
-  }, []);
+  }, [yesterday]);
   const { data, loading, error } = useDataProvider({
     dataProvider: marketListProvider,
     variables,

libs/react-helpers/src/hooks/index.ts

@@ -1,11 +1,12 @@
+export * from './__generated__/NetworkParam';
 export * from './use-apply-grid-transaction';
 export * from './use-data-provider';
 export * from './use-fetch';
+export * from './use-mutation-observer';
 export * from './use-network-params';
 export * from './use-outside-click';
+export * from './use-resize-observer';
 export * from './use-resize';
 export * from './use-screen-dimensions';
 export * from './use-theme-switcher';
-export * from './use-mutation-observer';
+export * from './use-yesterday';
-export * from './use-resize-observer';
-export * from './__generated__/NetworkParam';

libs/react-helpers/src/hooks/use-yesterday.spec.ts

@@ -0,0 +1,57 @@
+import { act } from 'react-dom/test-utils';
+import { now, useYesterday } from './use-yesterday';
+import { renderHook } from '@testing-library/react';
+
+describe('now', () => {
+  beforeAll(() => {
+    jest.useFakeTimers().setSystemTime(new Date('1970-01-05T14:36:20.100Z'));
+  });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+  it.each([
+    { o: '1970-01-05T14:36:20.000Z', roundBy: 1 }, // by 1ms
+    { o: '1970-01-05T14:36:00.000Z', roundBy: 60 * 1000 }, // by 1m
+    { o: '1970-01-05T14:35:00.000Z', roundBy: 5 * 60 * 1000 }, // by 5m
+    { o: '1970-01-05T14:30:00.000Z', roundBy: 10 * 60 * 1000 }, // by 10m
+    { o: '1970-01-05T14:20:00.000Z', roundBy: 20 * 60 * 1000 }, // by 20m
+    { o: '1970-01-05T14:00:00.000Z', roundBy: 60 * 60 * 1000 }, // by 1h
+    { o: '1970-01-05T00:00:00.000Z', roundBy: 24 * 60 * 60 * 1000 }, // by 1d
+  ])(
+    'returns the now timestamp rounded by given number (ms)',
+    ({ roundBy, o }) => {
+      expect(now(roundBy)).toEqual(new Date(o).getTime());
+    }
+  );
+});
+
+describe('useYesterday', () => {
+  beforeAll(() => {
+    jest.useFakeTimers().setSystemTime(new Date('1970-01-05T14:36:20.100Z'));
+  });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+  it('returns yesterday timestamp rounded by 5 minutes', () => {
+    const { result, rerender } = renderHook(() => useYesterday());
+    expect(result.current).toEqual(
+      new Date('1970-01-04T14:35:00.000Z').getTime()
+    );
+    rerender();
+    rerender();
+    rerender();
+    expect(result.current).toEqual(
+      new Date('1970-01-04T14:35:00.000Z').getTime()
+    );
+  });
+  it('updates yesterday timestamp after 5 minutes', () => {
+    const { result, rerender } = renderHook(() => useYesterday());
+    act(() => {
+      jest.advanceTimersByTime(5 * 60 * 1000);
+      rerender();
+    });
+    expect(result.current).toEqual(
+      new Date('1970-01-04T14:40:00.000Z').getTime()
+    );
+  });
+});

libs/react-helpers/src/hooks/use-yesterday.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+const DEFAULT_ROUND_BY_MS = 5 * 60 * 1000;
+const TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1000;
+
+export const now = (roundBy = 1) =>
+  Math.floor((Math.round(new Date().getTime() / 1000) * 1000) / roundBy) *
+  roundBy;
+
+/**
+ * Returns the yesterday's timestamp rounded by given number (in milliseconds; 5 minutes by default)
+ */
+export const useYesterday = (roundBy = DEFAULT_ROUND_BY_MS) => {
+  const yesterday = useRef<number>(now(roundBy) - TWENTY_FOUR_HOURS_MS);
+  useEffect(() => {
+    const i = setInterval(() => {
+      yesterday.current = now(roundBy) - TWENTY_FOUR_HOURS_MS;
+    }, roundBy);
+    return () => clearInterval(i);
+  }, [roundBy]);
+  return yesterday.current;
+};