Base page refactor (#99)

* add base.tsx * Add base component which contains Navbar and container. Add Base component to each page. * fix lint errors * Update lazy-loading with base page component * Using Base as a wrapper for routes in `index.tsx` Co-authored-by: Alex Nguyen <hoangminh98@gmail.com>
latticesurgery-com · Jan 22, 2022 · bc96218 · bc96218
1 parent 635b5bd
commit bc96218
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 43 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"
 
 import reportWebVitals from "./reportWebVitals"
 import theme from "./styles/theme"
+import Base from "./pages/Base"
 
 const Home = React.lazy(() => import("./pages/Home"))
 const CompilerPage = React.lazy(() => import("./pages/Compiler"))
@@ -17,15 +18,17 @@ ReactDOM.render(
         <ChakraProvider theme={theme}>
             <ColorModeScript initialColorMode={theme.config.initialColorMode} />
             <BrowserRouter>
-                <React.Suspense fallback={<></>}>
-                    <Routes>
-                        <Route path="/" element={<Home />} />
-                        <Route path="/online-compiler" element={<CompilerPage />} />
-                        <Route path="/overview" element={<Overview />} />
-                        <Route path="/about-us" element={<AboutUs />} />
-                        <Route path="*" element={<NotFound />} />
-                    </Routes>
-                </React.Suspense>
+                <Base>
+                    <React.Suspense fallback={<></>}>
+                        <Routes>
+                            <Route path="/" element={<Home />} />
+                            <Route path="/online-compiler" element={<CompilerPage />} />
+                            <Route path="/overview" element={<Overview />} />
+                            <Route path="/about-us" element={<AboutUs />} />
+                            <Route path="*" element={<NotFound />} />
+                        </Routes>
+                    </React.Suspense>
+                </Base>
             </BrowserRouter>
         </ChakraProvider>
     </React.StrictMode>,

diff --git a/src/pages/AboutUs.tsx b/src/pages/AboutUs.tsx
@@ -1,11 +1,9 @@
-import { Avatar, Flex, Box, Heading, Text, Icon, Link, Container } from "@chakra-ui/react"
+import { Avatar, Flex, Box, Heading, Text, Icon, Link } from "@chakra-ui/react"
 import { FaGithub, FaLinkedin } from "react-icons/fa"
-import Navbar from "../components/UI/Navbar"
 
 const AboutUs = (): JSX.Element => {
     return (
-        <Container maxW="container.xl">
-            <Navbar />
+        <>
             <Heading as="h1" size="2xl" my={4} textAlign={"center"}>
                 Our Team
             </Heading>
@@ -143,7 +141,7 @@ const AboutUs = (): JSX.Element => {
                     </Flex>
                 </Box>
             </Flex>
-        </Container>
+        </>
     )
 }
 

diff --git a/src/pages/Base.tsx b/src/pages/Base.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import { Container } from "@chakra-ui/react"
+import Navbar from "../components/UI/Navbar"
+
+const Base = (props: React.PropsWithChildren<Record<never, never>>) => {
+    return (
+        <Container maxW="container.xl">
+            <Navbar />
+            {props.children}
+        </Container>
+    )
+}
+
+export default Base
diff --git a/src/pages/Compiler.tsx b/src/pages/Compiler.tsx
@@ -8,23 +8,13 @@ import {
     NoServerResponse,
     CompilerError,
 } from "../apiResponses"
-import {
-    Container,
-    Stack,
-    Box,
-    Alert,
-    AlertIcon,
-    AlertTitle,
-    AlertDescription,
-} from "@chakra-ui/react"
-import Navbar from "../components/UI/Navbar"
+import { Stack, Box, Alert, AlertIcon, AlertTitle, AlertDescription } from "@chakra-ui/react"
 import CircuitSelect from "../components/sections/CircuitSelect"
 
 const CompilerPage = (): JSX.Element => {
     const [appState, setAppState] = useState(new AppState())
     return (
-        <Container maxW="container.xl">
-            <Navbar />
+        <>
             <Box mt={10}>
                 <CircuitSelect appState={appState} setAppState={setAppState} />
             </Box>
@@ -65,7 +55,7 @@ const CompilerPage = (): JSX.Element => {
                     <LatticeView compilationResult={appState.apiResponse} />
                 )}
             </Stack>
-        </Container>
+        </>
     )
 }
 

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,5 +1,4 @@
 import {
-    Container,
     Stack,
     Heading,
     Text,
@@ -16,12 +15,9 @@ import SFULogo from "../assets/backers/SFU_horizontal_logo_rgb.png"
 import SFULogoReversed from "../assets/backers/SFU_horizontal_reversed_colour_rgb.png"
 import AaltoLogo from "../assets/backers/AaltoLogo.png"
 
-import Navbar from "../components/UI/Navbar"
-
 const Home = (): JSX.Element => {
     return (
-        <Container maxW="container.xl">
-            <Navbar />
+        <>
             <Stack
                 textAlign={"center"}
                 align={"center"}
@@ -85,7 +81,7 @@ const Home = (): JSX.Element => {
                     </Link>
                 </Flex>
             </Stack>
-        </Container>
+        </>
     )
 }
 

diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
@@ -1,11 +1,9 @@
-import { Box, Heading, Text, Button, Container, Link } from "@chakra-ui/react"
+import { Box, Heading, Text, Button, Link } from "@chakra-ui/react"
 import { Link as Routerlink } from "react-router-dom"
-import Navbar from "../components/UI/Navbar"
 
 const NotFound = (): JSX.Element => {
     return (
-        <Container maxW="container.xl">
-            <Navbar />
+        <>
             <Box textAlign={"center"} mt={"20vh"}>
                 <Heading as="h1" size="2xl" mb={4} textAlign={"center"}>
                     Page Not Found
@@ -23,7 +21,7 @@ const NotFound = (): JSX.Element => {
                     </Link>
                 </Button>
             </Box>
-        </Container>
+        </>
     )
 }
 

diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
@@ -1,10 +1,8 @@
-import { Container, Heading, Text, Box, Link } from "@chakra-ui/react"
-import Navbar from "../components/UI/Navbar"
+import { Heading, Text, Box, Link } from "@chakra-ui/react"
 
 const Overview = (): JSX.Element => {
     return (
-        <Container maxW="container.xl">
-            <Navbar />
+        <>
             <Heading as="h1" size="2xl" mt={4} mb={10} textAlign={"center"}>
                 Overview
             </Heading>
@@ -103,7 +101,7 @@ const Overview = (): JSX.Element => {
                     shows the state of the surface code lattice state in between surgery operations.
                 </Text>
             </Box>
-        </Container>
+        </>
     )
 }