feature(contacts): editable contact capacity

7 years ago · 9a31c68b17
4 changed files with 183 additions and 117 deletions
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@ -5,135 +5,165 @@ import { MdClose } from 'react-icons/lib/md'
 import { FaCircle } from 'react-icons/lib/fa'
 import styles from './ContactsForm.scss'

-const ContactsForm = ({
-  contactsform,
-  closeContactsForm,
-  updateContactFormSearchQuery,
-  openChannel,
-
-  activeChannelPubkeys,
-  nonActiveChannelPubkeys,
-  pendingOpenChannelPubkeys,
-  filteredNetworkNodes
-}) => {
-  const renderRightSide = (node) => {
-    if (activeChannelPubkeys.includes(node.pub_key)) {
-      return (
-        <span className={`${styles.online} ${styles.inactive}`}>
-          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Online</span>
-        </span>
-      )
-    }
+class ContactsForm extends React.Component {
+  constructor(props) {
+    super(props)

-    if (nonActiveChannelPubkeys.includes(node.pub_key)) {
-      return (
-        <span className={`${styles.offline} ${styles.inactive}`}>
-          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Offline</span>
-        </span>
-      )
+    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 (
+          <span className={`${styles.online} ${styles.inactive}`}>
+            <FaCircle style={{ verticalAlign: 'top' }} /> <span>Online</span>
+          </span>
+        )
+      }
+
+      if (nonActiveChannelPubkeys.includes(node.pub_key)) {
+        return (
+          <span className={`${styles.offline} ${styles.inactive}`}>
+            <FaCircle style={{ verticalAlign: 'top' }} /> <span>Offline</span>
+          </span>
+        )
+      }
+
+      if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
+        return (
+          <span className={`${styles.pending} ${styles.inactive}`}>
+            <FaCircle style={{ verticalAlign: 'top' }} /> <span>Pending</span>
+          </span>
+        )
+      }
+
+      if (!node.addresses.length) {
+        return (
+          <span className={`${styles.private} ${styles.inactive}`}>
+            Private
+          </span>
+        )
+      }

-    if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
      return (
-        <span className={`${styles.pending} ${styles.inactive}`}>
-          <FaCircle style={{ verticalAlign: 'top' }} /> <span>Pending</span>
+        <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: contactsform.contactsform.contactCapacity })}
+        >
+          Connect
        </span>
      )
    }

-    if (!node.addresses.length) {
-      return (
-        <span className={`${styles.private} ${styles.inactive}`}>
-          Private
-        </span>
-      )
+    const inputClicked = () => {
+      if (editing) { return }
+
+      this.setState({ editing: true })
    }

    return (
-      <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 })}
-      >
-        Connect
-      </span>
-    )
-  }
+      <div>
+        <ReactModal
+          isOpen={contactsform.isOpen}
+          contentLabel='No Overlay Click Modal'
+          ariaHideApp
+          shouldCloseOnOverlayClick
+          onRequestClose={() => closeContactsForm}
+          parentSelector={() => document.body}
+          className={styles.modal}
+        >
+          <header>
+            <div>
+              <h1>Add Contact</h1>
+            </div>
+            <div onClick={closeContactsForm} className={styles.modalClose}>
+              <MdClose />
+            </div>
+          </header>

-  return (
-    <div>
-      <ReactModal
-        isOpen={contactsform.isOpen}
-        contentLabel='No Overlay Click Modal'
-        ariaHideApp
-        shouldCloseOnOverlayClick
-        onRequestClose={() => closeContactsForm}
-        parentSelector={() => document.body}
-        className={styles.modal}
-      >
-        <header>
-          <div>
-            <h1>Add Contact</h1>
-          </div>
-          <div onClick={closeContactsForm} className={styles.modalClose}>
-            <MdClose />
-          </div>
-        </header>
-
-        <div className={styles.form} onKeyPress={event => event.charCode === 13 && console.log('gaaaang')}>
-          <div className={styles.search}>
-            <input
-              type='text'
-              placeholder='Find contact by alias or pubkey'
-              className={styles.searchInput}
-              value={contactsform.searchQuery}
-              onChange={event => updateContactFormSearchQuery(event.target.value)}
-              autoFocus
-            />
-          </div>
+          <div className={styles.form}>
+            <div className={styles.search}>
+              <input
+                type='text'
+                placeholder='Find contact by alias or pubkey'
+                className={styles.searchInput}
+                value={contactsform.searchQuery}
+                onChange={event => updateContactFormSearchQuery(event.target.value)}
+                autoFocus
+              />
+            </div>

-          <ul className={styles.networkResults}>
-            {
-              contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
-                return (
-                  <li key={node.pub_key}>
-                    <section>
-                      {
-                        node.alias.length > 0 ?  
-                          <h2>
-                            <span>{node.alias.trim()}</span>
-                            <span>({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)})</span>
-                          </h2>
-                          :
-                          <h2>
-                            <span>{node.pub_key}</span>
-                          </h2>
-                      }
-                    </section>
-                    <section>
-                      {renderRightSide(node)}
-                    </section>
-                  </li>
-                )
-              })
-            }
-          </ul>
-        </div>
-        <footer className={styles.footer}>
-          <div>
-            <span className={styles.amount}>
-              0.1
-            </span>
-            <span className={styles.caption}>
-              BTC per contact
-            </span>
+            <ul className={styles.networkResults}>
+              {
+                contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => {
+                  return (
+                    <li key={node.pub_key}>
+                      <section>
+                        {
+                          node.alias.length > 0 ?  
+                            <h2>
+                              <span>{node.alias.trim()}</span>
+                              <span>({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)})</span>
+                            </h2>
+                            :
+                            <h2>
+                              <span>{node.pub_key}</span>
+                            </h2>
+                        }
+                      </section>
+                      <section>
+                        {renderRightSide(node)}
+                      </section>
+                    </li>
+                  )
+                })
+              }
+            </ul>
          </div>
-        </footer>
-      </ReactModal>
-    </div>
-  )
+          <footer className={styles.footer}>
+            <div>
+              <span className={styles.amount}>
+                <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
+              </span>
+            </div>
+          </footer>
+        </ReactModal>
+      </div>
+    )
+  }  
 }

+
 ContactsForm.propTypes = {
  
 }
--- a/app/components/Contacts/ContactsForm.scss
+++ b/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) {
-      font-weight: bold;
+    &.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) {
--- a/app/reducers/contactsform.js
+++ b/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 })
 }

 // ------------------------------------
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/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,