button component (bukinoshita#11)

xpert98 · Nov 23, 2017 · 3dd6d65 · 3dd6d65
1 parent b0ed683
commit 3dd6d65
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 93 deletions.
diff --git a/components/button.js b/components/button.js
@@ -0,0 +1,51 @@
+'use strict'
+
+import React from 'react'
+
+import { colors, typography } from './../theme'
+
+const Button = ({ children, type, onClick, disabled }) => {
+  return (
+    <button type={type} onClick={onClick} disabled={disabled}>
+      {children}
+
+      <style jsx>{`
+        button {
+          display: inline-block;
+          background-color: ${colors.white};
+          color: ${colors.black};
+          border: 0;
+          border-radius: 0;
+          padding: 12px 80px;
+          font-size: ${typography.f10};
+          text-transform: uppercase;
+          font-weight: ${typography.bold};
+          margin: 30px auto;
+          text-align: center;
+          cursor: pointer;
+          outline: none;
+          letter-spacing: 2px;
+          transition: all 200ms;
+        }
+
+        button:focus,
+        button:hover {
+          box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
+        }
+
+        button[disabled] {
+          background-color: ${colors.gray};
+          cursor: default;
+        }
+      `}</style>
+    </button>
+  )
+}
+
+Button.defaultProps = {
+  onClick: null,
+  type: 'button',
+  disabled: false
+}
+
+export default Button
diff --git a/pages/index.js b/pages/index.js
@@ -3,12 +3,14 @@
 import React, { Component } from 'react'
 import Router from 'next/router'
 
-import api from './../services/api'
-
 import Page from './../layouts/page'
 
+import Button from './../components/button'
+
 import { colors, typography, phone } from './../theme'
 
+import api from './../services/api'
+
 class Home extends Component {
   constructor() {
     super()
@@ -45,8 +47,13 @@ class Home extends Component {
           this.setState({ requesting: false })
           Router.push(`/secret?uid=${uid}`)
         })
-        .catch(err => console.log(err))
+        .catch(err => {
+          this.setState({ requesting: false })
+          console.log(err)
+        })
     }
+
+    this.setState({ requesting: false })
   }
 
   addPassphrase() {
@@ -55,7 +62,6 @@ class Home extends Component {
 
   render() {
     const { message, hasPassphrase, passphrase, requesting } = this.state
-
     const passphraseInput = hasPassphrase ? (
       <fieldset>
         <input
@@ -142,9 +148,9 @@ class Home extends Component {
 
           {passphraseInput}
 
-          <button type="submit" disabled={requesting}>
+          <Button type="submit" disabled={requesting}>
             Create
-          </button>
+          </Button>
         </form>
 
         <style jsx>{`
@@ -190,43 +196,10 @@ class Home extends Component {
             border-color: ${colors.white};
           }
 
-          button {
-            display: inline-block;
-            background-color: ${colors.white};
-            color: ${colors.black};
-            border: 0;
-            border-radius: 0;
-            padding: 12px 80px;
-            font-size: ${typography.f10};
-            text-transform: uppercase;
-            font-weight: ${typography.bold};
-            margin: 30px auto;
-            text-align: center;
-            cursor: pointer;
-            outline: none;
-            letter-spacing: 2px;
-            transition: all 200ms;
-          }
-
-          button:focus,
-          button:hover {
-            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
-          }
-
-          button[disabled] {
-            background-color: ${colors.gray};
-            cursor: default;
-          }
-
           @media ${phone} {
             form {
               max-width: 100%;
             }
-
-            button {
-              width: 100%;
-              display: block;
-            }
           }
         `}</style>
       </Page>

diff --git a/pages/s/index.js b/pages/s/index.js
@@ -6,6 +6,7 @@ import parser from 'ua-parser-js'
 
 import Page from './../../layouts/page'
 
+import Button from './../../components/button'
 import { colors, typography } from './../../theme'
 
 import api from './../../services/api'
@@ -96,9 +97,9 @@ class S extends Component {
             autoFocus={true}
           />
           <div>
-            <button type="submit" disabled={fetching}>
+            <Button type="submit" disabled={fetching}>
               Reveal the secret
-            </button>
+            </Button>
           </div>
         </form>
         <style jsx>{`
@@ -143,34 +144,6 @@ class S extends Component {
           input:focus {
             border-color: ${colors.white};
           }
-
-          button {
-            display: inline-block;
-            background-color: ${colors.white};
-            color: ${colors.black};
-            border: 0;
-            border-radius: 0;
-            padding: 12px 80px;
-            font-size: ${typography.f10};
-            text-transform: uppercase;
-            font-weight: ${typography.bold};
-            margin: 30px auto;
-            text-align: center;
-            cursor: pointer;
-            outline: none;
-            letter-spacing: 2px;
-            transition: all 200ms;
-          }
-
-          button:focus,
-          button:hover {
-            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
-          }
-
-          button[disabled] {
-            background-color: ${colors.gray};
-            cursor: default;
-          }
         `}</style>
       </div>
     ) : (
@@ -226,6 +199,7 @@ class S extends Component {
             cursor: pointer;
             transition: all 0.2s;
           }
+
           span:hover {
             color: ${colors.white};
             border-color: ${colors.white};

diff --git a/pages/secret.js b/pages/secret.js
@@ -5,6 +5,8 @@ import copy from 'copy-text-to-clipboard'
 
 import Page from './../layouts/page'
 
+import Button from './../components/button'
+
 import { colors, typography, phone } from './../theme'
 
 class Secret extends Component {
@@ -37,7 +39,7 @@ class Secret extends Component {
           <h1>{`${process.env.APP}/s/${uid}`}</h1>
 
           <p>
-            <button onClick={this.copyUrl}>{txt}</button>
+            <Button onClick={this.copyUrl}>{txt}</Button>
           </p>
         </section>
 
@@ -85,29 +87,6 @@ class Secret extends Component {
             line-height: 24px;
           }
 
-          button {
-            display: inline-block;
-            background-color: ${colors.white};
-            color: ${colors.black};
-            border: 0;
-            border-radius: 0;
-            padding: 12px 50px;
-            font-size: ${typography.f10};
-            text-transform: uppercase;
-            font-weight: ${typography.bold};
-            margin-left: auto;
-            margin-right: auto;
-            text-align: center;
-            cursor: pointer;
-            outline: none;
-            letter-spacing: 2px;
-            transition: all 200ms;
-          }
-
-          button:focus {
-            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
-          }
-
           @media ${phone} {
             h1 {
               max-width: 100%;