From c81e9766e57b4816d03ae3fc3dc63cf7bcbed30b Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Fri, 5 Jan 2018 13:18:05 -0600 Subject: [PATCH] feature(contacts): contact modal --- app/components/Contacts/Contact.scss | 9 +- app/components/Contacts/ContactModal.js | 106 +++++++++ app/components/Contacts/ContactModal.scss | 100 +++++++++ app/components/Contacts/ContactsForm.js | 11 +- app/components/Contacts/ContactsForm.scss | 6 + app/components/Contacts/OfflineContact.js | 4 +- app/components/Contacts/OnlineContact.js | 4 +- app/components/ModalRoot/ModalRoot.js | 2 +- app/components/Nav/Nav.js | 13 -- app/reducers/channels.js | 28 ++- app/routes.js | 4 - app/routes/channels/components/Channels.js | 205 ------------------ app/routes/channels/components/Channels.scss | 178 --------------- .../channels/containers/ChannelsContainer.js | 104 --------- app/routes/channels/index.js | 3 - app/routes/contacts/components/Contacts.js | 17 +- app/routes/contacts/components/Contacts.scss | 2 +- .../contacts/containers/ContactsContainer.js | 12 + app/routes/peers/components/Peers.js | 137 ------------ app/routes/peers/components/Peers.scss | 81 ------- app/routes/peers/containers/PeersContainer.js | 52 ----- app/routes/peers/index.js | 3 - 22 files changed, 281 insertions(+), 800 deletions(-) create mode 100644 app/components/Contacts/ContactModal.js create mode 100644 app/components/Contacts/ContactModal.scss delete mode 100644 app/routes/channels/components/Channels.js delete mode 100644 app/routes/channels/components/Channels.scss delete mode 100644 app/routes/channels/containers/ChannelsContainer.js delete mode 100644 app/routes/channels/index.js delete mode 100644 app/routes/peers/components/Peers.js delete mode 100644 app/routes/peers/components/Peers.scss delete mode 100644 app/routes/peers/containers/PeersContainer.js delete mode 100644 app/routes/peers/index.js diff --git a/app/components/Contacts/Contact.scss b/app/components/Contacts/Contact.scss index 749dac7e..1027f3f3 100644 --- a/app/components/Contacts/Contact.scss +++ b/app/components/Contacts/Contact.scss @@ -4,8 +4,9 @@ display: flex; flex-direction: row; justify-content: space-between; - padding: 30px 0; - border-bottom: 1px solid $traditionalgrey; + padding: 30px 60px 60px 60px; + cursor: pointer; + transition: all 0.25s; &.loading { .info { @@ -13,6 +14,10 @@ } } + &:hover { + background: $lightgrey; + } + .limits { display: flex; flex-direction: row; diff --git a/app/components/Contacts/ContactModal.js b/app/components/Contacts/ContactModal.js new file mode 100644 index 00000000..6245fa10 --- /dev/null +++ b/app/components/Contacts/ContactModal.js @@ -0,0 +1,106 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import ReactModal from 'react-modal' +import { FaClose, FaCircle } from 'react-icons/lib/fa' + +import { btc } from 'utils' + +import styles from './ContactModal.scss' + +const ContactModal = ({ isOpen, channel, closeContactModal }) => { + console.log('channel: ', channel) + const customStyles = { + overlay: { + cursor: 'pointer', + overflowY: 'auto' + }, + content: { + top: 'auto', + left: '20%', + right: '0', + bottom: 'auto', + width: '40%', + margin: '50px auto', + borderRadius: 'none', + padding: '0' + } + } + + return ( + document.body} + style={customStyles} + > + { + channel && +
+
+
+ + + { + channel.active ? + 'Online' + : + 'Offline' + } + +
+
+ + + +
+
+ +
+

{channel.remote_pubkey}

+
+ +
+
+

Can Pay

+
+
+
+ {btc.satoshisToBtc(channel.local_balance)} BTC +
+ +
+

Can Receive

+
+
+
+ {btc.satoshisToBtc(channel.remote_balance)} BTC +
+ +
+

Total Bitcoin Sent

+

{btc.satoshisToBtc(channel.total_satoshis_sent)} BTC

+
+
+

Total Bitcoin Received

+

{btc.satoshisToBtc(channel.total_satoshis_received)} BTC

+
+
+ +
+
Remove
+
+
+ } + + ) +} + +ContactModal.propTypes = { + +} + +export default ContactModal diff --git a/app/components/Contacts/ContactModal.scss b/app/components/Contacts/ContactModal.scss new file mode 100644 index 00000000..a9ca45bc --- /dev/null +++ b/app/components/Contacts/ContactModal.scss @@ -0,0 +1,100 @@ +@import '../../variables.scss'; + +.header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + background: $lightgrey; + margin-bottom: 30px; + padding: 20px; + + .status { + font-size: 12px; + color: $darkestgrey; + + &.online { + color: $green; + } + + span { + margin-left: 5px; + } + } + + .closeContainer { + background: $lightgrey; + line-height: 12px; + + span { + color: $darkestgrey; + cursor: pointer; + } + } +} + +.container section { + margin-bottom: 30px; + padding: 0 20px; + + .pay, .receive, .sent, .received { + margin: 40px 0; + } +} + +.title { + + h2 { + color: $secondary; + font-weight: bold; + font-size: 12px; + } + +} + +.stats { + + h4 { + color: $secondary; + font-weight: bold; + font-size: 12px; + } + + span { + font-size: 14px; + } + + p { + margin-top: 10px; + color: $darkestgrey; + } + + .meter, .amount { + height: 10px; + border-radius: 10px; + } + + .meter { + background: $darkgrey; + width: 100%; + margin: 10px 0; + } + + .amount { + background: $darkestgrey; + } +} + +.container footer { + padding: 20px; + text-align: center; + + div { + color: $red; + font-size: 18px; + + &:hover { + color: lighten($red, 10%); + } + } +} diff --git a/app/components/Contacts/ContactsForm.js b/app/components/Contacts/ContactsForm.js index 2d5f536b..c945664c 100644 --- a/app/components/Contacts/ContactsForm.js +++ b/app/components/Contacts/ContactsForm.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import ReactModal from 'react-modal' import { MdClose } from 'react-icons/lib/md' -import { FaCircle } from 'react-icons/lib/fa' +import { FaCircle, FaQuestionCircle } from 'react-icons/lib/fa' import styles from './ContactsForm.scss' class ContactsForm extends React.Component { @@ -183,6 +183,9 @@ class ContactsForm extends React.Component { diff --git a/app/components/Contacts/ContactsForm.scss b/app/components/Contacts/ContactsForm.scss index 1860c1cf..19a6dd4e 100644 --- a/app/components/Contacts/ContactsForm.scss +++ b/app/components/Contacts/ContactsForm.scss @@ -186,6 +186,12 @@ &:nth-child(2) { margin-left: 2px; } + + } + + .caption svg { + font-size: 10px; + color: $darkestgrey; } } diff --git a/app/components/Contacts/OfflineContact.js b/app/components/Contacts/OfflineContact.js index 2c1cdc9a..fec6d975 100644 --- a/app/components/Contacts/OfflineContact.js +++ b/app/components/Contacts/OfflineContact.js @@ -4,8 +4,8 @@ import { FaCircle } from 'react-icons/lib/fa' import { btc } from 'utils' import styles from './Contact.scss' -const OfflineContact = ({ channel }) => ( -
  • +const OfflineContact = ({ channel, openContactModal }) => ( +
  • openContactModal(channel)}>

    diff --git a/app/components/Contacts/OnlineContact.js b/app/components/Contacts/OnlineContact.js index b49cc73a..33eb7766 100644 --- a/app/components/Contacts/OnlineContact.js +++ b/app/components/Contacts/OnlineContact.js @@ -4,8 +4,8 @@ import { FaCircle } from 'react-icons/lib/fa' import { btc } from 'utils' import styles from './Contact.scss' -const OnlineContact = ({ channel }) => ( -

  • +const OnlineContact = ({ channel, openContactModal }) => ( +
  • openContactModal(channel)}>

    diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js index 4e6abae1..5bff88ff 100644 --- a/app/components/ModalRoot/ModalRoot.js +++ b/app/components/ModalRoot/ModalRoot.js @@ -37,7 +37,7 @@ const ModalRoot = ({ modalType, modalProps, hideModal, currentTicker, currency } ModalRoot.propTypes = { modalType: PropTypes.string, - modalProps: PropTypes.object.isRequired, + modalProps: PropTypes.object, hideModal: PropTypes.func.isRequired, currentTicker: PropTypes.object.isRequired, currency: PropTypes.string.isRequired diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js index 76a70ca8..64d26c72 100644 --- a/app/components/Nav/Nav.js +++ b/app/components/Nav/Nav.js @@ -5,7 +5,6 @@ import Isvg from 'react-inlinesvg' import walletIcon from 'icons/wallet.svg' import peersIcon from 'icons/peers.svg' -import channelsIcon from 'icons/channels.svg' import networkIcon from 'icons/globe.svg' import styles from './Nav.scss' @@ -29,18 +28,6 @@ const Nav = ({ openPayForm, openRequestForm }) => ( Contacts

    • - -
  • - - Peers -
    • -     - -
  • - - Channels -
    • -
  • diff --git a/app/reducers/channels.js b/app/reducers/channels.js index d1acbae3..85db6f01 100644 --- a/app/reducers/channels.js +++ b/app/reducers/channels.js @@ -32,6 +32,9 @@ export const CHANGE_CHANNEL_FILTER = 'CHANGE_CHANNEL_FILTER' export const ADD_LOADING_PUBKEY = 'ADD_LOADING_PUBKEY' export const REMOVE_LOADING_PUBKEY = 'REMOVE_LOADING_PUBKEY' +export const OPEN_CONTACT_MODAL = 'OPEN_CONTACT_MODAL' +export const CLOSE_CONTACT_MODAL = 'CLOSE_CONTACT_MODAL' + // ------------------------------------ // Actions // ------------------------------------ @@ -108,6 +111,19 @@ export function removeLoadingPubkey(pubkey) { } } +export function openContactModal(channel) { + return { + type: OPEN_CONTACT_MODAL, + channel + } +} + +export function closeContactModal() { + return { + type: CLOSE_CONTACT_MODAL + } +} + // Send IPC event for peers export const fetchChannels = () => async (dispatch) => { dispatch(getChannels()) @@ -297,7 +313,10 @@ const ACTION_HANDLERS = { [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter }), [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys] }), - [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }) + [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({ ...state, loadingChannelPubkeys: state.loadingChannelPubkeys.filter(loadingPubkey => loadingPubkey !== pubkey) }), + + [OPEN_CONTACT_MODAL]: (state, { channel }) => ({ ...state, contactModal: { isOpen: true, channel } }), + [CLOSE_CONTACT_MODAL]: state => ({ ...state, contactModal: { isOpen: false, channel: null } }) } const channelsSelectors = {} @@ -457,7 +476,12 @@ const initialState = { { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing Contacts' } ], - loadingChannelPubkeys: [] + loadingChannelPubkeys: [], + + contactModal: { + isOpen: false, + channel: null + } } export default function channelsReducer(state = initialState, action) { diff --git a/app/routes.js b/app/routes.js index 04e4af59..bd62973d 100644 --- a/app/routes.js +++ b/app/routes.js @@ -4,15 +4,11 @@ import { Switch, Route } from 'react-router' import App from './routes/app' import Activity from './routes/activity' import Contacts from './routes/contacts' -import Peers from './routes/peers' -import Channels from './routes/channels' import Network from './routes/network' export default () => ( - - diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js deleted file mode 100644 index 89a3b326..00000000 --- a/app/routes/channels/components/Channels.js +++ /dev/null @@ -1,205 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa' -import { MdSearch } from 'react-icons/lib/md' - -import OpenPendingChannel from 'components/Channels/OpenPendingChannel' -import ClosedPendingChannel from 'components/Channels/ClosedPendingChannel' -import Channel from 'components/Channels/Channel' -import ChannelForm from 'components/ChannelForm' - -import styles from './Channels.scss' - -class Channels extends Component { - constructor(props) { - super(props) - - this.state = { - refreshing: false - } - } - - componentWillMount() { - const { fetchChannels, fetchPeers } = this.props - - fetchChannels() - fetchPeers() - } - - render() { - const { - fetchChannels, - closeChannel, - channels: { - searchQuery, - filterPulldown, - filter, - viewType - }, - - nonActiveFilters, - toggleFilterPulldown, - changeFilter, - - currentChannels, - updateChannelSearchQuery, - - openChannelForm, - - ticker, - currentTicker, - - channelFormProps - } = this.props - - const refreshClicked = () => { - // turn the spinner on - this.setState({ refreshing: true }) - - // store event in icon so we dont get an error when react clears it - const icon = this.repeat.childNodes - - // fetch peers - fetchChannels() - - // wait for the svg to appear as child - const svgTimeout = setTimeout(() => { - if (icon[0].tagName === 'svg') { - // spin icon for 1 sec - icon[0].style.animation = 'spin 1000ms linear 1' - clearTimeout(svgTimeout) - } - }, 1) - - // clear animation after the second so we can reuse it - const refreshTimeout = setTimeout(() => { - icon[0].style.animation = '' - this.setState({ refreshing: false }) - clearTimeout(refreshTimeout) - }, 1000) - } - - return ( -
    - - -
    -
    -
    -

    Channels

    -
    -
    -
    -
    - Create new channel -
    -
    -
    - -
    - - updateChannelSearchQuery(event.target.value)} - className={`${styles.text} ${styles.input}`} - placeholder='Search channels by funding transaction or remote public key' - type='text' - id='channelSearch' - /> -
    - -
    -
    -

    - {filter.name} -

    -
      - { - nonActiveFilters.map(f => ( -
    • changeFilter(f)}> - {f.name} -
      • - )) - } -
    -
    -
    - { this.repeat = ref }}> - { - this.state.refreshing ? - - : - 'Refresh' - } - -
    -
    - -
    -
      - { - currentChannels.map((channel, index) => { - if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) { - return ( - - ) - } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) { - return ( - - ) - } - return ( - - ) - }) - } -
    -
    -
    - ) - } -} - -Channels.propTypes = { - fetchChannels: PropTypes.func.isRequired, - - channels: PropTypes.object.isRequired, - currentChannels: PropTypes.array.isRequired, - nonActiveFilters: PropTypes.array.isRequired, - - updateChannelSearchQuery: PropTypes.func.isRequired, - setCurrentChannel: PropTypes.func.isRequired, - openChannelForm: PropTypes.func.isRequired, - closeChannel: PropTypes.func.isRequired, - toggleFilterPulldown: PropTypes.func.isRequired, - changeFilter: PropTypes.func.isRequired, - fetchPeers: PropTypes.func.isRequired, - - ticker: PropTypes.object.isRequired, - currentTicker: PropTypes.object.isRequired, - - channelFormProps: PropTypes.object.isRequired -} - -export default Channels diff --git a/app/routes/channels/components/Channels.scss b/app/routes/channels/components/Channels.scss deleted file mode 100644 index f70a37c6..00000000 --- a/app/routes/channels/components/Channels.scss +++ /dev/null @@ -1,178 +0,0 @@ -@import '../../../variables.scss'; - -.container.graphview { - background: $black; -} - -.search { - height: 55px; - padding: 2px 25px; - border-top: 1px solid $darkgrey; - border-bottom: 1px solid $darkgrey; - background: $white; - - .input { - display: inline-block; - vertical-align: top; - height: 100%; - } - - .label { - width: 5%; - line-height: 50px; - font-size: 20px; - text-align: center; - cursor: pointer; - } - - .text { - width: 95%; - outline: 0; - padding: 0; - border: 0; - border-radius: 0; - height: 50px; - font-size: 16px; - } -} - -.header { - display: flex; - flex-direction: row; - justify-content: space-between; - background: $lightgrey; - - .titleContainer { - padding: 20px 40px; - - .left { - padding: 10px 0; - - h1 { - text-transform: uppercase; - font-size: 26px; - margin-right: 5px; - } - } - } - - .createChannelContainer { - padding: 20px 40px; - - .createChannelButton { - font-size: 14px; - margin-left: 10px; - } - } -} - -.filtersContainer { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 20px 40px; - - h2, h2 span { - color: $bluegrey; - cursor: pointer; - transition: color 0.25s; - - &:hover { - color: lighten($bluegrey, 10%); - } - } - - h2, .filters li { - text-transform: uppercase; - letter-spacing: 1.5px; - color: $darkestgrey; - font-size: 14px; - font-weight: 400; - } - - h2 span.pulldown { - color: $main; - } - - .filters { - display: none; - - &.active { - display: block; - position: absolute; - bottom: -100px; - z-index: 10; - - li { - margin: 5px 0; - cursor: pointer; - - &:hover { - color: $main; - } - } - } - } - - .refreshContainer { - text-align: right; - cursor: pointer; - - .refresh { - text-decoration: underline; - - svg { - font-size: 12px; - } - } - } -} - - -.layoutsContainer { - padding: 40px; - - span { - font-size: 30px; - color: $grey; - cursor: pointer; - transition: all 0.25s; - - &:nth-child(1) { - margin-right: 20px; - } - - &:hover { - color: $darkestgrey; - } - - &.active { - color: $darkestgrey; - } - } -} - -.createChannelContainer { - padding: 40px; - - .newChannelButton { - font-size: 14px; - } -} - -.channels { - padding: 10px 40px 40px 40px; - transition: opacity 0.25s; - - &.fade { - opacity: 0.05; - } - - .cardsContainer { - display: flex; - justify-content: center; - flex-wrap: wrap; - box-sizing: border-box; - } -} diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js deleted file mode 100644 index 5aeb8215..00000000 --- a/app/routes/channels/containers/ChannelsContainer.js +++ /dev/null @@ -1,104 +0,0 @@ -import { withRouter } from 'react-router' -import { connect } from 'react-redux' - -import { - fetchChannels, - openChannel, - closeChannel, - updateChannelSearchQuery, - setViewType, - currentChannels, - - toggleFilterPulldown, - changeFilter, - - channelsSelectors -} from 'reducers/channels' - -import { - openChannelForm, - changeStep, - setNodeKey, - setLocalAmount, - setPushAmount, - closeChannelForm, - channelFormSelectors -} from 'reducers/channelform' - -import { fetchPeers } from 'reducers/peers' - -import { tickerSelectors } from 'reducers/ticker' - -import { fetchDescribeNetwork, setCurrentChannel } from '../../../reducers/network' - -import Channels from '../components/Channels' - -const mapDispatchToProps = { - fetchChannels, - openChannel, - closeChannel, - updateChannelSearchQuery, - setViewType, - toggleFilterPulldown, - changeFilter, - - openChannelForm, - closeChannelForm, - setNodeKey, - setLocalAmount, - setPushAmount, - changeStep, - - fetchPeers, - - fetchDescribeNetwork, - setCurrentChannel -} - -const mapStateToProps = state => ({ - channels: state.channels, - openChannels: state.channels.channels, - channelform: state.channelform, - peers: state.peers, - ticker: state.ticker, - network: state.network, - identity_pubkey: state.info.data.identity_pubkey, - - currentChannels: currentChannels(state), - activeChanIds: channelsSelectors.activeChanIds(state), - nonActiveFilters: channelsSelectors.nonActiveFilters(state), - activeChannels: channelsSelectors.activeChannels(state), - - currentTicker: tickerSelectors.currentTicker(state), - - channelFormHeader: channelFormSelectors.channelFormHeader(state), - channelFormProgress: channelFormSelectors.channelFormProgress(state), - stepTwoIsValid: channelFormSelectors.stepTwoIsValid(state) -}) - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const channelFormProps = { - openChannel: dispatchProps.openChannel, - closeChannelForm: dispatchProps.closeChannelForm, - changeStep: dispatchProps.changeStep, - setNodeKey: dispatchProps.setNodeKey, - setLocalAmount: dispatchProps.setLocalAmount, - setPushAmount: dispatchProps.setPushAmount, - - channelform: stateProps.channelform, - channelFormHeader: stateProps.channelFormHeader, - channelFormProgress: stateProps.channelFormProgress, - stepTwoIsValid: stateProps.stepTwoIsValid, - peers: stateProps.peers.peers - } - - return { - ...stateProps, - ...dispatchProps, - ...ownProps, - - channelFormProps - } -} - -export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Channels)) diff --git a/app/routes/channels/index.js b/app/routes/channels/index.js deleted file mode 100644 index b9ed6125..00000000 --- a/app/routes/channels/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ChannelsContainer from './containers/ChannelsContainer' - -export default ChannelsContainer diff --git a/app/routes/contacts/components/Contacts.js b/app/routes/contacts/components/Contacts.js index f8b5e126..914f8ef1 100644 --- a/app/routes/contacts/components/Contacts.js +++ b/app/routes/contacts/components/Contacts.js @@ -7,6 +7,7 @@ import { FaAngleDown, FaRepeat } from 'react-icons/lib/fa' import { btc } from 'utils' +import ContactModal from 'components/Contacts/ContactModal' import ContactsForm from 'components/Contacts/ContactsForm' import OnlineContact from 'components/Contacts/OnlineContact' import PendingContact from 'components/Contacts/PendingContact' @@ -57,7 +58,10 @@ class Contacts extends Component { nonActiveFilters, openContactsForm, + openContactModal, + closeContactModal, + contactModalProps, contactsFormProps, peers @@ -92,6 +96,7 @@ class Contacts extends Component { return (
    +
    @@ -151,13 +156,7 @@ class Contacts extends Component {
      { - loadingChannelPubkeys.map(pubkey => { - console.log('pubkey: ', pubkey) - - return ( - - ) - }) + loadingChannelPubkeys.map(pubkey => ) } { @@ -167,9 +166,9 @@ class Contacts extends Component { } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) { return } else if (channel.active) { - return + return } else if (!channel.active) { - return + return } }) } diff --git a/app/routes/contacts/components/Contacts.scss b/app/routes/contacts/components/Contacts.scss index b7d29809..5440ef3e 100644 --- a/app/routes/contacts/components/Contacts.scss +++ b/app/routes/contacts/components/Contacts.scss @@ -162,7 +162,7 @@ } .friends { - padding: 10px 60px 60px 60px; + padding: 10px 0 60px 0; opacity: 1; transition: all 0.25s; diff --git a/app/routes/contacts/containers/ContactsContainer.js b/app/routes/contacts/containers/ContactsContainer.js index e7a4bbf1..6e61770e 100644 --- a/app/routes/contacts/containers/ContactsContainer.js +++ b/app/routes/contacts/containers/ContactsContainer.js @@ -8,6 +8,8 @@ import { updateChannelSearchQuery, toggleFilterPulldown, changeFilter, + openContactModal, + closeContactModal, currentChannels, channelsSelectors @@ -30,6 +32,8 @@ import Contacts from '../components/Contacts' const mapDispatchToProps = { openContactsForm, closeContactsForm, + openContactModal, + closeContactModal, updateContactFormSearchQuery, updateContactCapacity, openChannel, @@ -63,6 +67,13 @@ const mapStateToProps = state => ({ }) const mergeProps = (stateProps, dispatchProps, ownProps) => { + const contactModalProps = { + closeContactModal: dispatchProps.closeContactModal, + + isOpen: stateProps.channels.contactModal.isOpen, + channel: stateProps.channels.contactModal.channel + } + const contactsFormProps = { closeContactsForm: dispatchProps.closeContactsForm, updateContactFormSearchQuery: dispatchProps.updateContactFormSearchQuery, @@ -84,6 +95,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { ...dispatchProps, ...ownProps, + contactModalProps, contactsFormProps } } diff --git a/app/routes/peers/components/Peers.js b/app/routes/peers/components/Peers.js deleted file mode 100644 index fa13d1ca..00000000 --- a/app/routes/peers/components/Peers.js +++ /dev/null @@ -1,137 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -import { FaRepeat } from 'react-icons/lib/fa' -import { MdSearch } from 'react-icons/lib/md' - -import PeerForm from 'components/Peers/PeerForm' -import PeerModal from 'components/Peers/PeerModal' -import Peer from 'components/Peers/Peer' - -import styles from './Peers.scss' - -class Peers extends Component { - constructor(props) { - super(props) - - this.state = { - refreshing: false - } - } - - componentWillMount() { - this.props.fetchPeers() - } - - render() { - const { - fetchPeers, - peerFormProps, - setPeerForm, - setPeer, - updateSearchQuery, - disconnectRequest, - - peerModalOpen, - filteredPeers, - peers: { peer, searchQuery } - } = this.props - - const refreshClicked = () => { - // turn the spinner on - this.setState({ refreshing: true }) - - // store event in icon so we dont get an error when react clears it - const icon = this.repeat.childNodes - - // fetch peers - fetchPeers() - - // wait for the svg to appear as child - const svgTimeout = setTimeout(() => { - if (icon[0].tagName === 'svg') { - // spin icon for 1 sec - icon[0].style.animation = 'spin 1000ms linear 1' - clearTimeout(svgTimeout) - } - }, 1) - - // clear animation after the second so we can reuse it - const refreshTimeout = setTimeout(() => { - icon[0].style.animation = '' - this.setState({ refreshing: false }) - clearTimeout(refreshTimeout) - }, 1000) - } - - return ( -
      - - - - -
      -
      -
      -

      Peers

      -
      -
      -
      -
      setPeerForm({ isOpen: true })}> - Add new peer -
      -
      -
      - -
      - - updateSearchQuery(event.target.value)} - className={`${styles.text} ${styles.input}`} - placeholder='Search peers by their node public key or IP address' - type='text' - id='peersSearch' - /> -
      - -
      - { this.repeat = ref }}> - { - this.state.refreshing ? - - : - 'Refresh' - } - -
      - -
      - { - filteredPeers.map(filteredPeer => ) - } -
      -
      - ) - } -} - -Peers.propTypes = { - fetchPeers: PropTypes.func.isRequired, - peerFormProps: PropTypes.object.isRequired, - setPeerForm: PropTypes.func.isRequired, - setPeer: PropTypes.func.isRequired, - updateSearchQuery: PropTypes.func.isRequired, - disconnectRequest: PropTypes.func.isRequired, - - peerModalOpen: PropTypes.bool.isRequired, - filteredPeers: PropTypes.array.isRequired, - peers: PropTypes.shape({ - peer: PropTypes.object, - searchQuery: PropTypes.string - }).isRequired -} - -export default Peers diff --git a/app/routes/peers/components/Peers.scss b/app/routes/peers/components/Peers.scss deleted file mode 100644 index ad152ccd..00000000 --- a/app/routes/peers/components/Peers.scss +++ /dev/null @@ -1,81 +0,0 @@ -@import '../../../variables.scss'; - -.search { - height: 55px; - padding: 2px 25px; - border-top: 1px solid $darkgrey; - border-bottom: 1px solid $darkgrey; - background: $white; - - .input { - display: inline-block; - vertical-align: top; - height: 100%; - } - - .label { - width: 5%; - line-height: 50px; - font-size: 20px; - text-align: center; - cursor: pointer; - } - - .text { - width: 95%; - outline: 0; - padding: 0; - border: 0; - border-radius: 0; - height: 50px; - font-size: 16px; - } -} - -.header { - display: flex; - flex-direction: row; - justify-content: space-between; - background: $lightgrey; - - .titleContainer { - padding: 20px 40px; - - .left { - padding: 10px 0; - - h1 { - text-transform: uppercase; - font-size: 26px; - margin-right: 5px; - } - } - } - - .addPeerContainer { - padding: 20px 40px; - - .newPeerButton { - font-size: 14px; - margin-left: 10px; - } - } -} - -.refreshContainer { - padding: 20px 40px 0 40px; - text-align: right; - cursor: pointer; - - .refresh { - text-decoration: underline; - - svg { - font-size: 12px; - } - } -} - -.peers { - padding: 40px; -} \ No newline at end of file diff --git a/app/routes/peers/containers/PeersContainer.js b/app/routes/peers/containers/PeersContainer.js deleted file mode 100644 index 7fed1220..00000000 --- a/app/routes/peers/containers/PeersContainer.js +++ /dev/null @@ -1,52 +0,0 @@ -import { withRouter } from 'react-router' -import { connect } from 'react-redux' - -import { - fetchPeers, - setPeer, - setPeerForm, - connectRequest, - disconnectRequest, - updateSearchQuery, - - peersSelectors -} from 'reducers/peers' - -import Peers from '../components/Peers' - -const mapDispatchToProps = { - fetchPeers, - setPeer, - peersSelectors, - setPeerForm, - connectRequest, - disconnectRequest, - updateSearchQuery -} - -const mapStateToProps = state => ({ - peers: state.peers, - info: state.info, - - peerModalOpen: peersSelectors.peerModalOpen(state), - filteredPeers: peersSelectors.filteredPeers(state) -}) - -const mergeProps = (stateProps, dispatchProps, ownProps) => { - const peerFormProps = { - setForm: dispatchProps.setPeerForm, - connect: dispatchProps.connectRequest, - - form: stateProps.peers.peerForm - } - - return { - ...stateProps, - ...dispatchProps, - ...ownProps, - - peerFormProps - } -} - -export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Peers)) diff --git a/app/routes/peers/index.js b/app/routes/peers/index.js deleted file mode 100644 index 29643c75..00000000 --- a/app/routes/peers/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import PeersContainer from './containers/PeersContainer' - -export default PeersContainer