#178 adjust routing & data loading

- Change out objective routing for JSX - Move map to index of main route - Nest both map and preview under app - Move data loading into app object instead of body
pacificclimate · Jan 23, 2024 · 00e666d · 00e666d
1 parent 7828531
commit 00e666d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 25 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -25,12 +25,6 @@
   // "customizations": {},
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
   "remoteUser": "vscode",
-  "mounts": [
-    // Re-use local SSH keys (useful if you use SSH keys for Git repo access or other SSH work)
-    "source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,type=bind,consistency=cached",
-    // Re-use local Git configuration
-    "source=${localEnv:HOME}/.gitconfig,target=/home/vscode/.gitconfig,type=bind,consistency=cached"
-  ],
   "runArgs": [
     // allow container to be treated with no network isolation
     "--network=host",

diff --git a/src/components/main/App/App.js b/src/components/main/App/App.js
@@ -6,6 +6,7 @@ import Header from "../Header/Header";
 import Body from "../Body";
 import useInitializeApp from "./app-initialization";
 import { useStore } from "../../../state/state-store";
+import { Outlet } from "react-router-dom";
 
 import "./App.css";
 
@@ -15,13 +16,21 @@ export default function App() {
   const isConfigLoaded = useStore((state) => state.isConfigLoaded);
   const configErrorMessage = useStore((state) => state.configError);
   const config = useStore((state) => state.config);
+  const loadMetadata = useStore((state) => state.loadMetadata);
 
   useEffect(() => {
     if (!isConfigLoaded() && configErrorMessage === null) {
       initialize();
     }
   });
 
+  // load data once on initial render after config is loaded
+  useEffect(() => {
+    if (isConfigLoaded()) {
+      loadMetadata();
+    }
+  }, [config]);
+
   useInitializeApp(config);
 
   if (configErrorMessage !== null) {
@@ -36,7 +45,7 @@ export default function App() {
     <Container fluid className="App">
       <Disclaimer />
       <Header />
-      <Body />
+      <Outlet />
     </Container>
   );
 }
diff --git a/src/components/main/Body/Body.js b/src/components/main/Body/Body.js
@@ -55,11 +55,6 @@ function Body() {
     })),
   );
 
-  // load data once on initial render
-  useEffect(() => {
-    actions.loadMetadata();
-  }, []);
-
   // Station filtering state and setters
   const {
     normal: filterValuesNormal,

diff --git a/src/components/preview/StationPreview/StationPreview.js b/src/components/preview/StationPreview/StationPreview.js
@@ -11,7 +11,6 @@ export default function StationPreview() {
 
   return (
     <Container fluid classname="StationPreview">
-      <Header />
       {placeholder()}
       <br />
       <Link to={"/"}>Back to main</Link>

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,14 @@
 import "bootstrap/dist/css/bootstrap.css";
 import "react-datepicker/dist/react-datepicker.css";
 import "leaflet-draw/dist/leaflet.draw.css";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  RouterProvider,
+  Routes,
+  Route,
+} from "react-router-dom";
+import Body from "./components/main/Body";
 
 import { createRoot } from "react-dom/client";
 
@@ -14,17 +21,18 @@ import StationPreview, {
 } from "./components/preview/StationPreview";
 import registerServiceWorker from "./registerServiceWorker";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <App />,
-  },
-  {
-    path: "preview/:stationId",
-    element: <StationPreview />,
-    loader: stationLoader,
-  },
-]);
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route path="/" element={<App />}>
+      <Route index element={<Body />} />
+      <Route
+        path="preview/:stationId"
+        element={<StationPreview />}
+        loader={stationLoader}
+      />
+    </Route>,
+  ),
+);
 
 const container = document.getElementById("root");
 const root = createRoot(container);