shared page layout component

src/app/App.js

@@ -8,6 +8,7 @@ import loadable from "@loadable/component";
 import { useAuth0 } from "@auth0/auth0-react";
 
 import buildApolloClient from "./apolloClient";
+import PageLayout from "./PageLayout";
 
 const ItemsPage = loadable(() => import("./ItemsPage"));
 const HomePage = loadable(() => import("./HomePage"));
@@ -49,10 +50,14 @@ function App() {
                 <WardrobePage />
               </Route>
               <Route path="/user/:userId/items">
+                <PageLayout>
                   <ItemsPage />
+                </PageLayout>
               </Route>
               <Route path="/">
+                <PageLayout>
                   <HomePage />
+                </PageLayout>
               </Route>
             </Switch>
           </ChakraProvider>

src/app/HomePage.js

@@ -5,21 +5,16 @@ import {
   Box,
   Button,
   Flex,
-  IconButton,
   Input,
-  useColorMode,
   useColorModeValue,
   useTheme,
   useToast,
 } from "@chakra-ui/core";
-import { MoonIcon, SunIcon } from "@chakra-ui/icons";
+import { useHistory, useLocation } from "react-router-dom";
-import { Link, useHistory, useLocation } from "react-router-dom";
 import { useLazyQuery } from "@apollo/client";
-import { useAuth0 } from "@auth0/auth0-react";
 
 import { Heading1, usePageTitle } from "./util";
 import OutfitPreview from "./components/OutfitPreview";
-import useCurrentUser from "./components/useCurrentUser";
 
 import HomepageSplashImg from "../images/homepage-splash.png";
 import HomepageSplashImg2x from "../images/homepage-splash@2x.png";
@@ -32,13 +27,7 @@ function HomePage() {
   const [previewState, setPreviewState] = React.useState(null);
 
   return (
-    <Flex direction="column" p="6" pt="3" align="center" textAlign="center">
+    <Flex direction="column" align="center" textAlign="center" marginTop="8">
-      <Box width="100%" display="flex" alignItems="center">
-        <ColorModeToggleButton />
-        <Box flex="1 0 0" />
-        <UserLoginLogout />
-      </Box>
-      <Box height="8" />
       <Box
         width="200px"
         height="200px"
@@ -76,48 +65,6 @@ function HomePage() {
   );
 }
 
-function UserLoginLogout() {
-  const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
-  const { id, username } = useCurrentUser();
-
-  if (isLoading) {
-    return null;
-  }
-
-  if (isAuthenticated) {
-    return (
-      <Box display="flex" alignItems="center">
-        {username && <Box fontSize="sm">Hi, {username}!</Box>}
-        {id && (
-          <Button
-            as={Link}
-            to={`/user/${id}/items`}
-            size="sm"
-            variant="outline"
-            marginLeft="2"
-          >
-            Items
-          </Button>
-        )}
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={() => logout({ returnTo: window.location.origin })}
-          marginLeft="2"
-        >
-          Log out
-        </Button>
-      </Box>
-    );
-  } else {
-    return (
-      <Button size="sm" variant="outline" onClick={() => loginWithRedirect()}>
-        Log in
-      </Button>
-    );
-  }
-}
-
 function StartOutfitForm({ onChange }) {
   const history = useHistory();
 
@@ -289,21 +236,6 @@ function SubmitPetForm() {
   );
 }
 
-function ColorModeToggleButton() {
-  const { colorMode, toggleColorMode } = useColorMode();
-
-  return (
-    <IconButton
-      aria-label={
-        colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
-      }
-      icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
-      onClick={toggleColorMode}
-      variant="ghost"
-    />
-  );
-}
-
 /**
  * useSupportSetup helps our support staff get set up with special access.
  * If you provide ?supportSecret=... in the URL, we'll save it in a cookie and

src/app/ItemsPage.js

@@ -32,23 +32,19 @@ function ItemsPage() {
 
   if (loading) {
     return (
-      <Box padding="6" display="flex" justifyContent="center">
+      <Box display="flex" justifyContent="center">
         <HangerSpinner boxSize="48px" />
       </Box>
     );
   }
 
   if (error) {
-    return (
+    return <Box color="red.400">{error.message}</Box>;
-      <Box padding="6" color="red.400">
-        {error.message}
-      </Box>
-    );
   }
 
   return (
-    <Box padding="6" maxWidth="800px" margin="0 auto">
+    <Box maxWidth="800px" margin="0 auto">
-      <Heading1 marginBottom="6">
+      <Heading1 marginBottom="8">
         {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
       </Heading1>
       <Wrap justify="center">

src/app/PageLayout.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { Box, Button, IconButton, useColorMode } from "@chakra-ui/core";
+import { Link } from "react-router-dom";
+import { useAuth0 } from "@auth0/auth0-react";
+import { MoonIcon, SunIcon } from "@chakra-ui/icons";
+
+import useCurrentUser from "./components/useCurrentUser";
+
+function PageLayout({ children }) {
+  return (
+    <Box padding="6" paddingTop="3">
+      <Box width="100%" display="flex" alignItems="center" marginBottom="6">
+        <ColorModeToggleButton />
+        <Box flex="1 0 0" />
+        <UserLoginLogout />
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+function UserLoginLogout() {
+  const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
+  const { id, username } = useCurrentUser();
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (isAuthenticated) {
+    return (
+      <Box display="flex" alignItems="center">
+        {username && <Box fontSize="sm">Hi, {username}!</Box>}
+        {id && (
+          <Button
+            as={Link}
+            to={`/user/${id}/items`}
+            size="sm"
+            variant="outline"
+            marginLeft="2"
+          >
+            Items
+          </Button>
+        )}
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => logout({ returnTo: window.location.origin })}
+          marginLeft="2"
+        >
+          Log out
+        </Button>
+      </Box>
+    );
+  } else {
+    return (
+      <Button size="sm" variant="outline" onClick={() => loginWithRedirect()}>
+        Log in
+      </Button>
+    );
+  }
+}
+
+function ColorModeToggleButton() {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  return (
+    <IconButton
+      aria-label={
+        colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
+      }
+      icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+      onClick={toggleColorMode}
+      variant="ghost"
+    />
+  );
+}
+
+export default PageLayout;