monorepo/visions/ui/src/App.tsx

import React, { useEffect, useState } from 'react';
import './App.css';
import { TabletopElement } from './components/Tabletop/Tabletop';
import { Client } from './client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { GmPlayingFieldComponent } from './components/GmPlayingField/GmPlayingField';
import { WebsocketProvider } from './components/WebsocketProvider';

interface AppProps {
    client: Client;
}

const App = ({ client }: AppProps) => {
    console.log("rendering app");
    const [websocketUrl, setWebsocketUrl] = useState<string | undefined>(undefined);

    useEffect(() => {
        client.registerWebsocket().then((url) => setWebsocketUrl(url))
    }, [client]);

    let router =
        createBrowserRouter([
            {
                path: "/gm",
                element: <GmPlayingFieldComponent client={client} />
            },
            {
                path: "/",
                element: websocketUrl ? <WebsocketProvider websocketUrl={websocketUrl}> <TabletopElement client={client} /> </WebsocketProvider> : <div> </div>
            }
        ]);
    return (
        <div className="App">
            <RouterProvider router={router} />
        </div>
    );
}

export default App;