diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js index 48056162..ed48cb58 100644 --- 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 ( - - Online - - ) - } +class ContactsForm extends React.Component { + constructor(props) { + super(props) - if (nonActiveChannelPubkeys.includes(node.pub_key)) { - return ( - - Offline - - ) + 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 ( + + Online + + ) + } + + if (nonActiveChannelPubkeys.includes(node.pub_key)) { + return ( + + Offline + + ) + } + + if (pendingOpenChannelPubkeys.includes(node.pub_key)) { + return ( + + Pending + + ) + } + + if (!node.addresses.length) { + return ( + + Private + + ) + } - if (pendingOpenChannelPubkeys.includes(node.pub_key)) { return ( - - Pending + openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: contactsform.contactsform.contactCapacity })} + > + Connect ) } - if (!node.addresses.length) { - return ( - - Private - - ) + const inputClicked = () => { + if (editing) { return } + + this.setState({ editing: true }) } return ( - openChannel({ pubkey: node.pub_key, host: node.addresses[0].addr, local_amt: 0.1 })} - > - Connect - - ) - } +
+ closeContactsForm} + parentSelector={() => document.body} + className={styles.modal} + > +
+
+

Add Contact

+
+
+ +
+
- return ( -
- closeContactsForm} - parentSelector={() => document.body} - className={styles.modal} - > -
-
-

Add Contact

-
-
- -
-
- -
event.charCode === 13 && console.log('gaaaang')}> -
- updateContactFormSearchQuery(event.target.value)} - autoFocus - /> -
+
+
+ updateContactFormSearchQuery(event.target.value)} + autoFocus + /> +
-
    - { - contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => { - return ( -
  • -
    - { - node.alias.length > 0 ? -

    - {node.alias.trim()} - ({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)}) -

    - : -

    - {node.pub_key} -

    - } -
    -
    - {renderRightSide(node)} -
    -
    • - ) - }) - } -
-
-
-
- - 0.1 - - - BTC per contact - +
    + { + contactsform.searchQuery.length > 0 && filteredNetworkNodes.map(node => { + return ( +
  • +
    + { + node.alias.length > 0 ? +

    + {node.alias.trim()} + ({node.pub_key.substr(0, 10)}...{node.pub_key.substr(node.pub_key.length - 10)}) +

    + : +

    + {node.pub_key} +

    + } +
    +
    + {renderRightSide(node)} +
    +
    • + ) + }) + } +
-
- -
- ) + + +
+ ) + } } + ContactsForm.propTypes = { } diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss index 87e02e99..876d936d 100644 --- 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) { diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js index 9cd171b7..a63ec37f 100644 --- 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 }) } // ------------------------------------ diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js index 3b40491c..687b4733 100644 --- 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,