Jack Mallers
7 years ago
10 changed files with 335 additions and 18 deletions
|
After Width: | Height: | Size: 304 B |
@ -0,0 +1,138 @@ |
|||
import { shell } from 'electron' |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
import Isvg from 'react-inlinesvg' |
|||
import { MdSearch } from 'react-icons/lib/md' |
|||
import { FaCircle } from 'react-icons/lib/fa' |
|||
|
|||
import plus from 'icons/plus.svg' |
|||
|
|||
import styles from './Friends.scss' |
|||
|
|||
class Friends extends Component { |
|||
constructor(props) { |
|||
super(props) |
|||
} |
|||
|
|||
componentWillMount() { |
|||
const { fetchChannels, fetchPeers } = this.props |
|||
|
|||
fetchChannels() |
|||
fetchPeers() |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
channels, |
|||
activeChannels, |
|||
nonActiveChannels, |
|||
pendingOpenChannels, |
|||
|
|||
peers |
|||
} = this.props |
|||
|
|||
console.log('pendingOpenChannels: ', pendingOpenChannels) |
|||
|
|||
return ( |
|||
<div className={styles.friendsContainer}> |
|||
<header className={styles.header}> |
|||
<div className={styles.titleContainer}> |
|||
<div className={styles.left}> |
|||
<h1>Friends ({activeChannels.length} online)</h1> |
|||
</div> |
|||
</div> |
|||
<div className={styles.newFriendContainer}> |
|||
<div className={`buttonPrimary ${styles.newFriendButton}`} onClick={() => (console.log('yo'))}> |
|||
<Isvg src={plus} /> |
|||
<span>Add</span> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
|
|||
<div className={styles.search}> |
|||
<label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'> |
|||
<MdSearch /> |
|||
</label> |
|||
<input |
|||
value={''} |
|||
onChange={event => console.log('event: ', event)} |
|||
className={`${styles.text} ${styles.input}`} |
|||
placeholder='Search your friends list...' |
|||
type='text' |
|||
id='channelSearch' |
|||
/> |
|||
</div> |
|||
|
|||
<ul className={styles.friends}> |
|||
{ |
|||
activeChannels.length > 0 && activeChannels.map(activeChannel => { |
|||
console.log('activeChannel: ', activeChannel) |
|||
return ( |
|||
<li className={styles.friend} key={activeChannel.chan_id}> |
|||
<section className={styles.info}> |
|||
<p className={styles.online}> |
|||
<FaCircle style={{ verticalAlign: 'top' }} /> |
|||
<span>Online</span> |
|||
</p> |
|||
<h2>{activeChannel.remote_pubkey}</h2> |
|||
</section> |
|||
<section> |
|||
|
|||
</section> |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
{ |
|||
pendingOpenChannels.length > 0 && pendingOpenChannels.map(pendingOpenChannel => { |
|||
console.log('pendingOpenChannel: ', pendingOpenChannel) |
|||
return ( |
|||
<li className={styles.friend} key={pendingOpenChannel.chan_id}> |
|||
<section className={styles.info}> |
|||
<p className={styles.pending}> |
|||
<FaCircle style={{ verticalAlign: 'top' }} /> |
|||
<span> |
|||
Pending |
|||
<i onClick={() => shell.openExternal(`${'https://testnet.smartbit.com.au'}/tx/${pendingOpenChannel.channel.channel_point.split(':')[0]}`)}> |
|||
(~{pendingOpenChannel.blocks_till_open * 10} minutes) |
|||
</i> |
|||
</span> |
|||
</p> |
|||
<h2>{pendingOpenChannel.channel.remote_node_pub}</h2> |
|||
</section> |
|||
<section> |
|||
|
|||
</section> |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
{ |
|||
nonActiveChannels.length > 0 && nonActiveChannels.map(nonActiveChannel => { |
|||
console.log('nonActiveChannel: ', nonActiveChannel) |
|||
return ( |
|||
<li className={styles.friend} key={nonActiveChannel.chan_id}> |
|||
<section className={styles.info}> |
|||
<p> |
|||
<FaCircle style={{ verticalAlign: 'top' }} /> |
|||
<span>Offline</span> |
|||
</p> |
|||
<h2>{nonActiveChannel.remote_pubkey}</h2> |
|||
</section> |
|||
<section> |
|||
|
|||
</section> |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Friends.propTypes = {} |
|||
|
|||
export default Friends |
|||
@ -0,0 +1,147 @@ |
|||
@import '../../../variables.scss'; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.newFriendContainer { |
|||
padding: 20px 40px; |
|||
|
|||
.newFriendButton { |
|||
box-shadow: none; |
|||
transition: all 0.25s; |
|||
|
|||
&:hover { |
|||
background: darken($main, 10%); |
|||
} |
|||
|
|||
span { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
|
|||
&:nth-child(1) svg { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
|
|||
.friends { |
|||
padding: 10px 60px 60px 60px; |
|||
} |
|||
|
|||
.friend { |
|||
padding: 30px 0; |
|||
border-bottom: 1px solid $traditionalgrey; |
|||
|
|||
.info { |
|||
p { |
|||
margin-bottom: 20px; |
|||
|
|||
&.online { |
|||
color: $green; |
|||
|
|||
svg { |
|||
color: $green; |
|||
} |
|||
} |
|||
|
|||
&.pending { |
|||
color: #FF8A65; |
|||
|
|||
svg { |
|||
color: #FF8A65; |
|||
} |
|||
|
|||
i { |
|||
margin-left: 5px; |
|||
color: $darkestgrey; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
|
|||
svg, span { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
svg { |
|||
margin-right: 5px; |
|||
width: 12px; |
|||
height: 12px; |
|||
color: $darkestgrey; |
|||
} |
|||
|
|||
span { |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
|
|||
h2 { |
|||
color: $black; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
letter-spacing: 1.3px; |
|||
|
|||
span { |
|||
color: $darkestgrey; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
import { withRouter } from 'react-router' |
|||
import { connect } from 'react-redux' |
|||
|
|||
import { fetchChannels, channelsSelectors } from 'reducers/channels' |
|||
|
|||
import { fetchPeers } from 'reducers/peers' |
|||
|
|||
import Friends from '../components/Friends' |
|||
|
|||
const mapDispatchToProps = { |
|||
fetchChannels, |
|||
fetchPeers |
|||
} |
|||
|
|||
const mapStateToProps = state => ({ |
|||
channels: state.channels, |
|||
peers: state.peers, |
|||
|
|||
activeChannels: channelsSelectors.activeChannels(state), |
|||
nonActiveChannels: channelsSelectors.nonActiveChannels(state), |
|||
pendingOpenChannels: channelsSelectors.pendingOpenChannels(state) |
|||
}) |
|||
|
|||
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Friends)) |
|||
@ -0,0 +1,3 @@ |
|||
import FriendsContainer from './containers/FriendsContainer' |
|||
|
|||
export default FriendsContainer |
|||
Loading…
Reference in new issue