From 2c2e63235ef53d5b77b0838d5deaca1af7a62441 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Thu, 4 Jan 2018 14:37:57 -0600
Subject: [PATCH] feature(contacts): add manual form

---
 app/components/Contacts/ContactsForm.js       | 36 ++++++++++++++++---
 app/components/Contacts/ContactsForm.scss     | 36 ++++++++++++++++++-
 app/reducers/contactsform.js                  | 15 ++++++++
 .../contacts/containers/ContactsContainer.js  |  4 ++-
 4 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js
index ed48cb58..e6bbda16 100644
--- a/app/components/Contacts/ContactsForm.js
+++ b/app/components/Contacts/ContactsForm.js
@@ -10,7 +10,8 @@ class ContactsForm extends React.Component {
     super(props)
 
     this.state = {
-      editing: false
+      editing: false,
+      manualFormInput: ''
     }
   }
 
@@ -25,10 +26,11 @@ class ContactsForm extends React.Component {
       activeChannelPubkeys,
       nonActiveChannelPubkeys,
       pendingOpenChannelPubkeys,
-      filteredNetworkNodes
+      filteredNetworkNodes,
+      showManualForm
     } = this.props
 
-    const { editing } = this.state
+    const { editing, manualFormInput } = this.state
 
     const renderRightSide = (node) => {
       if (activeChannelPubkeys.includes(node.pub_key)) {
@@ -67,7 +69,7 @@ class ContactsForm extends React.Component {
         <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 })}
+          onClick={() => openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactCapacity })}
         >
           Connect
         </span>
@@ -80,6 +82,15 @@ class ContactsForm extends React.Component {
       this.setState({ editing: true })
     }
 
+    const manualFormSubmit = () => {
+      if (!manualFormInput.length) { return }
+      if (!manualFormInput.includes('@')) { return }
+
+      const [pubkey, host] = manualFormInput && manualFormInput.split('@')
+
+      openChannel({ pubkey, host, local_amt: contactsform.contactCapacity })
+    }
+
     return (
       <div>
         <ReactModal
@@ -139,6 +150,23 @@ class ContactsForm extends React.Component {
               }
             </ul>
           </div>
+
+          {
+            showManualForm &&
+            <div className={styles.manualForm}>
+              <h2>Hm, looks like we can't see that contact from here. Want to try and manually connect?</h2>
+              <section>
+                <input
+                  type='text'
+                  placeholder='pubkey@host'
+                  value={manualFormInput}
+                  onChange={event => this.setState({ manualFormInput: event.target.value })}
+                />
+                <div className={styles.submit} onClick={manualFormSubmit}>Submit</div>
+              </section>
+            </div>
+          }
+
           <footer className={styles.footer}>
             <div>
               <span className={styles.amount}>
diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss
index 876d936d..0e094442 100644
--- a/app/components/Contacts/ContactsForm.scss
+++ b/app/components/Contacts/ContactsForm.scss
@@ -49,7 +49,7 @@
 
   .networkResults {
     overflow-y: scroll;
-    height: 400px;
+    height: 300px;
     margin-top: 30px;
     padding: 20px 0;
 
@@ -119,6 +119,40 @@
   }
 }
 
+.manualForm {
+  background: $lightgrey;
+  color: $darkestgrey;
+  padding: 30px 15px;
+
+  h2 {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+
+  input {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: $darkestgrey;
+    border-bottom: 1px solid $darkestgrey;
+    padding: 10px 5px;
+    width: 80%;
+  }
+
+  .submit {
+    display: inline-block;
+    vertical-align: middle;
+    width: 15%;
+    margin-left: 2.5%;
+    font-size: 12px;
+
+    &:hover {
+      cursor: pointer;
+      color: $main;
+    }
+  }
+}
+
 .footer {
   padding: 10px 15px;
   border-top: 1px solid $darkgrey;
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index a63ec37f..ca7e9fc6 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -73,6 +73,21 @@ contactFormSelectors.filteredNetworkNodes = createSelector(
   (nodes, searchQuery) => filter(nodes, node => node.alias.includes(searchQuery) || node.pub_key.includes(searchQuery))
 )
 
+contactFormSelectors.showManualForm = createSelector(
+  searchQuerySelector,
+  contactFormSelectors.filteredNetworkNodes,
+  (searchQuery, filteredNetworkNodes) => {
+    if (!searchQuery.length) { return false }
+
+    const connectableNodes = filteredNetworkNodes.filter(node => node.addresses.length > 0)
+    console.log('connectableNodes: ', connectableNodes)
+
+    if (!filteredNetworkNodes.length || !connectableNodes.length) { return true }
+
+    return false
+  }
+)
+
 export { contactFormSelectors }
 
 // ------------------------------------
diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js
index 687b4733..568fa34c 100644
--- a/app/routes/contacts/containers/ContactsContainer.js
+++ b/app/routes/contacts/containers/ContactsContainer.js
@@ -58,7 +58,8 @@ const mapStateToProps = state => ({
   closingPendingChannels: channelsSelectors.closingPendingChannels(state),
   nonActiveFilters: channelsSelectors.nonActiveFilters(state),
 
-  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state)
+  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
+  showManualForm: contactFormSelectors.showManualForm(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
@@ -70,6 +71,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
     contactsform: stateProps.contactsform,
     filteredNetworkNodes: stateProps.filteredNetworkNodes,
+    showManualForm: stateProps.showManualForm,
 
     activeChannelPubkeys: stateProps.activeChannelPubkeys,
     nonActiveChannelPubkeys: stateProps.nonActiveChannelPubkeys,