fix(form): refactor form

app/reducers/form.js

@@ -4,6 +4,7 @@ export const SET_FORM = 'SET_FORM'
 export const SET_AMOUNT = 'SET_AMOUNT'
 export const SET_MESSAGE = 'SET_MESSAGE'
 export const SET_PUBKEY = 'SET_PUBKEY'
+export const SET_PAYMENT_REQUEST = 'SET_PAYMENT_REQUEST'
 export const RESET_FORM = 'RESET_FORM'
 
 // ------------------------------------
@@ -38,6 +39,13 @@ export function setPubkey(pubkey) {
   }
 }
 
+export function setPaymentRequest(payment_request) {
+  return {
+    type: SET_PAYMENT_REQUEST,
+    payment_request
+  }
+}
+
 export function resetForm() {
   return {
     type: RESET_FORM
@@ -52,6 +60,7 @@ const ACTION_HANDLERS = {
   [SET_AMOUNT]: (state, { amount }) => ({ ...state, amount }),
   [SET_MESSAGE]: (state, { message }) => ({ ...state, message }),
   [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey }),
+  [SET_PAYMENT_REQUEST]: (state, { payment_request }) => ({ ...state, payment_request }),
   [RESET_FORM]: () => (initialState)
 }
 
@@ -63,7 +72,8 @@ const initialState = {
   formType: 'pay',
   amount: '0',
   message: '',
-  pubkey: ''
+  pubkey: '',
+  payment_request: ''
 }
 
 export default function formReducer(state = initialState, action) {

app/reducers/invoice.js

@@ -60,12 +60,13 @@ export const fetchInvoice = (r_hash) => async (dispatch) => {
   dispatch(getInvoice())
   const invoice = await callApi(`invoice/${r_hash}`, 'get')
 
-  invoice ?
+  if (invoice) {
     dispatch(receiveInvoice(invoice.data))
-  :
+    return true
+  } else {
     dispatch(invoicesFailed())
-
-  return invoice
+    return false
+  }
 }
 
 export const fetchInvoices = () => async (dispatch) => {

app/reducers/payment.js

@@ -56,11 +56,12 @@ export const fetchPayments = () => async (dispatch) => {
   return payments
 }
 
-export const makePayment = (dest_string, btc_amount) => async (dispatch) => {
-  const amt = btc.btcToSatoshis(btc_amount)
-
+export const payInvoice = (payment_request) => async (dispatch) => {
   dispatch(sendPayment())
-  const payment = await callApi('payments', 'post', { dest_string, amt })
+  const payment = await callApi('sendpayment', 'post', { payment_request })
+  console.log('payment: ', payment)
+
+  return 
   payment ?
     dispatch(paymentSuccessfull(payment))
   :
@@ -75,7 +76,7 @@ export const makePayment = (dest_string, btc_amount) => async (dispatch) => {
 // ------------------------------------
 const ACTION_HANDLERS = {
   [GET_PAYMENTS]: (state) => ({ ...state, paymentLoading: true }),
-  [RECEIVE_PAYMENTS]: (state, { payments }) => ({ ...state, paymentLoading: false, payments }),
+  [RECEIVE_PAYMENTS]: (state, { payments }) => ({ ...state, paymentLoading: false, payments })
 }
 
 // ------------------------------------

app/routes/app/components/App.js

@@ -20,9 +20,9 @@ class App extends Component {
       setAmount,
       setMessage,
       setPubkey,
+      setPaymentRequest,
       payment,
       peers,
-      fetchPeers,
       setCurrency,
       setForm,
       createInvoice,
@@ -37,8 +37,8 @@ class App extends Component {
           setAmount={setAmount}
           setMessage={setMessage}
           setPubkey={setPubkey}
+          setPaymentRequest={setPaymentRequest}
           payment={payment}
-          fetchPeers={fetchPeers}
           peers={peers}
           ticker={ticker}
           form={form}

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

@@ -5,17 +5,13 @@ 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, amount, message, pubkey },
+      form: { formType, amount, message, pubkey, payment_request },
       setAmount,
       setMessage,
       setPubkey,
-      peers: { peers },
+      setPaymentRequest,
       ticker: { currency, btcTicker },
       isOpen,
       close,
@@ -24,7 +20,9 @@ class Form extends Component {
 
     const requestClicked = () => {
       createInvoice(amount, message, currency, btcTicker.price_usd)
-      close()
+      .then(success => {
+        if (success) { close() }
+      })
     }
 
     return (
@@ -49,56 +47,30 @@ class Form extends Component {
                 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)}
+                ref={input => input && input.focus()}
               />
             </section>
             {
               formType === 'pay' ?
                 <section className={styles.inputContainer}>
-                  <label>To:</label>
+                  <label>Request:</label>
                   <input
                     type='text'
-                    placeholder='Public key'
-                    value={pubkey}
-                    onChange={(e) => setPubkey(e.target.value)}
+                    placeholder='Payment Request'
+                    value={payment_request}
+                    onChange={(e) => setPaymentRequest(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 className={styles.inputContainer}>
+                  <label>For:</label>
+                  <input
+                    type='text'
+                    placeholder='Dinner, Rent, etc'
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                  />
                 </section>
-              :
-                null
             }
             {
               formType === 'pay' ? 

app/routes/app/containers/AppContainer.js

@@ -3,20 +3,19 @@ import App from '../components/App'
 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 { createInvoice } from '../../../reducers/invoice'
-import { setAmount, setMessage, setPubkey } from '../../../reducers/form'
+import { setAmount, setMessage, setPubkey, setPaymentRequest } from '../../../reducers/form'
 
 const mapDispatchToProps = {
 	fetchTicker,
 	setCurrency,
 	fetchBalance,
 	fetchInfo,
-	fetchPeers,
 	setAmount,
 	setMessage,
 	setPubkey,
+	setPaymentRequest,
 	setForm,
 	createInvoice
 }
@@ -25,7 +24,6 @@ const mapStateToProps = (state) => ({
 	ticker: state.ticker,
 	balance: state.balance,
 	payment: state.payment,
-	peers: state.peers,
 	form: state.form
 })