Jack Mallers
7 years ago
22 changed files with 281 additions and 800 deletions
@ -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 ( |
||||
|
<ReactModal |
||||
|
isOpen={isOpen} |
||||
|
contentLabel='No Overlay Click Modal' |
||||
|
ariaHideApp |
||||
|
shouldCloseOnOverlayClick |
||||
|
onRequestClose={closeContactModal} |
||||
|
parentSelector={() => document.body} |
||||
|
style={customStyles} |
||||
|
> |
||||
|
{ |
||||
|
channel && |
||||
|
<div className={styles.container}> |
||||
|
<header className={styles.header}> |
||||
|
<div className={`${styles.status} ${channel.active && styles.online}`}> |
||||
|
<FaCircle style={{ verticalAlign: 'top' }} /> |
||||
|
<span> |
||||
|
{ |
||||
|
channel.active ? |
||||
|
'Online' |
||||
|
: |
||||
|
'Offline' |
||||
|
} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className={styles.closeContainer}> |
||||
|
<span onClick={closeContactModal}> |
||||
|
<FaClose /> |
||||
|
</span> |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
<section className={styles.title}> |
||||
|
<h2>{channel.remote_pubkey}</h2> |
||||
|
</section> |
||||
|
|
||||
|
<section className={styles.stats}> |
||||
|
<div className={styles.pay}> |
||||
|
<h4>Can Pay</h4> |
||||
|
<div className={styles.meter}> |
||||
|
<div className={styles.amount} style={{ width: `${(channel.local_balance / channel.capacity) * 100}%` }} /> |
||||
|
</div> |
||||
|
<span>{btc.satoshisToBtc(channel.local_balance)} BTC</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className={styles.pay}> |
||||
|
<h4>Can Receive</h4> |
||||
|
<div className={styles.meter}> |
||||
|
<div className={styles.amount} style={{ width: `${(channel.remote_balance / channel.capacity) * 100}%` }} /> |
||||
|
</div> |
||||
|
<span>{btc.satoshisToBtc(channel.remote_balance)} BTC</span> |
||||
|
</div> |
||||
|
|
||||
|
<div className={styles.sent}> |
||||
|
<h4>Total Bitcoin Sent</h4> |
||||
|
<p>{btc.satoshisToBtc(channel.total_satoshis_sent)} BTC</p> |
||||
|
</div> |
||||
|
<div className={styles.received}> |
||||
|
<h4>Total Bitcoin Received</h4> |
||||
|
<p>{btc.satoshisToBtc(channel.total_satoshis_received)} BTC</p> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<footer> |
||||
|
<div>Remove</div> |
||||
|
</footer> |
||||
|
</div> |
||||
|
} |
||||
|
</ReactModal> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
ContactModal.propTypes = { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
export default ContactModal |
||||
@ -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%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -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 ( |
|
||||
<div className={`${styles.container} ${viewType === 1 && styles.graphview}`}> |
|
||||
<ChannelForm {...channelFormProps} /> |
|
||||
|
|
||||
<header className={styles.header}> |
|
||||
<div className={styles.titleContainer}> |
|
||||
<div className={styles.left}> |
|
||||
<h1>Channels</h1> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div className={styles.createChannelContainer}> |
|
||||
<div className={`buttonPrimary ${styles.newChannelButton}`} onClick={openChannelForm}> |
|
||||
Create new channel |
|
||||
</div> |
|
||||
</div> |
|
||||
</header> |
|
||||
|
|
||||
<div className={styles.search}> |
|
||||
<label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'> |
|
||||
<MdSearch /> |
|
||||
</label> |
|
||||
<input |
|
||||
value={searchQuery} |
|
||||
onChange={event => updateChannelSearchQuery(event.target.value)} |
|
||||
className={`${styles.text} ${styles.input}`} |
|
||||
placeholder='Search channels by funding transaction or remote public key' |
|
||||
type='text' |
|
||||
id='channelSearch' |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<div className={styles.filtersContainer}> |
|
||||
<section> |
|
||||
<h2 onClick={toggleFilterPulldown} className={styles.filterTitle}> |
|
||||
{filter.name} <span className={filterPulldown && styles.pulldown}><FaAngleDown /></span> |
|
||||
</h2> |
|
||||
<ul className={`${styles.filters} ${filterPulldown && styles.active}`}> |
|
||||
{ |
|
||||
nonActiveFilters.map(f => ( |
|
||||
<li key={f.key} onClick={() => changeFilter(f)}> |
|
||||
{f.name} |
|
||||
</li> |
|
||||
)) |
|
||||
} |
|
||||
</ul> |
|
||||
</section> |
|
||||
<section className={styles.refreshContainer}> |
|
||||
<span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}> |
|
||||
{ |
|
||||
this.state.refreshing ? |
|
||||
<FaRepeat /> |
|
||||
: |
|
||||
'Refresh' |
|
||||
} |
|
||||
</span> |
|
||||
</section> |
|
||||
</div> |
|
||||
|
|
||||
<div className={`${styles.channels} ${filterPulldown && styles.fade}`}> |
|
||||
<ul className={viewType === 1 && styles.cardsContainer}> |
|
||||
{ |
|
||||
currentChannels.map((channel, index) => { |
|
||||
if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) { |
|
||||
return ( |
|
||||
<OpenPendingChannel |
|
||||
key={index} |
|
||||
channel={channel} |
|
||||
ticker={ticker} |
|
||||
currentTicker={currentTicker} |
|
||||
explorerLinkBase={'https://testnet.smartbit.com.au/'} |
|
||||
/> |
|
||||
) |
|
||||
} else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) { |
|
||||
return ( |
|
||||
<ClosedPendingChannel |
|
||||
key={index} |
|
||||
channel={channel} |
|
||||
ticker={ticker} |
|
||||
currentTicker={currentTicker} |
|
||||
explorerLinkBase={'https://testnet.smartbit.com.au/'} |
|
||||
/> |
|
||||
) |
|
||||
} |
|
||||
return ( |
|
||||
<Channel |
|
||||
key={index} |
|
||||
ticker={ticker} |
|
||||
channel={channel} |
|
||||
closeChannel={closeChannel} |
|
||||
currentTicker={currentTicker} |
|
||||
/> |
|
||||
) |
|
||||
}) |
|
||||
} |
|
||||
</ul> |
|
||||
</div> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
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 |
|
||||
@ -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; |
|
||||
} |
|
||||
} |
|
||||
@ -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)) |
|
||||
@ -1,3 +0,0 @@ |
|||||
import ChannelsContainer from './containers/ChannelsContainer' |
|
||||
|
|
||||
export default ChannelsContainer |
|
||||
@ -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 ( |
|
||||
<div> |
|
||||
<PeerForm {...peerFormProps} /> |
|
||||
|
|
||||
<PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={peer} disconnect={disconnectRequest} /> |
|
||||
|
|
||||
<header className={styles.header}> |
|
||||
<div className={styles.titleContainer}> |
|
||||
<div className={styles.left}> |
|
||||
<h1>Peers</h1> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div className={styles.addPeerContainer}> |
|
||||
<div className={`buttonPrimary ${styles.newPeerButton}`} onClick={() => setPeerForm({ isOpen: true })}> |
|
||||
Add new peer |
|
||||
</div> |
|
||||
</div> |
|
||||
</header> |
|
||||
|
|
||||
<div className={styles.search}> |
|
||||
<label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'> |
|
||||
<MdSearch /> |
|
||||
</label> |
|
||||
<input |
|
||||
value={searchQuery} |
|
||||
onChange={event => updateSearchQuery(event.target.value)} |
|
||||
className={`${styles.text} ${styles.input}`} |
|
||||
placeholder='Search peers by their node public key or IP address' |
|
||||
type='text' |
|
||||
id='peersSearch' |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<div className={styles.refreshContainer}> |
|
||||
<span className={styles.refresh} onClick={refreshClicked} ref={(ref) => { this.repeat = ref }}> |
|
||||
{ |
|
||||
this.state.refreshing ? |
|
||||
<FaRepeat /> |
|
||||
: |
|
||||
'Refresh' |
|
||||
} |
|
||||
</span> |
|
||||
</div> |
|
||||
|
|
||||
<div className={styles.peers}> |
|
||||
{ |
|
||||
filteredPeers.map(filteredPeer => <Peer key={filteredPeer.peer_id} peer={filteredPeer} setPeer={setPeer} />) |
|
||||
} |
|
||||
</div> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
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 |
|
||||
@ -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; |
|
||||
} |
|
||||
@ -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)) |
|
||||
@ -1,3 +0,0 @@ |
|||||
import PeersContainer from './containers/PeersContainer' |
|
||||
|
|
||||
export default PeersContainer |
|
||||
Loading…
Reference in new issue