Status merge

app/containers/StatusModal.js

@@ -0,0 +1,198 @@
+import React, { Component } from 'react';
+import {
+	View, Text, StyleSheet, ScrollView, TouchableHighlight
+} from 'react-native';
+import PropTypes from 'prop-types';
+import Modal from 'react-native-modal';
+import { responsive } from 'react-native-responsive-ui';
+
+import TextInput from './TextInput';
+import Button from './Button';
+import I18n from '../i18n';
+import sharedStyles from '../views/Styles';
+import { isIOS } from '../utils/deviceInfo';
+import { themes } from '../constants/colors';
+import { withTheme } from '../theme';
+import { withSplit } from '../split';
+
+const styles = StyleSheet.create({
+	modal: {
+		width: '100%',
+		alignItems: 'center',
+		margin: 0
+	},
+	titleContainer: {
+		flexDirection: 'row',
+		paddingHorizontal: 16,
+		paddingTop: 16
+	},
+	title: {
+		fontSize: 14,
+		...sharedStyles.textBold
+	},
+	container: {
+		height: 230,
+		flexDirection: 'column'
+	},
+	scrollView: {
+		flex: 1,
+		padding: 16
+	},
+	buttonContainer: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		padding: 16
+	},
+	button: {
+		marginBottom: 0
+	},
+	androidButton: {
+		paddingHorizontal: 15,
+		justifyContent: 'center',
+		height: 48,
+		borderRadius: 2
+	},
+	androidButtonText: {
+		fontSize: 18,
+		textAlign: 'center'
+	}
+
+});
+
+class StatusModal extends Component {
+	static propTypes = {
+		isVisible: PropTypes.bool,
+		close: PropTypes.func,
+		submit: PropTypes.func,
+		window: PropTypes.object,
+		theme: PropTypes.string,
+		statusText: PropTypes.string,
+		split: PropTypes.bool
+	}
+
+	state = {
+		statusText: '',
+		saving: false
+	};
+
+	componentDidMount() {
+		const { statusText } = this.props;
+		this.setState({ statusText });
+	}
+
+	shouldComponentUpdate(nextProps, nextState) {
+		const { statusText } = this.state;
+		const {
+			window, isVisible, split, theme
+		} = this.props;
+
+		if (nextState.statusText !== statusText) {
+			return true;
+		}
+		if (nextProps.split !== split) {
+			return true;
+		}
+		if (nextProps.theme !== theme) {
+			return true;
+		}
+		if (nextProps.isVisible !== isVisible) {
+			return true;
+		}
+		if (nextProps.window.width !== window.width) {
+			return true;
+		}
+		return false;
+	}
+
+	submit = () => {
+		this.setState({ saving: true });
+		const { submit } = this.props;
+		const { statusText } = this.state;
+		submit(statusText);
+	}
+
+	renderButtons = () => {
+		const { close, theme } = this.props;
+		const { saving } = this.state;
+		if (isIOS) {
+			return (
+				<View style={[styles.buttonContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+					<Button
+						title={I18n.t('Cancel')}
+						type='secondary'
+						backgroundColor={themes[theme].chatComponentBackground}
+						style={styles.button}
+						onPress={close}
+						theme={theme}
+					/>
+					<Button
+						title={I18n.t('Set_status')}
+						type='primary'
+						style={styles.button}
+						onPress={this.submit}
+						theme={theme}
+						loading={saving}
+					/>
+				</View>
+			);
+		}
+		return (
+			<View style={[styles.buttonContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+				<TouchableHighlight
+					onPress={close}
+					style={[styles.androidButton, { backgroundColor: themes[theme].chatComponentBackground }]}
+					underlayColor={themes[theme].chatComponentBackground}
+					activeOpacity={0.5}
+				>
+					<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: themes[theme].tintColor }]}>{I18n.t('Cancel')}</Text>
+				</TouchableHighlight>
+				<TouchableHighlight
+					onPress={this.submit}
+					style={[styles.androidButton, { backgroundColor: themes[theme].tintColor }]}
+					underlayColor={themes[theme].tintColor}
+					activeOpacity={0.5}
+				>
+					<Text style={[styles.androidButtonText, { ...sharedStyles.textMedium, color: themes[theme].buttonText }]}>{I18n.t('Set_status')}</Text>
+				</TouchableHighlight>
+			</View>
+		);
+	}
+
+	render() {
+		const {
+			window: { width }, isVisible, close, split, theme
+		} = this.props;
+		const { statusText } = this.state;
+		return (
+			<Modal
+				isVisible={isVisible}
+				style={styles.modal}
+				onBackdropPress={close}
+				onBackButtonPress={close}
+				animationIn='fadeIn'
+				animationOut='fadeOut'
+				useNativeDriver
+				hideModalContentWhileAnimating
+				avoidKeyboard
+			>
+				<View style={[styles.container, { width: width - 32, backgroundColor: themes[theme].chatComponentBackground }, split && sharedStyles.modal]}>
+					<View style={styles.titleContainer}>
+						<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Set_custom_status')}</Text>
+					</View>
+
+					<ScrollView style={styles.scrollView}>
+						<TextInput
+							placeholder={I18n.t('Set_custom_status')}
+							value={statusText}
+							onChangeText={value => this.setState({ statusText: value })}
+							theme={theme}
+						/>
+					</ScrollView>
+					{this.renderButtons()}
+				</View>
+			</Modal>
+		);
+	}
+}
+
+export default responsive(withTheme(withSplit(StatusModal)));

app/i18n/locales/en.js

@@ -10,6 +10,7 @@ export default {
 	'error-could-not-change-email': 'Could not change email',
 	'error-could-not-change-name': 'Could not change name',
 	'error-could-not-change-username': 'Could not change username',
+	'error-could-not-change-status': 'Could not change status',
 	'error-delete-protected-role': 'Cannot delete a protected role',
 	'error-department-not-found': 'Department not found',
 	'error-direct-message-file-upload-not-allowed': 'File sharing not allowed in direct messages',
@@ -359,6 +360,8 @@ export default {
 	Servers: 'Servers',
 	Server_version: 'Server version: {{version}}',
 	Set_custom_status: 'Set custom status',
+	Set_status: 'Set status',
+	Status_saved_successfully: 'Status saved successfully!',
 	Set_username_subtitle: 'The username is used to allow others to mention you in messages',
 	Settings: 'Settings',
 	Settings_succesfully_changed: 'Settings succesfully changed!',
@@ -378,8 +381,8 @@ export default {
 	Starred: 'Starred',
 	Start_of_conversation: 'Start of conversation',
 	Started_discussion: 'Started a discussion:',
-	Status: 'Status',
 	Started_call: 'Call started by {{userBy}}',
+	Status: 'Status',
 	Submit: 'Submit',
 	Table: 'Table',
 	Take_a_photo: 'Take a photo',

app/lib/rocketchat.js

@@ -246,7 +246,7 @@ const RocketChat = {
 					const userStatus = ddpMessage.fields.args[0];
 					const [id,, status, statusText] = userStatus;
 					this.activeUsers[id] = STATUSES[status];
-
+					this.activeUsers[statusText] = statusText;
 					const { user: loggedUser } = reduxStore.getState().login;
 					if (loggedUser && loggedUser.id === id) {
 						reduxStore.dispatch(setUser({ status: STATUSES[status], statusText }));

app/views/ProfileView/index.js

@@ -422,6 +422,7 @@ class ProfileView extends React.Component {
 							onChangeText={value => this.setState({ statusText: value })}
 							onSubmitEditing={() => { this.statusText.focus(); }}
 							testID='profile-view-status'
+							theme={theme}
 						/>
 						<RCTextInput
 							inputRef={(e) => { this.name = e; }}

app/views/RoomActionsView/index.js

@@ -63,7 +63,8 @@ class RoomActionsView extends React.Component {
 			joined: !!room,
 			canViewMembers: false,
 			canAutoTranslate: false,
-			canAddUser: false
+			canAddUser: false,
+			userStatusText: null
 		};
 		if (room && room.observe && room.rid) {
 			this.roomObservable = room.observe();
@@ -91,7 +92,16 @@ class RoomActionsView extends React.Component {
 				log(e);
 			}
 		}
-
+		if (room && room.t === 'd') {
+			const { user } = this.props;
+			try {
+				const roomUserId = await RocketChat.getRoomMemberId(this.rid, user.id);
+				const result = await RocketChat.getUserInfo(roomUserId);
+				this.setState({ userStatusText: result.user.statusText });
+			} catch (e) {
+				log(e);
+			}
+		}
 		if (room && room.t !== 'd' && this.canViewMembers()) {
 			try {
 				const counters = await RocketChat.getRoomCounters(room.rid, room.t);
@@ -398,7 +408,7 @@ class RoomActionsView extends React.Component {
 	}
 
 	renderRoomInfo = ({ item }) => {
-		const { room, member } = this.state;
+		const { room, member, userStatusText } = this.state;
 		const { name, t, topic } = room;
 		const { baseUrl, user, theme } = this.props;
 
@@ -427,7 +437,8 @@ class RoomActionsView extends React.Component {
 						)
 					}
 					<Text style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]} ellipsizeMode='tail' numberOfLines={1}>{t === 'd' ? `@${ name }` : topic}</Text>
-					{t === 'd' ? <Text style={styles.statusText} ellipsizeMode='tail' numberOfLines={1}>{user.statusText}</Text> : null }
+
+					{t === 'd' ? <Text style={[styles.statusText, { color: themes[theme].auxiliaryText }]} ellipsizeMode='tail' numberOfLines={1}>{userStatusText}</Text> : null }
 				</View>,
 				<DisclosureIndicator theme={theme} key='disclosure-indicator' />
 			], item)

app/views/RoomInfoView/index.js

@@ -299,8 +299,9 @@ class RoomInfoView extends React.Component {
 					<View style={styles.avatarContainer}>
 						{this.renderAvatar(room, roomUser)}
 						<View style={styles.roomTitleContainer}>{ getRoomTitle(room, this.t, roomUser && roomUser.name, theme) }</View>
-						{this.t === 'd' ? <Text style={styles.statusText} ellipsizeMode='tail' numberOfLines={2}>{roomUser.statusText}</Text> : null }
+						{this.t === 'd' ? <Text style={[styles.statusText, { color: themes[theme].auxiliaryText }]} ellipsizeMode='tail' numberOfLines={2}>{roomUser.statusText}</Text> : null }
 					</View>
+
 					{this.isDirect() ? this.renderDirect() : this.renderChannel()}
 				</SafeAreaView>
 			</ScrollView>

app/views/RoomView/Header/index.js

@@ -9,6 +9,7 @@ import RightButtons from './RightButtons';
 import { withTheme } from '../../../theme';
 import RoomHeaderLeft from './RoomHeaderLeft';
 
+
 class RoomHeaderView extends Component {
 	static propTypes = {
 		title: PropTypes.string,
@@ -62,7 +63,6 @@ class RoomHeaderView extends Component {
 		const {
 			window, title, type, prid, tmid, widthOffset, status = 'offline', connecting, usersTyping, goRoomActionsView, theme
 		} = this.props;
-
 		return (
 			<Header
 				prid={prid}

app/views/RoomView/index.js

@@ -141,6 +141,7 @@ class RoomView extends React.Component {
 		useMarkdown: PropTypes.bool,
 		theme: PropTypes.string,
 		replyBroadcast: PropTypes.func
+
 	};
 
 	constructor(props) {
@@ -170,7 +171,8 @@ class RoomView extends React.Component {
 			editing: false,
 			replying: !!selectedMessage,
 			replyWithMention: false,
-			reacting: false
+			reacting: false,
+			statusText: null
 		};
 
 		if (room && room.observe) {
@@ -325,6 +327,13 @@ class RoomView extends React.Component {
 		try {
 			this.setState({ loading: true });
 			const { room, joined } = this.state;
+
+			if (room && room.t === 'd') {
+				const { user } = this.props;
+				const roomUserId = await RocketChat.getRoomMemberId(this.rid, user.id);
+				const result = await RocketChat.getUserInfo(roomUserId);
+				this.setState({ statusText: result.user.statusText });
+			}
 			if (this.tmid) {
 				await this.getThreadMessages();
 			} else {
@@ -769,6 +778,20 @@ class RoomView extends React.Component {
 		return message;
 	}
 
+	renderStatusText = () => {
+		const { theme } = this.props;
+		const { statusText } = this.state;
+		if (this.t === 'd') {
+			return (
+				<View style={[styles.statusTextContainer, { backgroundColor: themes[theme].bannerBackground }]} key='room-user-status' testID='room-user-status'>
+					<Text style={[styles.statusText, { color: themes[theme].titleText }]} ellipsizeMode='tail' numberOfLines={2}>{statusText || ''}</Text>
+				</View>
+			);
+		} else {
+			return null;
+		}
+	}
+
 	renderFooter = () => {
 		const {
 			joined, room, selectedMessage, editing, replying, replyWithMention
@@ -875,7 +898,6 @@ class RoomView extends React.Component {
 		} = this.state;
 		const { user, baseUrl, theme } = this.props;
 		const { rid, t } = room;
-
 		return (
 			<SafeAreaView
 				style={[
@@ -886,11 +908,7 @@ class RoomView extends React.Component {
 				forceInset={{ vertical: 'never' }}
 			>
 				<StatusBar theme={theme} />
-         {this.t === 'd' && user && user.statusText ? (
-					<View style={styles.statusTextContainer} key='room-user-status' testID='room-user-status'>
-						<Text style={styles.statusText} ellipsizeMode='tail' numberOfLines={2}>{user.statusText}</Text>
-					</View>
-				) : null }
+				{this.renderStatusText()}
 				<List
 					ref={this.list}
 					listRef={this.setListRef}