feature(form): dynamic display on form for formType

app/reducers/form.js

@@ -5,11 +5,11 @@ export const SET_FORM = 'SET_FORM'
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function setForm({ modalOpen, type }) {
+export function setForm({ modalOpen, formType }) {
   return {
-    type: TOGGLE_MODAL,
+    type: SET_FORM,
     modalOpen,
-    type
+    formType
   }
 }
 
@@ -17,7 +17,7 @@ export function setForm({ modalOpen, type }) {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_FORM]: (state, { modalOpen, type }) => ({ ...state, modalOpen, type })
+  [SET_FORM]: (state, { modalOpen, formType }) => ({ ...state, modalOpen, formType })
 }
 
 // ------------------------------------
@@ -25,7 +25,7 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   modalOpen: false,
-  type: 'create'
+  formType: 'pay'
 }
 
 export default function formReducer(state = initialState, action) {

app/reducers/index.js

@@ -6,6 +6,7 @@ import info from './info'
 import balance from './balance'
 import payment from './payment'
 import peers from './peers'
+import form from './form'
 import activity from './activity'
 
 const rootReducer = combineReducers({
@@ -15,6 +16,7 @@ const rootReducer = combineReducers({
   balance,
   payment,
   peers,
+  form,
   activity
 })
 

app/routes/app/components/App.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react'
-import Form from './components/Form.js'
+import Form from './components/Form'
 import Nav from './components/Nav.js'
 import styles from './App.scss'
 
@@ -23,6 +23,7 @@ class App extends Component {
     const {
       ticker,
       balance,
+      form,
       setAmount,
       setMessage,
       setPubkey,
@@ -30,14 +31,15 @@ class App extends Component {
       peers,
       fetchPeers,
       setCurrency,
+      setForm,
       children
     } = this.props
 
     return (
       <div>
         <Form
-          isOpen={this.state.form}
-          close={() => this.setState({ form: false })}
+          isOpen={form.modalOpen}
+          close={() => setForm({ modalOpen: false })}
           setAmount={setAmount}
           setMessage={setMessage}
           setPubkey={setPubkey}
@@ -45,12 +47,13 @@ class App extends Component {
           fetchPeers={fetchPeers}
           peers={peers}
           ticker={ticker}
+          form={form}
         />
         <Nav 
           ticker={ticker}
           balance={balance}
           setCurrency={setCurrency}
-          formClicked={(type) => this.setState({ form: true })} 
+          formClicked={(formType) => setForm({ modalOpen: true, formType })} 
         />
         <div className={styles.content}>
           {children}

app/routes/app/components/components/Form.js

@@ -1,100 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-import { FaDollar, FaBitcoin } from 'react-icons/lib/fa'
-import { MdArrowBack, MdClose } from 'react-icons/lib/md'
-import styles from './Form.scss'
-
-class Form extends Component {
-  componentWillMount() {
-    this.props.fetchPeers()
-  }
-
-  render() {
-    const { 
-      setAmount,
-      setMessage,
-      setPubkey,
-      payment: { amount, message, pubkey },
-      peers: { peers },
-      ticker: { currency },
-      isOpen,
-      close
-    } = this.props
-
-    return (
-      <div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}>
-        <div className={styles.container}>
-          <div className={styles.esc} onClick={close}>
-            <MdClose />
-          </div>
-          <div className={styles.content}>
-            <section className={styles.amountContainer}>
-              <label>
-                {
-                  currency === 'btc' ?
-                    <FaBitcoin />
-                  :
-                    <FaDollar />
-                }
-              </label>
-              <input
-                type='text'
-                size=''
-                style={{ width: `${(amount.length * 20) + 10}%`, fontSize: `${190 - (amount.length ** 2)}px` }}
-                value={amount}
-                onChange={(e) => setAmount(e.target.value)}
-              />
-            </section>
-            <section className={styles.inputContainer}>
-              <label>For:</label>
-              <input
-                type='text'
-                placeholder='Dinner, Rent, etc'
-                value={message}
-                onChange={(e) => setMessage(e.target.value)}
-              />
-            </section>
-            <section className={styles.inputContainer}>
-              <label>To:</label>
-              <input
-                type='text'
-                placeholder='Public key'
-                value={pubkey}
-                onChange={(e) => setPubkey(e.target.value)}
-              />
-            </section>
-            <section className={styles.peersContainer}>
-              {
-                peers.length ? 
-                  <ul className={styles.peers}>
-                    <h4>Connected Peers</h4>
-                    {
-                      peers.map(peer => {
-                        return(
-                          <li key={peer.pub_key} className={styles.peer} onClick={() => setPubkey(peer.pub_key)}>
-                            <p className={styles.address}>{peer.address}</p>
-                            <p className={styles.pubkey}>{peer.pub_key}</p>
-                            <MdArrowBack />
-                          </li>
-                        )
-                      })
-                    }
-                  </ul>
-                :
-                  null
-              }
-            </section>
-            <section className={styles.buttonGroup}>
-              <div className={styles.button}>Pay</div>
-              <div className={styles.button}>Request</div>
-            </section>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-Form.propTypes = {}
-
-export default Form

app/routes/app/components/components/Form/Form.js

@@ -0,0 +1,117 @@
+// @flow
+import React, { Component } from 'react'
+import { FaDollar, FaBitcoin } from 'react-icons/lib/fa'
+import { MdArrowBack, MdClose } from 'react-icons/lib/md'
+import styles from './Form.scss'
+
+class Form extends Component {
+  componentWillMount() {
+    this.props.fetchPeers()
+  }
+
+  render() {
+    const { 
+      form: { formType },
+      setAmount,
+      setMessage,
+      setPubkey,
+      payment: { amount, message, pubkey },
+      peers: { peers },
+      ticker: { currency },
+      isOpen,
+      close
+    } = this.props
+
+    return (
+      <div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}>
+        <div className={styles.container}>
+          <div className={styles.esc} onClick={close}>
+            <MdClose />
+          </div>
+          <div className={styles.content}>
+            <section className={styles.amountContainer}>
+              <label>
+                {
+                  currency === 'btc' ?
+                    <FaBitcoin />
+                  :
+                    <FaDollar />
+                }
+              </label>
+              <input
+                type='text'
+                size=''
+                style={{ width: `${(amount.length * 20) + 10}%`, fontSize: `${190 - (amount.length ** 2)}px` }}
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+              />
+            </section>
+            <section className={styles.inputContainer}>
+              <label>For:</label>
+              <input
+                type='text'
+                placeholder='Dinner, Rent, etc'
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+              />
+            </section>
+            {
+              formType === 'pay' ?
+                <section className={styles.inputContainer}>
+                  <label>To:</label>
+                  <input
+                    type='text'
+                    placeholder='Public key'
+                    value={pubkey}
+                    onChange={(e) => setPubkey(e.target.value)}
+                  />
+                </section>
+              :
+                null
+            }
+            {
+              formType === 'pay' ?
+                <section className={styles.peersContainer}>
+                  {
+                    peers.length ? 
+                      <ul className={styles.peers}>
+                        <h4>Connected Peers</h4>
+                        {
+                          peers.map(peer => {
+                            return(
+                              <li key={peer.pub_key} className={styles.peer} onClick={() => setPubkey(peer.pub_key)}>
+                                <p className={styles.address}>{peer.address}</p>
+                                <p className={styles.pubkey}>{peer.pub_key}</p>
+                                <MdArrowBack />
+                              </li>
+                            )
+                          })
+                        }
+                      </ul>
+                    :
+                      null
+                  }
+                </section>
+              :
+                null
+            }
+            {
+              formType === 'pay' ? 
+                <section className={styles.buttonGroup}>
+                  <div className={styles.button}>Pay</div>
+                </section>
+              :
+                <section className={styles.buttonGroup}>
+                  <div className={styles.button}>Request</div>
+                </section>
+            }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Form.propTypes = {}
+
+export default Form

app/routes/app/components/components/Form.scss → app/routes/app/components/components/Form/Form.scss

@@ -199,7 +199,6 @@
 	    font-weight: 500;
 	    padding: 0;
 	    width: 100%;
-	    max-width: 50%;
 	    text-align: center;
 	    line-height: 55px;
 

app/routes/app/components/components/Form/index.js

@@ -0,0 +1,3 @@
+import Form from './Form'
+
+export default Form

app/routes/app/components/components/Nav.js

@@ -9,7 +9,12 @@ import styles from './Nav.scss'
 
 class Nav extends Component {
   render() {
-    const { ticker, balance, setCurrency, formClicked } = this.props
+    const { 
+      ticker,
+      balance,
+      setCurrency,
+      formClicked
+    } = this.props
     return (
       <nav className={styles.nav}>
         <ul className={styles.info}>
@@ -74,8 +79,11 @@ class Nav extends Component {
           </li>
         </ul>  
         <div className={styles.buttons}>
-          <div className={styles.button} onClick={formClicked}>
-            <span>New</span>
+          <div className={styles.button} onClick={() => formClicked('pay')}>
+            <span>Pay</span>
+          </div>
+          <div className={styles.button} onClick={() => formClicked('request')}>
+            <span>Request</span>
           </div>
         </div>
       </nav>

app/routes/app/containers/AppContainer.js

@@ -4,6 +4,7 @@ import { fetchTicker, setCurrency } from '../../../reducers/ticker'
 import { fetchBalance } from '../../../reducers/balance'
 import { fetchInfo } from '../../../reducers/info'
 import { fetchPeers } from '../../../reducers/peers'
+import { setForm } from '../../../reducers/form'
 import { setAmount, setMessage, setPubkey } from '../../../reducers/payment'
 
 const mapDispatchToProps = {
@@ -14,14 +15,16 @@ const mapDispatchToProps = {
 	fetchPeers,
 	setAmount,
 	setMessage,
-	setPubkey
+	setPubkey,
+	setForm
 }
 
 const mapStateToProps = (state) => ({
 	ticker: state.ticker,
 	balance: state.balance,
 	payment: state.payment,
-	peers: state.peers
+	peers: state.peers,
+	form: state.form
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(App)