Call EnsureRegion then EnsureSite

frontend/src/App.tsx

@@ -4,16 +4,16 @@ import { ChakraProvider } from "@chakra-ui/react"
 import { ColorModeProvider } from "./components/ui/color-mode"
 import { InstalledApps } from "./contexts/apps"
 import { themeSystem } from "./theme"
-import { ThisSite, ThisNode } from "./contexts/this_site"
-import { ThisRegion } from "./contexts/this_region"
+import { EnsureSite, ThisNode } from "./contexts/this_site"
+import { EnsureRegion } from "./contexts/this_region"
 
 const router = createBrowserRouter(
   [
     {
       path: "/",
       element: <Layout />,
       children: [
-        { path: "", element: <ThisRegion /> },
+        { path: "", element: <EnsureRegion><EnsureSite /></EnsureRegion> },
         { path: "node", element: <ThisNode /> },
         { path: "apps", element: <InstalledApps /> },
       ],

frontend/src/contexts/this_region/index.ts

@@ -1 +1 @@
-export { default as ThisRegion } from "./pages/ThisRegion"
+export { default as EnsureRegion } from "./pages/EnsureRegion"

frontend/src/contexts/this_region/pages/ThisRegion.tsx → frontend/src/contexts/this_region/pages/EnsureRegion.tsx

@@ -14,7 +14,7 @@ const getRegion = async (): Promise<RegionDetails | null> => {
   return null
 }
 
-export default function ThisRegion() {
+export default function EnsureRegion({ children }: { children: React.ReactNode }) {
   const [region, setRegion] = useState<RegionDetails | null>(null)
   const [loading, setLoading] = useState(true)
 
@@ -64,6 +64,7 @@ export default function ThisRegion() {
       {region == null && (
         <FindRegion onSubmitNewRegion={onSubmitNewRegion} />
       )}
+      {region != null && children}
     </Container>
   )
 }

frontend/src/contexts/this_site/index.ts

@@ -1,2 +1,2 @@
-export { default as ThisSite } from "./pages/ThisSite"
+export { default as EnsureSite } from "./pages/EnsureSite"
 export { default as ThisNode } from "./pages/ThisNode"

frontend/src/contexts/this_site/pages/EnsureSite.tsx

@@ -0,0 +1,69 @@
+import { Center, Container, Spinner } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
+import NewSite, { NewSiteData } from "../components/NewSite"
+import { SiteDetails } from "../types"
+import ThisSiteApi from "../api"
+import { ApiResult } from "../../shared/types"
+
+const api = new ThisSiteApi()
+
+const getSite = async (): Promise<SiteDetails | null> => {
+  const result = await api.show()
+  if ("Ok" in result) return result.Ok
+  return null
+}
+
+export default function EnsureSite() {
+  const [site, setSite] = useState<SiteDetails | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const updateSite = (newSite: SiteDetails | null) => {
+    console.log("Updating site", newSite)
+    setSite(newSite)
+  }
+
+  const withLoading = async (fn: () => Promise<void>) => {
+    setLoading(true)
+    await fn()
+    setLoading(false)
+  }
+
+  const fetchSite = async () => {
+    withLoading(async () => {
+      console.log("EFFECT: fetchSite")
+      const newSite = await getSite()
+      updateSite(newSite)    })
+  }
+
+  useEffect(() => {
+    if (site == null) fetchSite()
+  }, [])
+
+  const onSubmitNewSite = (data: NewSiteData) => {
+    api.create(data.name).then((result: ApiResult<SiteDetails, any>) => {
+      if ("Ok" in result) updateSite(result.Ok)
+    })
+  }
+
+  if (loading) {
+    return (
+      <Container maxWidth={"2xl"}>
+        <Center>
+          <Spinner size="lg" opacity={0.5} />
+        </Center>
+      </Container>
+    )
+  }
+
+  return (
+    <Container maxWidth={"2xl"}>
+      {site == null && <NewSite onSubmitNewSite={onSubmitNewSite} />}
+      {site != null && (
+        <div>
+          <h1>Site created!</h1>
+          <p>Site: {site?.name}</p>
+        </div>
+      )}
+    </Container>
+  )
+}