chore: added useYesterday hook (#1635)
* chore: added useYesteday hook * chore: added useYesterday hook
This commit is contained in:
parent
329d073b34
commit
ad9436c7cf
@ -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,
|
||||
|
@ -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(),
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -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 * 1000).toISOString();
|
||||
}, []);
|
||||
return new Date(yesterday).toISOString();
|
||||
}, [yesterday]);
|
||||
|
||||
const variables = useMemo(
|
||||
() => ({
|
||||
|
@ -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 * 1000).toISOString();
|
||||
}, []);
|
||||
return new Date(yesterday).toISOString();
|
||||
}, [yesterday]);
|
||||
const variables = useMemo(
|
||||
() => ({ marketId, since: yTimestamp, interval: Interval.INTERVAL_I1H }),
|
||||
[marketId, yTimestamp]
|
||||
|
@ -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,
|
||||
|
@ -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-resize-observer';
|
||||
export * from './__generated__/NetworkParam';
|
||||
export * from './use-yesterday';
|
||||
|
57
libs/react-helpers/src/hooks/use-yesterday.spec.ts
Normal file
57
libs/react-helpers/src/hooks/use-yesterday.spec.ts
Normal file
@ -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()
|
||||
);
|
||||
});
|
||||
});
|
22
libs/react-helpers/src/hooks/use-yesterday.ts
Normal file
22
libs/react-helpers/src/hooks/use-yesterday.ts
Normal file
@ -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;
|
||||
};
|
Loading…
Reference in New Issue
Block a user