chore: fix polling not working

libs/environment/src/components/node-switcher-2/node-switcher.tsx

@@ -1,12 +1,21 @@
-import { ApolloProvider } from '@apollo/client';
+import type { ApolloClient, NormalizedCacheObject } from '@apollo/client';
 import { createClient, useHeaderStore } from '@vegaprotocol/apollo-client';
-import { Dialog, Radio } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  Button,
+  Dialog,
+  Input,
+  Radio,
+  RadioGroup,
+} from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useEnvironment } from '../../hooks';
 import { useStatisticsQuery } from '../../utils/__generated__/Node';
 
+const POLL_INTERVAL = 3000;
+
 export const NodeSwitcher = ({
   open,
   setOpen,
@@ -20,8 +29,7 @@ export const NodeSwitcher = ({
     setUrl: store.setUrl,
   }));
 
-  const [customUrl, setCustomUrl] = useState('');
-  const [displayCustom, setDisplayCustom] = useState(false);
+  const [nodeRadio, setNodeRadio] = useState<string>('');
   const [highestBlock, setHighestBlock] = useState<number | null>(null);
 
   const handleHighestBlock = useCallback((blockHeight: number) => {
@@ -38,83 +46,75 @@ export const NodeSwitcher = ({
 
   return (
     <Dialog open={open} onChange={setOpen}>
-      <table className="w-full">
-        <thead>
-          <tr>
-            <th className="text-left">node</th>
-            <th className="text-right">response time</th>
-            <th className="text-right">core block height</th>
-            <th className="text-right">datanode block height</th>
-          </tr>
-        </thead>
-        <tbody>
-          {nodes.map((node) => {
-            return (
-              <tr key={node} onClick={() => setUrl(node)}>
-                <RowWrapper url={node}>
-                  <Row
-                    url={node}
-                    onBlockHeight={handleHighestBlock}
-                    highestBlock={highestBlock}
-                  />
-                </RowWrapper>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-      <hr />
       <div>
-        Custom
-        <input
-          value={customUrl}
-          onChange={(e) => setCustomUrl(e.target.value)}
-          className="border"
-        />
-        <button
-          onClick={() => {
-            if (!isValidUrl(customUrl)) {
-              return;
-            }
-            setDisplayCustom(true);
+        <RadioGroup
+          value={nodeRadio}
+          onChange={(value) => {
+            setNodeRadio(value);
           }}
         >
-          Check
-        </button>
-      </div>
-      <table className="w-full">
-        <thead>
-          <tr>
-            <th className="text-left">node</th>
-            <th className="text-right">response time</th>
-            <th className="text-right">core block height</th>
-            <th className="text-right">datanode block height</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr onClick={() => setUrl(customUrl)}>
-            {displayCustom && (
-              <RowWrapper url={customUrl}>
-                <Row
-                  url={customUrl}
-                  onBlockHeight={handleHighestBlock}
+          <table className="w-full">
+            <thead>
+              <tr>
+                <th />
+                <th className="text-left">node</th>
+                <th className="text-right">response time</th>
+                <th className="text-right">core block height</th>
+                <th className="text-right">datanode block height</th>
+              </tr>
+            </thead>
+            <tbody>
+              {nodes.map((node) => {
+                return (
+                  <tr key={node}>
+                    <ClientWrapper
+                      url={node}
+                      renderChildren={(client) => (
+                        <>
+                          <RowLabels url={node} />
+                          <RowData
+                            client={client}
+                            url={node}
+                            highestBlock={highestBlock}
+                            onBlockHeight={handleHighestBlock}
+                          />
+                        </>
+                      )}
+                    />
+                  </tr>
+                );
+              })}
+              <tr>
+                <CustomRowWrapper
                   highestBlock={highestBlock}
+                  onBlockHeight={handleHighestBlock}
+                  nodeRadio={nodeRadio}
                 />
-              </RowWrapper>
-            )}
-          </tr>
-        </tbody>
-      </table>
+              </tr>
+            </tbody>
+          </table>
+        </RadioGroup>
+        <div className="mt-4">
+          <Button
+            fill={true}
+            onClick={() => {
+              setUrl(nodeRadio);
+            }}
+          >
+            {t('Connect to this node')}
+          </Button>
+        </div>
+      </div>
     </Dialog>
   );
 };
 
-const RowWrapper = ({
+const ClientWrapper = ({
   url,
-  children,
+  renderChildren,
 }: {
   url: string;
-  children: ReactNode;
+  renderChildren: (client: ApolloClient<NormalizedCacheObject>) => ReactNode;
 }) => {
   const client = useMemo(
     () =>
@@ -123,28 +123,58 @@ const RowWrapper = ({
         cacheConfig: undefined,
         retry: false,
         connectToDevTools: false,
+        connectToHeaderStore: true,
       }),
     [url]
   );
-  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+  return <>{renderChildren(client)}</>;
 };
-const Row = ({
+
+const RowLabels = ({ url }: { url: string }) => {
+  return (
+    <>
+      <td>
+        <Radio id={`node-url-${url}`} value={url} label="" />
+      </td>
+      <td>{url}</td>
+    </>
+  );
+};
+
+const RowData = ({
+  client,
   url,
   highestBlock,
   onBlockHeight,
 }: {
+  client: ApolloClient<NormalizedCacheObject>;
   url: string;
   highestBlock: number | null;
   onBlockHeight: (blockHeight: number) => void;
 }) => {
+  console.log(client);
   const [time, setTime] = useState<number>();
-  const { data } = useStatisticsQuery({
-    pollInterval: 3000,
-    fetchPolicy: 'no-cache',
+  const { data, startPolling, stopPolling } = useStatisticsQuery({
+    client,
+    // pollInterval doesnt seem to work any more
+    // 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();
+    window.addEventListener('blur', handleStopPoll);
+    window.addEventListener('focus', handleStartPoll);
+    handleStartPoll();
+    return () => {
+      window.removeEventListener('blur', handleStopPoll);
+      window.removeEventListener('focus', handleStartPoll);
+    };
+  }, [startPolling, stopPolling]);
+
   useEffect(() => {
     const requestUrl = new URL(url);
     const requests = window.performance.getEntriesByName(requestUrl.href);
@@ -174,7 +204,6 @@ const Row = ({
 
   return (
     <>
-      <td>{url}</td>
       <td className="text-right">{time ? time.toFixed(2) + 'ms' : 'n/a'}</td>
       <td className="text-right">{data?.statistics.blockHeight || '-'}</td>
       <td className={headerBlockHeightClass}>{headers?.blockHeight || '-'}</td>
@@ -182,6 +211,69 @@ const Row = ({
   );
 };
 
+const CustomRowWrapper = ({
+  highestBlock,
+  nodeRadio,
+  onBlockHeight,
+}: {
+  highestBlock: number | null;
+  nodeRadio: string;
+  onBlockHeight: (blockHeight: number) => void;
+}) => {
+  const [customUrl, setCustomUrl] = useState('');
+  const [displayCustom, setDisplayCustom] = useState(false);
+
+  return (
+    <>
+      <td>
+        <Radio id="node-url-other" value="other" label="" />
+      </td>
+      <td>
+        {nodeRadio === 'other' ? (
+          <>
+            <Input
+              value={customUrl}
+              onChange={(e) => setCustomUrl(e.target.value)}
+              className="border"
+            />
+            <button
+              onClick={() => {
+                if (!isValidUrl(customUrl)) {
+                  return;
+                }
+                setDisplayCustom(true);
+              }}
+            >
+              {t('Check')}
+            </button>
+          </>
+        ) : (
+          t('Other')
+        )}
+      </td>
+      {displayCustom ? (
+        <ClientWrapper
+          url={customUrl}
+          renderChildren={(client) => (
+            <RowData
+              client={client}
+              url={customUrl}
+              onBlockHeight={onBlockHeight}
+              highestBlock={highestBlock}
+            />
+          )}
+        ></ClientWrapper>
+      ) : (
+        <>
+          <td></td>
+          <td></td>
+          <td></td>
+        </>
+      )}
+    </>
+  );
+};
+
 const isValidUrl = (url?: string) => {
   if (!url) return false;
   try {