Sidebar component

app/containers/Sidebar.js

@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ScrollView, Text, View, StyleSheet, FlatList, TouchableHighlight } from 'react-native';
+import { DrawerItems } from 'react-navigation';
+import { connect } from 'react-redux';
+
+import realm from '../lib/realm';
+import { setServer } from '../actions/server';
+
+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'
+	}
+});
+
+@connect(state => ({
+	server: state.server.server
+}), dispatch => ({
+	selectServer: server => dispatch(setServer(server))
+}))
+export default class Sidebar extends Component {
+	static propTypes = {
+		server: PropTypes.string.isRequired,
+		selectServer: PropTypes.func.isRequired,
+		navigation: PropTypes.object.isRequired
+	}
+
+	componentWillMount() {
+		realm.addListener('change', this.updateState);
+		this.state = this.getState();
+	}
+
+	componentWillUnmount() {
+		realm.removeListener('change', this.updateState);
+	}
+
+	onItemPress = ({ route, focused }) => {
+		this.props.navigation.navigate('DrawerClose');
+		if (!focused) {
+			this.props.navigation.navigate(route.routeName, undefined);
+		}
+	}
+
+	onPressItem = (item) => {
+		this.props.selectServer(item.id);
+		this.props.navigation.navigate('DrawerClose');
+	}
+
+	getState = () => ({
+		servers: realm.objects('servers')
+	})
+
+	updateState = () => {
+		this.setState(this.getState());
+	}
+
+	renderItem = ({ item, separators }) => (
+
+		<TouchableHighlight
+			onShowUnderlay={separators.highlight}
+			onHideUnderlay={separators.unhighlight}
+			onPress={() => { this.onPressItem(item); }}
+		>
+			<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 }}>
+					<DrawerItems
+						{...this.props}
+						onItemPress={this.onItemPress}
+					/>
+
+					<Text style={styles.serverTitle}>SERVERS</Text>
+					<FlatList
+						data={this.state.servers}
+						renderItem={this.renderItem}
+						keyExtractor={item => item.id}
+					/>
+				</View>
+			</ScrollView>
+		);
+	}
+}