feature(contacts): editable contact capacity

app/components/Contacts/ContactsForm.js

@@ -5,17 +5,31 @@ import { MdClose } from 'react-icons/lib/md'
 import { FaCircle } from 'react-icons/lib/fa'
 import styles from './ContactsForm.scss'
 
-const ContactsForm = ({
+class ContactsForm extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      editing: false
+    }
+  }
+
+  render() {
+    const {
       contactsform,
       closeContactsForm,
       updateContactFormSearchQuery,
+      updateContactCapacity,
       openChannel,
 
       activeChannelPubkeys,
       nonActiveChannelPubkeys,
       pendingOpenChannelPubkeys,
       filteredNetworkNodes
-}) => {
+    } = this.props
+
+    const { editing } = this.state
+
     const renderRightSide = (node) => {
       if (activeChannelPubkeys.includes(node.pub_key)) {
         return (
@@ -53,13 +67,19 @@ const ContactsForm = ({
         <span
           className={`${styles.connect} hint--left`}
           data-hint='Connect with 0.1 BTC'
-        onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: 0.1 })}
+          onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactsform.contactCapacity })}
         >
           Connect
         </span>
       )
     }
 
+    const inputClicked = () => {
+      if (editing) { return }
+
+      this.setState({ editing: true })
+    }
+
     return (
       <div>
         <ReactModal
@@ -80,7 +100,7 @@ const ContactsForm = ({
             </div>
           </header>
 
-        <div className={styles.form} onKeyPress={event => event.charCode === 13 && console.log('gaaaang')}>
+          <div className={styles.form}>
             <div className={styles.search}>
               <input
                 type='text'
@@ -122,7 +142,15 @@ const ContactsForm = ({
           <footer className={styles.footer}>
             <div>
               <span className={styles.amount}>
-              0.1
+                <input 
+                  type='text'
+                  value={contactsform.contactCapacity}
+                  onChange={event => updateContactCapacity(event.target.value)}
+                  onClick={inputClicked}
+                  onKeyPress={event => event.charCode === 13 && this.setState({ editing: false })}
+                  readOnly={!editing}
+                  style={{ width: `${editing ? 20 : contactsform.contactCapacity.toString().length + 1}%` }}
+                />
               </span>
               <span className={styles.caption}>
                 BTC per contact
@@ -132,8 +160,10 @@ const ContactsForm = ({
         </ReactModal>
       </div>
     )
+  }  
 }
 
+
 ContactsForm.propTypes = {
   
 }

app/components/Contacts/ContactsForm.scss

@@ -122,10 +122,31 @@
 .footer {
   padding: 10px 15px;
   border-top: 1px solid $darkgrey;
+  font-size: 14px;
 
   span {
-    &:nth-child(1) {
+    &.amount {
+      &:hover {
+        input {
+          border: 1px solid $darkgrey;
+          cursor: text;
+        }
+      }
+
+      input {
+        border: 1px solid transparent;
+        padding: 0;
+        outline: 0;
         font-weight: bold;
+        font-size: 14px;
+        line-height: 14px;
+        transition: all 0.25s;
+
+        &.isEditing {
+          width: 100%;
+          border-bottom: 1px solid $darkgrey;
+        }
+      }
     }
 
     &:nth-child(2) {

app/reducers/contactsform.js

@@ -5,7 +5,8 @@ import filter from 'lodash/filter'
 // Initial State
 const initialState = {
   isOpen: false,
-  searchQuery: ''
+  searchQuery: '',
+  contactCapacity: 0.1
 }
 
 // Constants
@@ -15,6 +16,8 @@ export const CLOSE_CONTACTS_FORM = 'CLOSE_CONTACTS_FORM'
 
 export const UPDATE_CONTACT_FORM_SEARCH_QUERY = 'UPDATE_CONTACT_FORM_SEARCH_QUERY'
 
+export const UPDATE_CONTACT_CAPACITY = 'UPDATE_CONTACT_CAPACITY'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -37,6 +40,13 @@ export function updateContactFormSearchQuery(searchQuery) {
   }
 }
 
+export function updateContactCapacity(contactCapacity) {
+  return {
+    type: UPDATE_CONTACT_CAPACITY,
+    contactCapacity
+  }
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
@@ -44,7 +54,9 @@ const ACTION_HANDLERS = {
   [OPEN_CONTACTS_FORM]: state => ({ ...state, isOpen: true }),
   [CLOSE_CONTACTS_FORM]: state => ({ ...state, isOpen: false }),
 
-  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
+  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery }),
+
+  [UPDATE_CONTACT_CAPACITY]: (state, { contactCapacity }) => ({ ...state, contactCapacity })
 }
 
 // ------------------------------------

app/routes/contacts/containers/ContactsContainer.js

@@ -21,6 +21,7 @@ import {
   openContactsForm,
   closeContactsForm,
   updateContactFormSearchQuery,
+  updateContactCapacity,
   contactFormSelectors
 } from 'reducers/contactsform'
 
@@ -30,6 +31,7 @@ const mapDispatchToProps = {
   openContactsForm,
   closeContactsForm,
   updateContactFormSearchQuery,
+  updateContactCapacity,
   openChannel,
   updateChannelSearchQuery,
   toggleFilterPulldown,
@@ -63,6 +65,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   const contactsFormProps = {
     closeContactsForm: dispatchProps.closeContactsForm,
     updateContactFormSearchQuery: dispatchProps.updateContactFormSearchQuery,
+    updateContactCapacity: dispatchProps.updateContactCapacity,
     openChannel: dispatchProps.openChannel,
 
     contactsform: stateProps.contactsform,