JimmyMow
7 years ago
committed by
GitHub
GitHub
16 changed files with 351 additions and 41 deletions
|
After Width: | Height: | Size: 313 B |
@ -0,0 +1,113 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import Isvg from 'react-inlinesvg' |
|||
|
|||
import userIcon from 'icons/user.svg' |
|||
import { FaUser, 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 { |
|||
componentWillMount() { |
|||
this.props.fetchPeers() |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
fetchPeers, |
|||
peerFormProps, |
|||
setPeerForm, |
|||
setPeer, |
|||
updateSearchQuery, |
|||
disconnectRequest, |
|||
|
|||
peerModalOpen, |
|||
filteredPeers, |
|||
peers: { peer, searchQuery }, |
|||
info: { data: { identity_pubkey } } |
|||
} = this.props |
|||
|
|||
const refreshClicked = event => { |
|||
// store event in icon so we dont get an error when react clears it
|
|||
const icon = event.currentTarget |
|||
|
|||
// fetch peers
|
|||
fetchPeers() |
|||
|
|||
// clear animation after the second so we can reuse it
|
|||
setTimeout(() => { icon.style.animation = '' }, 1000) |
|||
|
|||
// spin icon for 1 sec
|
|||
icon.style.animation = 'spin 1000ms linear 1' |
|||
} |
|||
|
|||
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}> |
|||
<div className={styles.identityPubkey}> |
|||
<section className={styles.userIcon}> |
|||
<Isvg src={userIcon} /> |
|||
</section> |
|||
<section> |
|||
<h4>Your node public key</h4> |
|||
<h2>{identity_pubkey}</h2> |
|||
</section> |
|||
</div> |
|||
</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} hint--top`} data-hint='Refresh your peers list'> |
|||
<FaRepeat |
|||
onClick={refreshClicked} |
|||
/> |
|||
</span> |
|||
</div> |
|||
|
|||
<div className={styles.peers}> |
|||
{ |
|||
filteredPeers.map(filteredPeer => <Peer key={filteredPeer.peer_id} peer={filteredPeer} setPeer={setPeer} />) |
|||
} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Peers.propTypes = { |
|||
|
|||
} |
|||
|
|||
export default Peers |
|||
@ -0,0 +1,96 @@ |
|||
@import '../../../variables.scss'; |
|||
|
|||
.search { |
|||
height: 75px; |
|||
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: 70px; |
|||
font-size: 25px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.text { |
|||
width: 95%; |
|||
outline: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
border-radius: 0; |
|||
height: 68px; |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
|
|||
.titleContainer { |
|||
padding: 40px; |
|||
|
|||
.left { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.left, span { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.identityPubkey { |
|||
font-size: 30px; |
|||
margin-right: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
|
|||
.userIcon { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
section h4 { |
|||
font-size: 10px; |
|||
text-transform: uppercase; |
|||
letter-spacing: 1.2px; |
|||
} |
|||
|
|||
section h2 { |
|||
font-size: 14px; |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.addPeerContainer { |
|||
padding: 40px; |
|||
|
|||
.newPeerButton { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.refreshContainer { |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 20px 40px 0px 40px; |
|||
|
|||
.refresh { |
|||
cursor: pointer; |
|||
color: $bluegrey; |
|||
} |
|||
} |
|||
|
|||
.peers { |
|||
padding: 40px; |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
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)) |
|||
@ -0,0 +1,3 @@ |
|||
import PeersContainer from './containers/PeersContainer' |
|||
|
|||
export default PeersContainer |
|||
Loading…
Reference in new issue