verdnatura-chat/app/views/serverList.js

161 lines
3.1 KiB
JavaScript
Raw Normal View History

2017-08-07 00:34:35 +00:00
import React from 'react';
import PropTypes from 'prop-types';
import Zeroconf from 'react-native-zeroconf';
2017-08-09 01:40:55 +00:00
import { View, Text, SectionList, Button, StyleSheet } from 'react-native';
2017-08-07 00:34:35 +00:00
2017-08-09 01:40:55 +00:00
import realm from '../lib/realm';
2017-08-09 20:18:00 +00:00
import RocketChat from '../lib/rocketchat';
2017-08-07 00:34:35 +00:00
const styles = StyleSheet.create({
view: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch'
},
input: {
height: 40,
borderColor: '#aaa',
margin: 20,
padding: 5,
borderWidth: 0,
backgroundColor: '#f8f8f8'
},
text: {
textAlign: 'center',
color: '#888'
},
listItem: {
lineHeight: 18,
color: '#666',
padding: 14
},
container: {
flex: 1
},
separator: {
height: 1,
backgroundColor: '#eee'
},
headerStyle: {
backgroundColor: '#eee',
lineHeight: 24,
paddingLeft: 14,
color: '#888'
}
});
const zeroconf = new Zeroconf();
export default class ListServerView extends React.Component {
static propTypes = {
navigation: PropTypes.object.isRequired
}
2017-08-09 01:40:55 +00:00
static navigationOptions = ({ navigation }) => ({
2017-08-07 00:34:35 +00:00
title: 'Servers',
headerRight: (
<Button
2017-08-09 01:40:55 +00:00
title='Add'
2017-08-09 16:19:17 +00:00
onPress={() => navigation.navigate('NewServerModal')}
2017-08-07 00:34:35 +00:00
/>
)
});
constructor(props) {
super(props);
this.state = {
sections: []
};
}
2017-08-09 16:19:17 +00:00
componentWillMount() {
realm.addListener('change', this.updateState);
zeroconf.on('update', this.updateState);
2017-08-07 00:34:35 +00:00
zeroconf.scan('http', 'tcp', 'local.');
2017-08-09 16:19:17 +00:00
this.state = this.getState();
}
2017-08-09 01:40:55 +00:00
2017-08-09 16:19:17 +00:00
componentWillUnmount() {
zeroconf.stop();
realm.removeListener('change', this.updateState);
zeroconf.removeListener('update', this.updateState);
2017-08-07 00:34:35 +00:00
}
onPressItem(item) {
2017-08-09 02:27:22 +00:00
RocketChat.currentServer = item.id;
2017-08-07 00:34:35 +00:00
2017-08-09 20:18:00 +00:00
RocketChat.connect();
2017-08-11 17:05:30 +00:00
this.props.navigation.state.params.onSelect();
2017-08-09 16:19:17 +00:00
this.props.navigation.dispatch({ type: 'Navigation/BACK' });
}
getState = () => {
const sections = [{
title: 'My servers',
data: realm.objects('servers')
}];
this.state.nearBy = zeroconf.getServices();
if (this.state.nearBy) {
const nearBy = Object.keys(this.state.nearBy)
.filter(key => this.state.nearBy[key].addresses);
if (nearBy.length) {
sections.push({
title: 'Nearby',
data: nearBy.map((key) => {
const server = this.state.nearBy[key];
const address = `http://${ server.addresses[0] }:${ server.port }`;
return {
id: address
};
})
});
}
}
return {
...this.state,
sections
};
};
updateState = () => {
this.setState(this.getState());
2017-08-07 00:34:35 +00:00
}
renderItem = ({ item }) => (
<Text
style={styles.listItem}
2017-08-09 01:40:55 +00:00
onPress={() => { this.onPressItem(item); }}
2017-08-07 00:34:35 +00:00
>
{item.id}
</Text>
);
renderSectionHeader = ({ section }) => (
<Text style={styles.headerStyle}>{section.title}</Text>
);
renderSeparator = () => (
<View style={styles.separator} />
);
render() {
return (
<View style={styles.view}>
<SectionList
style={styles.list}
sections={this.state.sections}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
2017-08-09 01:40:55 +00:00
keyExtractor={item => item.id}
2017-08-07 00:34:35 +00:00
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
);
}
}