From 824ff0644744bbc2190b3b651a604099f81c0241 Mon Sep 17 00:00:00 2001 From: Guilhem Fanton Date: Fri, 9 Nov 2018 18:53:50 +0100 Subject: [PATCH] feat(peers): Update peers UI --- .../Settings/Devtools/Network/Peers.js | 145 ++++++++++++------ .../common/graphql/queries/Peers.js | 1 - .../react-native/ios/Berty/Berty.entitlements | 1 + client/react-native/package.json | 1 + client/react-native/yarn.lock | 6 + 5 files changed, 104 insertions(+), 50 deletions(-) diff --git a/client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js b/client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js index bf157697a4..7bbb00c210 100644 --- a/client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js +++ b/client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js @@ -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: ( @@ -41,7 +59,7 @@ export default class Peers extends PureComponent { opened: [], } - componentWillMount() { + componentWillMount () { subscriptions.monitorPeers.subscribe({ iterator: undefined, updater: (store, data) => { @@ -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() } @@ -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)], @@ -74,42 +86,50 @@ export default class Peers extends PureComponent { renderPeer = peer => { return ( - - { - peer.connection === Connection.CONNECTED ? - {peer.id.slice(0, 20)}... - : {peer.id.slice(0, 20)}... - } + + {peer.connection === Connection.CONNECTED ? ( + {peer.id.slice(0, 30)}... + ) : ( + {peer.id.slice(0, 30)}... + )} ) } renderPeerInfo = peer => { - console.log(peer) return ( - type: {ConnectionType(peer.connection)} - addrs: [ - { - peer.addrs.map((addr, i) => ( - {addr} - )) - } - ] + + Connection + + {ConnectionType(peer.connection)} + + + + addrs: + {peer.addrs.map((addr, i) => ( + {`${addr.slice(0, 30)}${ + addr.length > 30 ? '...' : '' + }`} + ))} + ) } - updateOpened = opened => { - this.setState({ opened }); - }; + this.setState({ opened }) + } render () { console.log(this.state.peers) return ( - - Number of Peers: {this.state.peers.length} + + + + Number of Peers: {this.state.peers.length} + + - + ) } } 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, }, }) diff --git a/client/react-native/common/graphql/queries/Peers.js b/client/react-native/common/graphql/queries/Peers.js index 9625448257..4eeab1a7b3 100644 --- a/client/react-native/common/graphql/queries/Peers.js +++ b/client/react-native/common/graphql/queries/Peers.js @@ -13,7 +13,6 @@ const query = graphql` } ` - export default { ...query, fetch: (variables = {}) => diff --git a/client/react-native/ios/Berty/Berty.entitlements b/client/react-native/ios/Berty/Berty.entitlements index a73c1cab77..d055e76daa 100644 --- a/client/react-native/ios/Berty/Berty.entitlements +++ b/client/react-native/ios/Berty/Berty.entitlements @@ -2,6 +2,7 @@ + aps-environment development com.apple.developer.associated-domains diff --git a/client/react-native/package.json b/client/react-native/package.json index c8481a84ec..040c0d16c2 100644 --- a/client/react-native/package.json +++ b/client/react-native/package.json @@ -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", diff --git a/client/react-native/yarn.lock b/client/react-native/yarn.lock index 571075b004..5a6461196d 100644 --- a/client/react-native/yarn.lock +++ b/client/react-native/yarn.lock @@ -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"