Manage user's status (#128)

* Init custom header

* Change user status

app/actions/actionsTypes.js

@@ -26,6 +26,7 @@ export const FORGOT_PASSWORD = createRequestTypes('FORGOT_PASSWORD', [
 	...defaultTypes,
 	'INIT'
 ]);
+export const USER = createRequestTypes('USER', ['SET']);
 export const ROOMS = createRequestTypes('ROOMS');
 export const ROOM = createRequestTypes('ROOM', ['ADD_USER_TYPING', 'REMOVE_USER_TYPING', 'SOMEONE_TYPING', 'OPEN', 'USER_TYPING']);
 export const APP = createRequestTypes('APP', ['READY', 'INIT']);

app/actions/login.js

@@ -118,3 +118,10 @@ export function forgotPasswordFailure(err) {
 		err
 	};
 }
+
+export function setUser(action) {
+	return {
+		type: types.USER.SET,
+		...action
+	};
+}

app/constants/colors.js

@@ -1,2 +1,8 @@
 export const AVATAR_COLORS = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'];
 export const ESLINT_FIX = null;
+export const STATUS_COLORS = {
+	online: '#2de0a5',
+	busy: '#f5455c',
+	away: '#ffd21f',
+	offline: '#cbced1'
+};

app/containers/Header.js

@@ -0,0 +1,212 @@
+import React from 'react';
+import { Text, View, StyleSheet, Platform, TouchableOpacity, Dimensions } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Modal from 'react-native-modal';
+import { SafeAreaView } from 'react-navigation';
+
+import DrawerMenuButton from '../presentation/DrawerMenuButton';
+import Avatar from './Avatar';
+import RocketChat from '../lib/rocketchat';
+import { STATUS_COLORS } from '../constants/colors';
+
+const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
+
+let platformContainerStyles;
+if (Platform.OS === 'ios') {
+	platformContainerStyles = {
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderBottomColor: 'rgba(0, 0, 0, .3)'
+	};
+} else {
+	platformContainerStyles = {
+		shadowColor: 'black',
+		shadowOpacity: 0.1,
+		shadowRadius: StyleSheet.hairlineWidth,
+		shadowOffset: {
+			height: StyleSheet.hairlineWidth
+		},
+		elevation: 4
+	};
+}
+
+const appBarHeight = Platform.OS === 'ios' ? 44 : 56;
+const { width } = Dimensions.get('window');
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
+		height: appBarHeight,
+		...platformContainerStyles
+	},
+	appBar: {
+		flex: 1
+	},
+	header: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		flex: 1
+	},
+	titleContainer: {
+		left: TITLE_OFFSET,
+		right: TITLE_OFFSET,
+		position: 'absolute',
+		alignItems: 'center',
+		justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
+		flexDirection: 'row'
+	},
+	status: {
+		borderRadius: 4,
+		width: 8,
+		height: 8,
+		marginRight: 10
+	},
+	avatar: {
+		marginRight: 10
+	},
+	title: {
+		fontWeight: 'bold'
+	},
+	left: {
+		left: 0,
+		position: 'absolute'
+	},
+	right: {
+		right: 0,
+		position: 'absolute'
+	},
+	modal: {
+		width: width - 60,
+		height: width - 60,
+		backgroundColor: '#F7F7F7',
+		borderRadius: 4,
+		flexDirection: 'column'
+	},
+	modalButton: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'center',
+		backgroundColor: 'transparent',
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderBottomColor: 'rgba(0, 0, 0, .3)',
+		paddingHorizontal: 20
+	}
+});
+
+@connect(state => ({
+	user: state.login.user,
+	Site_Url: state.settings.Site_Url
+}))
+export default class extends React.PureComponent {
+	static propTypes = {
+		navigation: PropTypes.object.isRequired,
+		user: PropTypes.object.isRequired,
+		Site_Url: PropTypes.string
+	}
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			isModalVisible: false
+		};
+	}
+
+	onPressModalButton(status) {
+		RocketChat.setUserPresenceDefaultStatus(status);
+		this.hideModal();
+	}
+
+	showModal() {
+		this.setState({ isModalVisible: true });
+	}
+
+	hideModal() {
+		this.setState({ isModalVisible: false });
+	}
+
+	createChannel() {
+		this.props.navigation.navigate('SelectUsers');
+	}
+
+	renderTitle() {
+		if (!this.props.user.username) {
+			return null;
+		}
+		return (
+			<TouchableOpacity style={styles.titleContainer} onPress={() => this.showModal()}>
+				<View style={[styles.status, { backgroundColor: STATUS_COLORS[this.props.user.status || 'offline'] }]} />
+				<Avatar
+					text={this.props.user.username}
+					size={24}
+					style={{ marginRight: 5 }}
+					baseUrl={this.props.Site_Url}
+				/>
+				<Text style={styles.title}>{this.props.user.username}</Text>
+			</TouchableOpacity>
+		);
+	}
+
+	renderRight() {
+		if (Platform.OS !== 'ios') {
+			return;
+		}
+		return (
+			<View style={styles.right}>
+				<Icon.Button
+					name='ios-create-outline'
+					color='blue'
+					size={26}
+					backgroundColor='transparent'
+					onPress={() => this.createChannel()}
+				/>
+			</View>
+		);
+	}
+
+	renderModalButton = (status, text) => {
+		const statusStyle = [styles.status, { backgroundColor: STATUS_COLORS[status] }];
+		const textStyle = { flex: 1, fontWeight: this.props.user.status === status ? 'bold' : 'normal' };
+		return (
+			<TouchableOpacity
+				style={styles.modalButton}
+				onPress={() => this.onPressModalButton(status)}
+			>
+				<View style={statusStyle} />
+				<Text style={textStyle}>
+					{text || status.charAt(0).toUpperCase() + status.slice(1)}
+				</Text>
+			</TouchableOpacity>
+		);
+	};
+
+	render() {
+		return (
+			<SafeAreaView style={styles.container}>
+				<View style={styles.appBar}>
+					<View style={styles.header}>
+						<View style={styles.left}>
+							<DrawerMenuButton navigation={this.props.navigation} />
+						</View>
+						{this.renderTitle()}
+						{this.renderRight()}
+					</View>
+				</View>
+				<Modal
+					isVisible={this.state.isModalVisible}
+					supportedOrientations={['portrait', 'landscape']}
+					style={{ alignItems: 'center' }}
+					onModalHide={() => this.hideModal()}
+					onBackdropPress={() => this.hideModal()}
+				>
+					<View style={styles.modal}>
+						{this.renderModalButton('online')}
+						{this.renderModalButton('busy')}
+						{this.renderModalButton('away')}
+						{this.renderModalButton('offline', 'Invisible')}
+					</View>
+				</Modal>
+			</SafeAreaView>
+		);
+	}
+}

