Skip to content

Commit

Permalink
feat(peers): Update peers UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfanton
gfanton committed Nov 13, 2018
1 parent c8377c4 commit 824ff06
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 50 deletions.
145 changes: 96 additions & 49 deletions client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js
View file
@@ -1,29 +1,47 @@
import React, { PureComponent } from 'react'
import { Text, View, ActivityIndicator, StyleSheet, ListView } from 'react-native'
import { Header, Screen } from '../../../../Library'
import { QueryReducer } from '../../../../../relay'
import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
} from 'react-native'
import { Header } from '../../../../Library'
import { queries, subscriptions } from '../../../../../graphql'
import { colors } from '../../../../../constants'
import Accordion from 'react-native-collapsible/Accordion';
import {
bold,
textLeft,
padding,
textCenter,
largeText,
mediumText,
smallText,
} from '../../../../../styles'
import Accordion from 'react-native-collapsible/Accordion'

const Connection = {
'NOT_CONNECTED': 0,
'CONNECTED': 1,
'CAN_CONNECT': 2,
'CANNOT_CONNECT': 3,
NOT_CONNECTED: 0,
CONNECTED: 1,
CAN_CONNECT: 2,
CANNOT_CONNECT: 3,
}

const ConnectionType = c => {
switch (c) {
case Connection.NOT_CONNECTED: return 'NotConnected'
case Connection.CONNECTED: return 'Connected'
case Connection.CAN_CONNECT: return 'CanConnect'
case Connection.CANNOT_CONNECT: return 'CannotConnect'
default: return 'Unknow'
case Connection.NOT_CONNECTED:
return 'NotConnected'
case Connection.CONNECTED:
return 'Connected'
case Connection.CAN_CONNECT:
return 'CanConnect'
case Connection.CANNOT_CONNECT:
return 'CannotConnect'
default:
return 'Unknow'
}
}


export default class Peers extends PureComponent {
static navigationOptions = ({ navigation }) => ({
header: (
Expand All @@ -41,7 +59,7 @@ export default class Peers extends PureComponent {
opened: [],
}

componentWillMount() {
componentWillMount () {
subscriptions.monitorPeers.subscribe({
iterator: undefined,
updater: (store, data) => {
Expand All @@ -51,7 +69,7 @@ export default class Peers extends PureComponent {
})
}

componentDidMount() {
componentDidMount () {
queries.Peers.fetch().then(data => this.updatePeers(data.Peers.list))
subscriptions.monitorPeers.start()
}
Expand All @@ -60,12 +78,6 @@ export default class Peers extends PureComponent {
this.setState({ peers })
}

removePeer = peer => {
this.setState(prevState => ({
peers: prevState.peers.filter(p => p.id !== peer.id),
}))
}

addPeer = peer => {
this.setState(prevState => ({
peers: [peer, ...prevState.peers.filter(p => p.id !== peer.id)],
Expand All @@ -74,62 +86,97 @@ export default class Peers extends PureComponent {

renderPeer = peer => {
return (
<View>
{
peer.connection === Connection.CONNECTED ?
<Text style={styles.green}>{peer.id.slice(0, 20)}...</Text>
: <Text style={styles.red}>{peer.id.slice(0, 20)}...</Text>
}
<View style={styles.peer}>
{peer.connection === Connection.CONNECTED ? (
<Text style={styles.connected}>{peer.id.slice(0, 30)}...</Text>
) : (
<Text style={styles.notConnected}>{peer.id.slice(0, 30)}...</Text>
)}
</View>
)
}

renderPeerInfo = peer => {
console.log(peer)
return (
<View>
<Text>type: {ConnectionType(peer.connection)}</Text>
<Text>addrs: [</Text>
{
peer.addrs.map((addr, i) => (
<Text key={i}>{addr}</Text>
))
}
<Text>]</Text>
<TouchableOpacity style={styles.peerInfos}>
<Text style={styles.peerInfoField}>Connection</Text>
<Text style={styles.peerInfoValue}>
{ConnectionType(peer.connection)}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.peerInfos}>
<Text style={styles.peerInfoField}>addrs:</Text>
{peer.addrs.map((addr, i) => (
<Text style={styles.peerInfoValue} key={i}>{`${addr.slice(0, 30)}${
addr.length > 30 ? '...' : ''
}`}</Text>
))}
</TouchableOpacity>
</View>
)
}


updateOpened = opened => {
this.setState({ opened });
};
this.setState({ opened })
}

render () {
console.log(this.state.peers)
return (
<Screen style={[{ backgroundColor: colors.white }]}>
<Text>Number of Peers: {this.state.peers.length}</Text>
<ScrollView style={{ backgroundColor: colors.background }}>
<View style={styles.peer}>
<Text style={styles.title}>
Number of Peers: {this.state.peers.length}
</Text>
</View>
<Accordion
sections={this.state.peers}
activeSections={this.state.opened}
renderHeader={this.renderPeer}
renderContent={this.renderPeerInfo}
onChange={this.updateOpened}
/>
</Screen>
</ScrollView>
)
}
}

const styles = StyleSheet.create({
red: {
color: '#FF0000',
title: {
...textCenter,
...largeText,
},
peer: {
...padding,
backgroundColor: colors.white,
borderBottomColor: '#bbb',
borderBottomWidth: 1,
},
peerInfos: {
...textLeft,
...padding,
backgroundColor: colors.grey8,
borderBottomColor: '#bbb',
borderBottomWidth: 1,
},
peerInfoField: {
...textLeft,
...smallText,
...bold,
},
peerInfoValue: {
...textLeft,
...smallText,
},
green: {
color: '#00FF00',
connected: {
...mediumText,
...textLeft,
color: colors.green,
},
blue: {
color: '#0000FF',
notConnected: {
...mediumText,
...textLeft,
color: colors.red,
},
})
1 change: 0 additions & 1 deletion client/react-native/common/graphql/queries/Peers.js
View file
Expand Up @@ -13,7 +13,6 @@ const query = graphql`
}
`


export default {
...query,
fetch: (variables = {}) =>
Expand Down
1 change: 1 addition & 0 deletions client/react-native/ios/Berty/Berty.entitlements
View file
Expand Up @@ -2,6 +2,7 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>aps-environment</key>
<string>development</string>
<key>com.apple.developer.associated-domains</key>
<array>
Expand Down
1 change: 1 addition & 0 deletions client/react-native/package.json
View file
Expand Up @@ -23,6 +23,7 @@
"react-dom": "16.4.2",
"react-native": "^0.57.3",
"react-native-exception-handler": "^2.10.2",
"react-native-collapsible": "^1.3.0",
"react-native-image-picker": "^0.27.1",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-network-info": "^4.0.0",
Expand Down
6 changes: 6 additions & 0 deletions client/react-native/yarn.lock
View file
Expand Up @@ -5010,6 +5010,12 @@ react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"

react-native-collapsible@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-1.3.0.tgz#5eabe4d529730582e72c5cefd2476bb55e81ce05"
dependencies:
prop-types "^15.6.2"

react-native-dismiss-keyboard@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
Expand Down

0 comments on commit 824ff06

Please sign in to comment.