138 lines
3.1 KiB
JavaScript
138 lines
3.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { ScrollView, Text, View, StyleSheet, FlatList, TouchableHighlight } from 'react-native';
|
|
import { connect } from 'react-redux';
|
|
import { DrawerActions } from 'react-navigation';
|
|
|
|
import database from '../lib/realm';
|
|
import { setServer } from '../actions/server';
|
|
import { logout } from '../actions/login';
|
|
import I18n from '../i18n';
|
|
|
|
const styles = StyleSheet.create({
|
|
scrollView: {
|
|
paddingTop: 20
|
|
},
|
|
imageContainer: {
|
|
width: '100%',
|
|
alignItems: 'center'
|
|
},
|
|
image: {
|
|
width: 200,
|
|
height: 200,
|
|
borderRadius: 100
|
|
},
|
|
serverTitle: {
|
|
fontSize: 16,
|
|
color: 'grey',
|
|
padding: 10,
|
|
width: '100%'
|
|
},
|
|
serverItem: {
|
|
backgroundColor: 'white',
|
|
padding: 10,
|
|
flex: 1
|
|
},
|
|
selectedServer: {
|
|
backgroundColor: '#eeeeee'
|
|
}
|
|
});
|
|
const keyExtractor = item => item.id;
|
|
@connect(state => ({
|
|
server: state.server.server
|
|
}), dispatch => ({
|
|
selectServer: server => dispatch(setServer(server)),
|
|
logout: () => dispatch(logout())
|
|
}))
|
|
export default class Sidebar extends Component {
|
|
static propTypes = {
|
|
server: PropTypes.string.isRequired,
|
|
selectServer: PropTypes.func.isRequired,
|
|
navigation: PropTypes.object.isRequired,
|
|
logout: PropTypes.func.isRequired
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { servers: [] };
|
|
}
|
|
|
|
componentDidMount() {
|
|
database.databases.serversDB.addListener('change', this.updateState);
|
|
this.setState(this.getState());
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
database.databases.serversDB.removeListener('change', this.updateState);
|
|
}
|
|
|
|
onPressItem = (item) => {
|
|
this.props.selectServer(item.id);
|
|
this.closeDrawer();
|
|
}
|
|
|
|
getState = () => ({
|
|
servers: database.databases.serversDB.objects('servers')
|
|
})
|
|
|
|
updateState = () => {
|
|
this.setState(this.getState());
|
|
}
|
|
|
|
closeDrawer = () => {
|
|
this.props.navigation.dispatch(DrawerActions.closeDrawer());
|
|
}
|
|
|
|
renderItem = ({ item, separators }) => (
|
|
|
|
<TouchableHighlight
|
|
onShowUnderlay={separators.highlight}
|
|
onHideUnderlay={separators.unhighlight}
|
|
onPress={() => { this.onPressItem(item); }}
|
|
testID={`sidebar-${ item.id }`}
|
|
>
|
|
<View style={[styles.serverItem, (item.id === this.props.server ? styles.selectedServer : null)]}>
|
|
<Text>
|
|
{item.id}
|
|
</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
);
|
|
|
|
render() {
|
|
return (
|
|
<ScrollView style={styles.scrollView}>
|
|
<View style={{ paddingBottom: 20 }} testID='sidebar'>
|
|
<FlatList
|
|
data={this.state.servers}
|
|
renderItem={this.renderItem}
|
|
keyExtractor={keyExtractor}
|
|
/>
|
|
<TouchableHighlight
|
|
onPress={() => {
|
|
this.closeDrawer();
|
|
this.props.logout();
|
|
}}
|
|
testID='sidebar-logout'
|
|
>
|
|
<View style={styles.serverItem}>
|
|
<Text>{I18n.t('Logout')}</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
<TouchableHighlight
|
|
onPress={() => {
|
|
this.closeDrawer();
|
|
this.props.navigation.navigate({ key: 'AddServer', routeName: 'AddServer' });
|
|
}}
|
|
testID='sidebar-add-server'
|
|
>
|
|
<View style={styles.serverItem}>
|
|
<Text>{I18n.t('Add_Server')}</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
}
|