Set up initial data population

bryphe-coder · bryphe-coder · commit 4e0e64c79629 · 2022-02-09T18:08:41.000Z
diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx
@@ -1,22 +1,38 @@
 import React from "react"
+import useSWR from "swr"
 import { makeStyles } from "@material-ui/core/styles"
 import { useRouter } from "next/router"
-import { Navbar } from "../../components/Navbar"
-import { Footer } from "../../components/Page"
-import { useUser } from "../../contexts/UserContext"
+import { Navbar } from "../../../components/Navbar"
+import { Footer } from "../../../components/Page"
+import { useUser } from "../../../contexts/UserContext"
+import { firstOrItem } from "../../../util/array"
+import { ErrorSummary } from "../../../components/ErrorSummary"
+import { FullScreenLoader } from "../../../components/Loader/FullScreenLoader"
 
 //import { Workspace } from "../../components/Workspace"
 //import { MockWorkspace } from "../../test_helpers"
 
+import * as API from "../../../api"
+
 const WorkspacesPage: React.FC = () => {
   const styles = useStyles()
   const router = useRouter()
   const { me, signOut } = useUser(true)
 
   const { user: userQueryParam, workspace: workspaceQueryParam } = router.query
 
-  const userParam = firstOrDefault(userQueryParam, null)
-  const workspaceParam = firstOrDefault(workspaceQueryParam, null)
+  const userParam = firstOrItem(userQueryParam, null)
+  const workspaceParam = firstOrItem(workspaceQueryParam, null)
+
+  const { data: workspace, error: workspaceError } = useSWR<API.Workspace, Error>(() => `/api/v2/workspaces/${(userParam as any).toString()}/${(workspaceParam as any).toString()}`)
+
+  if (workspaceError) {
+    return <ErrorSummary error={workspaceError} />
+  }
+
+  if (!me || !workspace) {
+    return <FullScreenLoader />
+  }
 
   return (
     <div className={styles.root}>
@@ -44,3 +60,4 @@ const useStyles = makeStyles(() => ({
 }))
 
 export default WorkspacesPage
+
