Remove page component; inline navbar / footer rendering

bryphe-coder · bryphe-coder · commit 7b50658ea4f1 · 2022-01-14T02:08:39.000Z
diff --git a/site/components/Page/index.test.tsx b/site/components/Page/index.test.tsx
diff --git a/site/components/Page/index.tsx b/site/components/Page/index.tsx
@@ -1,50 +1 @@
-import React from "react"
-import { makeStyles } from "@material-ui/core/styles"
-
-import { Footer } from "./Footer"
-import { Navbar } from "../Navbar"
-
-export const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  // TODO: More interesting styling here!
-
-  const styles = useStyles()
-
-  const header = (
-    <div className={styles.header}>
-      <Navbar />
-    </div>
-  )
-
-  const footer = (
-    <div className={styles.footer}>
-      <Footer />
-    </div>
-  )
-
-  const body = <div className={styles.body}> {children}</div>
-
-  return (
-    <div className={styles.root}>
-      {header}
-      {body}
-      {footer}
-    </div>
-  )
-}
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  header: {
-    flex: 0,
-  },
-  body: {
-    height: "100%",
-    flex: 1,
-  },
-  footer: {
-    flex: 0,
-  },
-}))
+export * from "./Footer"
diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx
@@ -5,20 +5,62 @@ import ThemeProvider from "@material-ui/styles/ThemeProvider"
 
 import { dark } from "../theme"
 import { AppProps } from "next/app"
+import { makeStyles } from "@material-ui/core"
+import { Navbar } from "../components/Navbar"
+import { Footer } from "../components/Page"
+
+const Contents: React.FC<AppProps> = ({ Component, pageProps }) => {
+  const styles = useStyles()
+
+  const header = (
+    <div className={styles.header}>
+      <Navbar />
+    </div>
+  )
+
+  const footer = (
+    <div className={styles.footer}>
+      <Footer />
+    </div>
+  )
+
+  return (
+    <div className={styles.root}>
+      {header}
+      <Component {...pageProps} />
+      {footer}
+    </div>
+  )
+}
 
 /**
  * <App /> is the root rendering logic of the application - setting up our router
  * and any contexts / global state management.
- * @returns
  */
-
-const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
+const MyApp: React.FC<AppProps> = (appProps) => {
   return (
     <ThemeProvider theme={dark}>
       <CssBaseline />
-      <Component {...pageProps} />
+      <Contents {...appProps} />
     </ThemeProvider>
   )
 }
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  header: {
+    flex: 0,
+  },
+  body: {
+    height: "100%",
+    flex: 1,
+  },
+  footer: {
+    flex: 0,
+  },
+}))
+
 export default MyApp
diff --git a/site/pages/index.tsx b/site/pages/index.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import { makeStyles, Box, Paper } from "@material-ui/core"
 import { AddToQueue as AddWorkspaceIcon } from "@material-ui/icons"
 
-import { EmptyState, Page, SplitButton } from "../components"
+import { EmptyState, SplitButton } from "../components"
 
 const WorkspacesPage: React.FC = () => {
   const styles = useStyles()
@@ -17,7 +17,7 @@ const WorkspacesPage: React.FC = () => {
   }
 
   return (
-    <Page>
+    <>
       <div className={styles.header}>
         <SplitButton<string>
           color="primary"
@@ -37,12 +37,12 @@ const WorkspacesPage: React.FC = () => {
         />
       </div>
 
-      <Paper style={{ maxWidth: "1380px", margin: "1em auto" }}>
+      <Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
         <Box pt={4} pb={4}>
           <EmptyState message="No workspaces available." button={button} />
         </Box>
       </Paper>
-    </Page>
+    </>
   )
 }
 
