You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
56 lines
1.4 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { TiPlus } from 'react-icons/lib/ti'
|
|
import PeerModal from './PeerModal'
|
|
import PeerForm from './PeerForm'
|
|
import Peer from './Peer'
|
|
import styles from './Peers.scss'
|
|
|
|
const Peers = ({
|
|
peersLoading,
|
|
peers,
|
|
setPeer,
|
|
modalPeer,
|
|
peerModalOpen,
|
|
peerForm,
|
|
setPeerForm,
|
|
connect,
|
|
disconnect
|
|
}) => (
|
|
<div className={styles.peers}>
|
|
<PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} />
|
|
<PeerForm form={peerForm} setForm={setPeerForm} connect={connect} />
|
|
<div className={styles.header}>
|
|
<h3>Peers</h3>
|
|
<div
|
|
className={`${styles.connectPeer} hint--top`}
|
|
data-hint='Connect to a peer'
|
|
onClick={() => setPeerForm({ isOpen: true })}
|
|
>
|
|
<TiPlus />
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
{
|
|
!peersLoading ?
|
|
peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
|
|
:
|
|
'Loading...'
|
|
}
|
|
</ul>
|
|
</div>
|
|
)
|
|
|
|
Peers.propTypes = {
|
|
peersLoading: PropTypes.bool.isRequired,
|
|
peers: PropTypes.array.isRequired,
|
|
setPeer: PropTypes.func.isRequired,
|
|
modalPeer: PropTypes.object,
|
|
peerModalOpen: PropTypes.bool.isRequired,
|
|
peerForm: PropTypes.object.isRequired,
|
|
setPeerForm: PropTypes.func.isRequired,
|
|
connect: PropTypes.func.isRequired,
|
|
disconnect: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default Peers
|
|
|