verdnatura-chat/app/views/serverList.js

210 lines
4.1 KiB
JavaScript
Raw Normal View History

2017-08-07 00:34:35 +00:00
import React from 'react';
import PropTypes from 'prop-types';
2017-08-12 20:52:55 +00:00
import { Navigation } from 'react-native-navigation';
2017-08-13 01:35:09 +00:00
import { bindActionCreators } from 'redux';
2017-08-07 00:34:35 +00:00
import Zeroconf from 'react-native-zeroconf';
2017-08-13 01:35:09 +00:00
import { View, Text, SectionList, Platform, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
2017-08-07 00:34:35 +00:00
2017-08-13 01:35:09 +00:00
import * as actions from '../actions';
2017-08-09 01:40:55 +00:00
import realm from '../lib/realm';
2017-08-14 14:25:17 +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',
2017-08-12 20:52:55 +00:00
alignItems: 'stretch',
backgroundColor: '#fff'
2017-08-07 00:34:35 +00:00
},
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();
2017-08-13 01:35:09 +00:00
@connect(state => ({
server: state.server
}), dispatch => ({
actions: bindActionCreators(actions, dispatch)
}))
2017-08-07 00:34:35 +00:00
export default class ListServerView extends React.Component {
static propTypes = {
2017-08-13 01:35:09 +00:00
navigator: PropTypes.object.isRequired,
actions: PropTypes.object,
server: PropTypes.string
2017-08-07 00:34:35 +00:00
}
constructor(props) {
super(props);
this.state = {
sections: []
};
2017-08-12 20:52:55 +00:00
this.props.navigator.setTitle({
title: 'Servers'
});
this.props.navigator.setButtons({
rightButtons: [{
id: 'add',
title: 'Add'
}],
2017-08-13 01:35:09 +00:00
leftButtons: props.server && Platform.select({
ios: [{
id: 'close',
title: 'Close'
}]
}),
2017-08-12 20:52:55 +00:00
animated: true
});
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
2017-08-09 16:19:17 +00:00
}
2017-08-09 01:40:55 +00:00
2017-08-13 01:35:09 +00:00
componentWillMount() {
realm.addListener('change', this.updateState);
zeroconf.on('update', this.updateState);
zeroconf.scan('http', 'tcp', 'local.');
this.state = this.getState();
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
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
}
2017-08-12 20:52:55 +00:00
onNavigatorEvent = (event) => {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'add') {
Navigation.showModal({
screen: 'NewServer',
animationType: 'slide-up'
// animationType: 'none'
});
}
if (event.id === 'close') {
Navigation.dismissModal({
animationType: 'slide-down'
});
}
}
2017-08-13 01:35:09 +00:00
if (event.id === 'didDisappear' && this.state.server) {
this.props.actions.setCurrentServer(this.state.server);
}
2017-08-12 20:52:55 +00:00
}
onPressItem = (item) => {
2017-08-14 14:25:17 +00:00
RocketChat.logout();
2017-08-12 20:52:55 +00:00
Navigation.dismissModal({
animationType: 'slide-down'
});
2017-08-13 01:35:09 +00:00
this.setState({
server: item.id
});
2017-08-09 16:19:17 +00:00
}
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>
);
}
}