app/containers/routes/AuthRoutes.js

@@ -4,6 +4,7 @@ import { StackNavigator, DrawerNavigator } from 'react-navigation';
 
 import Sidebar from '../../containers/Sidebar';
 import DrawerMenuButton from '../../presentation/DrawerMenuButton';
+import Header from '../../containers/Header';
 
 import RoomsListView from '../../views/RoomsListView';
 import RoomView from '../../views/RoomView';
@@ -20,7 +21,7 @@ const AuthRoutes = StackNavigator(
 			navigationOptions({ navigation }) {
 				return {
 					title: 'Rooms',
-					[drawerIconPosition]: <DrawerMenuButton navigation={navigation} />
+					header: <Header navigation={navigation} />
 				};
 			}
 		},

app/lib/rocketchat.js

@@ -9,6 +9,7 @@ import settingsType from '../constants/settings';
 import realm from './realm';
 import * as actions from '../actions';
 import { someoneTyping } from '../actions/room';
+import { setUser } from '../actions/login';
 import { disconnect, connectSuccess } from '../actions/connect';
 
 export { Accounts } from 'react-native-meteor';
@@ -94,6 +95,9 @@ const RocketChat = {
 							});
 						}
 					}
+					if (ddpMessage.collection === 'users') {
+						return reduxStore.dispatch(setUser({ status: ddpMessage.fields.status || ddpMessage.fields.statusDefault }));
+					}
 				});
 				RocketChat.getSettings();
 				RocketChat.getPermissions();
@@ -432,6 +436,7 @@ const RocketChat = {
 		});
 		Meteor.subscribe('stream-notify-user', `${ login.user.id }/subscriptions-changed`, false);
 		Meteor.subscribe('stream-notify-user', `${ login.user.id }/rooms-changed`, false);
+		Meteor.subscribe('userData', null, false);
 		return data;
 	},
 	logout({ server }) {
@@ -526,6 +531,9 @@ const RocketChat = {
 	},
 	setUserPresenceOnline() {
 		return call('UserPresence:online');
+	},
+	setUserPresenceDefaultStatus(status) {
+		return call('UserPresence:setDefaultStatus', status);
 	}
 };
 

app/reducers/login.js

@@ -107,6 +107,14 @@ export default function login(state = initialState, action) {
 				failure: true,
 				error: action.err
 			};
+		case types.USER.SET:
+			return {
+				...state,
+				user: {
+					...state.user,
+					...action
+				}
+			};
 		default:
 			return state;
 	}

app/views/RoomsListView.js

@@ -79,24 +79,6 @@ export default class RoomsListView extends React.Component {
 		server: PropTypes.string
 	}
 
-	static navigationOptions = ({ navigation }) => {
-		if (Platform.OS !== 'ios') {
-			return;
-		}
-
-		const { params = {} } = navigation.state;
-		const headerRight = (
-			<Icon.Button
-				name='ios-create-outline'
-				color='blue'
-				size={26}
-				backgroundColor='transparent'
-				onPress={params.createChannel}
-			/>);
-
-		return { headerRight };
-	};
-
 	constructor(props) {
 		super(props);