Merge pull request #39 from mapcomponents/Add-MultiTab

Changing Router and Fixing Button which opens the table

Author: JannikBrack

.github/workflows/build_and_deploy.yml

@@ -40,13 +40,6 @@ jobs:
           CI=false yarn build
           cd ..
           cp -r multi_tab/dist docs-build/multi_tab
-      - name: Install and build test_app🔧
-        run: |
-          cd test_app
-          yarn
-          CI=false yarn build
-          cd ..
-          cp -r test_app/dist docs-build/test_app
       - name: copy catalogue metadata
         run: |
           cp mc_meta.json docs-build/mc_meta.json

multi_tab/src/App.tsx

@@ -1,41 +1,35 @@
 import "./App.css";
-import { MapLibreMap } from "@mapcomponents/react-maplibre";
+import {MapLibreMap} from "@mapcomponents/react-maplibre";
 import LayerManager from "./components/LayerManager.jsx";
-import { useState } from "react";
-import { Button } from "@mui/material";
+import {Button} from "@mui/material";
 
 function App() {
-  const [tableOpen, setTableOpen] = useState(false);
 
-
-  const openTable = () => {
-    if (!tableOpen) {
-      const newUrl = `${window.location.href}table`;
-      window.open(newUrl, "_blank", "popup");
-      setTableOpen(true);
+    const openTable = () => {
+        const newUrl = `${window.location.href}table`;
+        window.open(newUrl, "_blank", "popup");
     }
-  }
-  return (
-    <>
-      <MapLibreMap
-        options={{
-          style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-          zoom: 12.75,
-          center: [7.1, 50.73],
-        }}
-        style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}
-      />
-      <LayerManager />
-      <Button
-        sx={{
-          left: '93%'
-        }}
-        variant='contained'
-        color="primary"
-        onClick={() => openTable()}
-      >show table</Button>
-    </>
-  );
+    return (
+        <>
+            <MapLibreMap
+                options={{
+                    style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+                    zoom: 12.75,
+                    center: [7.1, 50.73],
+                }}
+                style={{position: "absolute", top: 0, bottom: 0, left: 0, right: 0}}
+            />
+            <LayerManager/>
+            <Button
+                sx={{
+                    left: '93%'
+                }}
+                variant='contained'
+                color="primary"
+                onClick={() => openTable()}
+            >show table</Button>
+        </>
+    );
 }
 
 export default App;

multi_tab/src/main.tsx

@@ -4,10 +4,7 @@ import {MapComponentsProvider} from "@mapcomponents/react-maplibre";
 import App from './App';
 import DataTableManager from './components/DataTableManager.jsx';
 import './index.css';
-import {
-    createBrowserRouter,
-    RouterProvider,
-} from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {DataContextProvider} from "./contexts/DataContext";
 import pwaUrl from "./lib/pwaUrl";
@@ -25,27 +22,16 @@ if ('serviceWorker' in navigator) {
 }
 const pathname = window.location.pathname;
 
-const router = createBrowserRouter([
-    {
-        path: pathname + '/',
-        element: (
-            <App/>
-        ),
-    },
-    {
-        path: pathname + '/table',
-        element: (
-            <DataTableManager />
-        )
-    }
-])
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
         <QueryClientProvider client={queryClient}>
             <MapComponentsProvider>
                 <DataContextProvider>
-                    <RouterProvider router={router}></RouterProvider>
+                    <Routes>
+                        <Route path={pathname + "/table"} element={<DataTableManager />} />
+                        <Route path={pathname + "/"} element={<App />} />
+                    </Routes>
                 </DataContextProvider>
             </MapComponentsProvider>
         </QueryClientProvider>