From 85bce948b2e6d455279464490aca9b117fc36728 Mon Sep 17 00:00:00 2001
From: username <username@users.noreply.github.com>
Date: Sun, 23 Jun 2019 14:13:23 +0900
Subject: [PATCH] refactor: add makeStyles with props example

---
 components/atoms/SpacingPaper.tsx | 36 +++++++++++++++++++++++++++++++
 components/atoms/index.ts         |  1 +
 pages/about.tsx                   | 11 ++++------
 pages/index.tsx                   | 18 ++++++++++------
 pages/redux.tsx                   | 14 +++++-------
 5 files changed, 57 insertions(+), 23 deletions(-)
 create mode 100644 components/atoms/SpacingPaper.tsx

diff --git a/components/atoms/SpacingPaper.tsx b/components/atoms/SpacingPaper.tsx
new file mode 100644
index 0000000..5df3cf5
--- /dev/null
+++ b/components/atoms/SpacingPaper.tsx
@@ -0,0 +1,36 @@
+import { Paper } from "@material-ui/core"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+
+const useStyles = makeStyles<Theme, IProps>((theme: Theme) =>
+  createStyles({
+    root: (props: IProps) => ({
+      padding: props.noPadding === true ? theme.spacing(0) : theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    }),
+  })
+)
+
+interface IProps {
+  /**
+   * shildren
+   */
+  children: React.ReactNode
+  /**
+   * zero-padding flag
+   */
+  noPadding?: boolean
+}
+
+/**
+ * Paper with spacing
+ * @param props IProps
+ */
+export const SpacingPaper = (props: IProps) => {
+  const { children } = props
+  const classes = useStyles(props)
+  return (
+    <Paper className={classes.root} elevation={6}>
+      {children}
+    </Paper>
+  )
+}
diff --git a/components/atoms/index.ts b/components/atoms/index.ts
index e69de29..54362a6 100644
--- a/components/atoms/index.ts
+++ b/components/atoms/index.ts
@@ -0,0 +1 @@
+export * from "./SpacingPaper"
diff --git a/pages/about.tsx b/pages/about.tsx
index 9c5e3c5..3d0d473 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,6 +1,7 @@
-import { Paper, Typography } from "@material-ui/core"
+import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
+import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
@@ -9,10 +10,6 @@ import { IPagePayload, PageActions } from "../store/actions"
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
-    mainContainer: {
-      padding: theme.spacing(2),
-      marginBottom: theme.spacing(1),
-    },
   })
 )
 
@@ -21,9 +18,9 @@ function About() {
   return (
     <Layout>
       <HeaderArticleContainer>
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <Typography variant="h5">About page !!</Typography>
-        </Paper>
+        </SpacingPaper>
       </HeaderArticleContainer>
     </Layout>
   )
diff --git a/pages/index.tsx b/pages/index.tsx
index f1a2f73..576a2f2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,15 +1,12 @@
-import { Paper, Typography } from "@material-ui/core"
+import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {},
-    mainContainer: {
-      padding: theme.spacing(2),
-      marginBottom: theme.spacing(1),
-    },
   })
 )
 
@@ -18,9 +15,16 @@ function Index() {
   return (
     <Layout>
       <HeaderArticleContainer>
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <Typography variant="h5">Hello Next.js 👋</Typography>
-        </Paper>
+        </SpacingPaper>
+
+        <SpacingPaper noPadding>
+          <Typography variant="h5">zero padding paper</Typography>
+          <Typography variant="h6">
+            This component use makeStyles refer to Theme and Props.
+          </Typography>
+        </SpacingPaper>
       </HeaderArticleContainer>
     </Layout>
   )
diff --git a/pages/redux.tsx b/pages/redux.tsx
index babb005..c14ce18 100644
--- a/pages/redux.tsx
+++ b/pages/redux.tsx
@@ -2,13 +2,13 @@ import {
   Avatar,
   Button,
   FormControl,
-  Paper,
   TextField,
   Typography,
 } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React, { useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
+import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
@@ -23,10 +23,6 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
     },
-    mainContainer: {
-      padding: theme.spacing(2),
-      marginBottom: theme.spacing(1),
-    },
     title: {
       fontSize: "2em",
     },
@@ -80,7 +76,7 @@ function Redux() {
   return (
     <Layout>
       <HeaderArticleContainer>
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <Typography variant="h2" gutterBottom className={classes.title}>
             Increment / Decrement
           </Typography>
@@ -92,9 +88,9 @@ function Redux() {
           <Button variant="contained" color="primary" onClick={handleDecrement}>
             - 1
           </Button>
-        </Paper>
+        </SpacingPaper>
 
-        <Paper className={classes.mainContainer}>
+        <SpacingPaper>
           <FormControl>
             <Typography variant="h2" gutterBottom className={classes.title}>
               Calculate
@@ -118,7 +114,7 @@ function Redux() {
               calculate
             </Button>
           </FormControl>
-        </Paper>
+        </SpacingPaper>
       </HeaderArticleContainer>
     </Layout>
   )