Refactor layout components (#115)

cjolowicz · Jul 19, 2019 · 3b43f49 · 3b43f49
2 parents 2d93af7 + a948a39
commit 3b43f49
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix invalid generated URLs in webpack output.
 
 ### Changed
+- Refactor layout components ([#115](../../issues/115)):
+  - Move Paper from SignUp to SignUpLayout.
+  - Move Header out of main in SignUpLayout.
+  - Eliminate Header component in layouts.
 - Refactor artist components ([#111](../../issues/111)):
   - Incorporate FetchingArtistList in ArtistList.
   - Move Artist button to separate component.

diff --git a/src/components/layouts/Layout.js b/src/components/layouts/Layout.js
@@ -11,13 +11,6 @@ type Props = {
   children: React.Node
 };
 
-export const Header = () => (
-  <>
-    <AppBar />
-    <Navigation />
-  </>
-);
-
 const useStyles = makeStyles(theme => ({
   main: {
     padding: theme.spacing(3)
@@ -33,7 +26,8 @@ const Layout = ({ children }: Props) => {
   const classes = useStyles();
   return (
     <>
-      <Header />
+      <AppBar />
+      <Navigation />
       <main className={classes.main}>
         <Paper className={classes.paper}>{children}</Paper>
       </main>

diff --git a/src/components/layouts/SignUpLayout.js b/src/components/layouts/SignUpLayout.js
@@ -1,18 +1,45 @@
 // @flow
 import * as React from "react";
+import Paper from "@material-ui/core/Paper";
+import { makeStyles } from "@material-ui/styles";
 
-import { Header } from "./Layout";
+import AppBar from "./AppBar";
+import Navigation from "./Navigation";
 import Message from "./Message";
 
 type Props = {
   children: React.Node
 };
 
+const useStyles = makeStyles(theme => ({
+  main: {
+    width: "auto",
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: {
+      width: 400,
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  },
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: theme.spacing(2, 3, 3)
+  }
+}));
+
 const SignUpLayout = ({ children }: Props) => {
+  const classes = useStyles();
   return (
     <>
-      <Header />
-      {children}
+      <AppBar />
+      <Navigation />
+      <main className={classes.main}>
+        <Paper className={classes.paper}>{children}</Paper>
+      </main>
       <Message />
     </>
   );

diff --git a/src/components/user/SignUp.js b/src/components/user/SignUp.js
@@ -6,7 +6,6 @@ import { Redirect } from "react-router-dom";
 import Input from "@material-ui/core/Input";
 import FormControl from "@material-ui/core/FormControl";
 import Button from "@material-ui/core/Button";
-import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/styles";
 
@@ -24,23 +23,6 @@ type Props = {
 type ButtonEvent = SyntheticInputEvent<HTMLButtonElement>;
 
 const useStyles = makeStyles(theme => ({
-  main: {
-    width: "auto",
-    marginLeft: theme.spacing(3),
-    marginRight: theme.spacing(3),
-    [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: {
-      width: 400,
-      marginLeft: "auto",
-      marginRight: "auto"
-    }
-  },
-  paper: {
-    marginTop: theme.spacing(8),
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    padding: theme.spacing(2, 3, 3)
-  },
   form: {
     marginTop: theme.spacing(1)
   },
@@ -65,47 +47,45 @@ export const SignUp = ({ createUser, user }: Props) => {
   }
 
   return (
-    <main className={classes.main}>
-      <Paper className={classes.paper}>
-        <Typography component="h1" variant="h5">
-          Sign up for Muckr
-        </Typography>
-        <form className={classes.form} onSubmit={handleSubmit}>
-          <FormControl margin="normal" required fullWidth>
-            <Input
-              autoFocus
-              fullWidth
-              autoComplete="username"
-              name="username"
-              type="text"
-              value={username}
-              placeholder="Username"
-              onChange={handleUsernameChange}
-            />
-          </FormControl>
-          <FormControl margin="normal" required fullWidth>
-            <Input
-              fullWidth
-              autoComplete="new-password"
-              name="password"
-              type="password"
-              value={password}
-              placeholder="Password"
-              onChange={handlePasswordChange}
-            />
-          </FormControl>
-          <Button
-            className={classes.submit}
+    <>
+      <Typography component="h1" variant="h5">
+        Sign up for Muckr
+      </Typography>
+      <form className={classes.form} onSubmit={handleSubmit}>
+        <FormControl margin="normal" required fullWidth>
+          <Input
+            autoFocus
+            fullWidth
+            autoComplete="username"
+            name="username"
+            type="text"
+            value={username}
+            placeholder="Username"
+            onChange={handleUsernameChange}
+          />
+        </FormControl>
+        <FormControl margin="normal" required fullWidth>
+          <Input
             fullWidth
-            type="submit"
-            variant="contained"
-            color="primary"
-          >
-            Sign up
-          </Button>
-        </form>
-      </Paper>
-    </main>
+            autoComplete="new-password"
+            name="password"
+            type="password"
+            value={password}
+            placeholder="Password"
+            onChange={handlePasswordChange}
+          />
+        </FormControl>
+        <Button
+          className={classes.submit}
+          fullWidth
+          type="submit"
+          variant="contained"
+          color="primary"
+        >
+          Sign up
+        </Button>
+      </form>
+    </>
   );
 };