From 9f1dc0f48326ee248ac749a5db1091f00a33250b Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Mon, 13 Feb 2023 17:29:28 -0800 Subject: [PATCH] chore: stop poll of query errors --- apps/trading/components/app-loader/index.tsx | 2 + .../node-switcher-2/node-switcher.tsx | 25 ++++++---- .../node-switcher-2/node-swticher.spec.tsx | 25 +++++----- .../components/node-switcher-2/row-data.tsx | 47 +++++++++++-------- 4 files changed, 56 insertions(+), 43 deletions(-) diff --git a/apps/trading/components/app-loader/index.tsx b/apps/trading/components/app-loader/index.tsx index 9a1565fd9..9b35a69d0 100644 --- a/apps/trading/components/app-loader/index.tsx +++ b/apps/trading/components/app-loader/index.tsx @@ -9,6 +9,7 @@ import { useWeb3ConnectStore, } from '@vegaprotocol/web3'; import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit'; +import { t } from '@vegaprotocol/react-helpers'; interface AppLoaderProps { children: ReactNode; @@ -64,6 +65,7 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => { if (!d) return true; return d.length < 1; }} + noDataMessage={t('Could not fetch Ethereum configuration')} > <>{children} diff --git a/libs/environment/src/components/node-switcher-2/node-switcher.tsx b/libs/environment/src/components/node-switcher-2/node-switcher.tsx index 63fe08e51..c204a7ff4 100644 --- a/libs/environment/src/components/node-switcher-2/node-switcher.tsx +++ b/libs/environment/src/components/node-switcher-2/node-switcher.tsx @@ -95,6 +95,9 @@ export const NodeSwitcherContainer = ({ {t(' chain ID')}

+

+ {t('Select a GraphQL node to connect to:')} +

setNodeRadio(value)} @@ -154,6 +157,15 @@ export const NodeSwitcherContainer = ({ ); }; +interface CustomRowWrapperProps { + inputText: string; + setInputText: (text: string) => void; + nodes: string[]; + highestBlock: number | null; + nodeRadio: string; + onBlockHeight: (blockHeight: number) => void; +} + const CustomRowWrapper = ({ inputText, setInputText, @@ -161,20 +173,13 @@ const CustomRowWrapper = ({ highestBlock, nodeRadio, onBlockHeight, -}: { - inputText: string; - setInputText: (text: string) => void; - nodes: string[]; - highestBlock: number | null; - nodeRadio: string; - onBlockHeight: (blockHeight: number) => void; -}) => { +}: CustomRowWrapperProps) => { const [displayCustom, setDisplayCustom] = useState(false); - const showInput = nodeRadio === CUSTOM_NODE_KEY || nodes.length <= 0; const [error, setError] = useState(null); + const showInput = nodeRadio === CUSTOM_NODE_KEY || nodes.length <= 0; return ( - +
{nodes.length > 0 && ( ({ global.performance.getEntriesByName = jest.fn().mockReturnValue([]); const mockEnv = (env: Partial) => { - // @ts-ignore typescript not playing nice with mocks - useEnvironment.mockImplementation(() => env); + (useEnvironment as unknown as jest.Mock).mockImplementation(() => env); }; describe('NodeSwitcherContainer', () => { @@ -104,17 +103,10 @@ describe('NodeSwitcherContainer', () => { ).toHaveAttribute('disabled'); }); - it.todo('disables nodes based on state'); - it.todo('allows connecting to a valid node'); - it('allows setting a custom node', () => { const mockSetUrl = jest.fn(); const mockUrl = 'https://custom.url'; - const nodes = [ - 'https://n00.api.vega.xyz', - 'https://n01.api.vega.xyz', - 'https://n02.api.vega.xyz', - ]; + const nodes = ['https://n00.api.vega.xyz']; mockEnv({ VEGA_ENV: Networks.TESTNET, nodes, @@ -132,18 +124,22 @@ describe('NodeSwitcherContainer', () => { value: mockUrl, }, }); + + expect(screen.getByRole('textbox')).toHaveValue(mockUrl); expect(screen.getByRole('button', { name: 'Check' })).not.toBeDisabled(); + fireEvent.click(screen.getByRole('button', { name: 'Check' })); + + const customRow = within(screen.getByTestId('custom-row')); + expect(customRow.getByTestId('block-height-cell')).toBeInTheDocument(); + fireEvent.click( screen.getByRole('button', { name: 'Connect to this node' }) ); - expect(mockSetUrl).toHaveBeenCalledWith(mockUrl); }); - it.todo('disables a custom node'); - - it('disables a custom with an invalid url', () => { + it('disables a custom node with an invalid url', () => { const mockSetUrl = jest.fn(); const mockUrl = 'invalid-url'; const nodes = [ @@ -173,5 +169,6 @@ describe('NodeSwitcherContainer', () => { }) ).toBeDisabled(); }); + it.todo('displays errors'); }); diff --git a/libs/environment/src/components/node-switcher-2/row-data.tsx b/libs/environment/src/components/node-switcher-2/row-data.tsx index 985c82cf6..501905036 100644 --- a/libs/environment/src/components/node-switcher-2/row-data.tsx +++ b/libs/environment/src/components/node-switcher-2/row-data.tsx @@ -25,29 +25,38 @@ export const RowData = ({ }: RowDataProps) => { const [time, setTime] = useState(); // no use of data here as we need the data nodes reference to block height - const { data, error, loading } = useStatisticsQuery({ - pollInterval: POLL_INTERVAL, - // fix for pollInterval - // https://github.com/apollographql/apollo-client/issues/9819 - ssr: false, - }); + const { data, error, loading, startPolling, stopPolling } = + useStatisticsQuery({ + pollInterval: POLL_INTERVAL, + // fix for pollInterval + // https://github.com/apollographql/apollo-client/issues/9819 + ssr: false, + }); const headerStore = useHeaderStore(); const headers = headerStore[url]; - // useEffect(() => { - // const handleStartPoll = () => startPolling(POLL_INTERVAL); - // const handleStopPoll = () => stopPolling(); + useEffect(() => { + // stop polling if row has errored + }, [error, stopPolling]); - // // TODO: possibly remove blur focus handling. + useEffect(() => { + const handleStartPoll = () => startPolling(POLL_INTERVAL); + const handleStopPoll = () => stopPolling(); - // window.addEventListener('blur', handleStopPoll); - // window.addEventListener('focus', handleStartPoll); - // handleStartPoll(); - // return () => { - // window.removeEventListener('blur', handleStopPoll); - // window.removeEventListener('focus', handleStartPoll); - // }; - // }, [startPolling, stopPolling]); + window.addEventListener('blur', handleStopPoll); + window.addEventListener('focus', handleStartPoll); + + handleStartPoll(); + + if (error) { + stopPolling(); + } + + return () => { + window.removeEventListener('blur', handleStopPoll); + window.removeEventListener('focus', handleStartPoll); + }; + }, [startPolling, stopPolling, error]); useEffect(() => { if (!isValidUrl(url)) return; @@ -122,7 +131,7 @@ export const RowData = ({ )}