Move client construction up to app root

visions/ui/src/App.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
+  // render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

visions/ui/src/App.tsx

@@ -6,13 +6,16 @@ import { Client } from './client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { GmPlayingFieldComponent } from './components/GmPlayingField/GmPlayingField';
 
-const App = () => {
+interface AppProps {
+    client: Client;
+}
+
+const App = ({ client }: AppProps) => {
     console.log("rendering app");
-    const client = new Client();
     const [websocketUrl, setWebsocketUrl] = useState<string | undefined>(undefined);
 
     useEffect(() => {
-        client.registerWebsocket().then((url) => setWebsocketUrl(url));
+        client.registerWebsocket().then((url) => setWebsocketUrl(url))
     }, [client]);
 
     let router =

visions/ui/src/index.tsx

@@ -3,13 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { Client } from './client';
+
+const client = new Client();
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <App client={client} />
   </React.StrictMode>
 );