[WIP] Custom Status Mobile UI

app/i18n/locales/en.js

@@ -345,6 +345,7 @@ export default {
 	Server: 'Server',
 	Servers: 'Servers',
 	Server_version: 'Server version: {{version}}',
+	Set_custom_status: 'Set custom status',
 	Set_username_subtitle: 'The username is used to allow others to mention you in messages',
 	Settings: 'Settings',
 	Settings_succesfully_changed: 'Settings succesfully changed!',
@@ -364,6 +365,7 @@ export default {
 	Starred: 'Starred',
 	Start_of_conversation: 'Start of conversation',
 	Started_discussion: 'Started a discussion:',
+	Status: 'Status',
 	Submit: 'Submit',
 	Table: 'Table',
 	Take_a_photo: 'Take a photo',

app/lib/rocketchat.js

@@ -209,12 +209,12 @@ const RocketChat = {
 				const { eventName } = ddpMessage.fields;
 				if (eventName === 'user-status') {
 					const userStatus = ddpMessage.fields.args[0];
-					const [id, username, status] = userStatus;
+					const [id, username, status, statusText] = userStatus;
 					if (username) {
 						database.memoryDatabase.write(() => {
 							try {
 								database.memoryDatabase.create('activeUsers', {
-									id, username, status: STATUSES[status]
+									id, username, status: STATUSES[status], statusText
 								}, true);
 							} catch (error) {
 								console.log(error);
@@ -326,6 +326,7 @@ const RocketChat = {
 				name: result.me.name,
 				language: result.me.language,
 				status: result.me.status,
+				statusText: result.me.statusText,
 				customFields: result.me.customFields,
 				emails: result.me.emails,
 				roles: result.me.roles

app/views/ProfileView/index.js

@@ -53,7 +53,8 @@ class ProfileView extends React.Component {
 		avatarUrl: null,
 		avatar: {},
 		avatarSuggestions: {},
-		customFields: {}
+		customFields: {},
+		statusText: null
 	}
 
 	async componentDidMount() {
@@ -91,7 +92,7 @@ class ProfileView extends React.Component {
 	init = (user) => {
 		const { user: userProps } = this.props;
 		const {
-			name, username, emails, customFields
+			name, username, emails, customFields, statusText
 		} = user || userProps;
 
 		this.setState({
@@ -102,13 +103,14 @@ class ProfileView extends React.Component {
 			currentPassword: null,
 			avatarUrl: null,
 			avatar: {},
-			customFields: customFields || {}
+			customFields: customFields || {},
+			statusText
 		});
 	}
 
 	formIsChanged = () => {
 		const {
-			name, username, email, newPassword, avatar, customFields
+			name, username, email, newPassword, avatar, customFields, statusText
 		} = this.state;
 		const { user } = this.props;
 		let customFieldsChanged = false;
@@ -128,6 +130,7 @@ class ProfileView extends React.Component {
 			&& (user.emails && user.emails[0].address === email)
 			&& !avatar.data
 			&& !customFieldsChanged
+			&& user.statusText === statusText
 		);
 	}
 
@@ -156,11 +159,16 @@ class ProfileView extends React.Component {
 		this.setState({ saving: true });
 
 		const {
-			name, username, email, newPassword, currentPassword, avatar, customFields
+			name, username, email, newPassword, currentPassword, avatar, customFields, statusText
 		} = this.state;
 		const { user, setUser } = this.props;
 		const params = {};
 
+		// Status Text
+		if (user.statusText !== statusText) {
+			params.statusText = statusText;
+		}
+
 		// Name
 		if (user.name !== name) {
 			params.name = name;
@@ -364,7 +372,7 @@ class ProfileView extends React.Component {
 
 	render() {
 		const {
-			name, username, email, newPassword, avatarUrl, customFields, avatar, saving, showPasswordAlert
+			name, username, email, newPassword, avatarUrl, customFields, avatar, saving, showPasswordAlert, statusText
 		} = this.state;
 		const { baseUrl, user } = this.props;
 
@@ -390,6 +398,15 @@ class ProfileView extends React.Component {
 								token={user.token}
 							/>
 						</View>
+						<RCTextInput
+							inputRef={(e) => { this.statusText = e; }}
+							label={I18n.t('Status')}
+							placeholder={I18n.t('Status')}
+							value={statusText}
+							onChangeText={value => this.setState({ statusText: value })}
+							onSubmitEditing={() => { this.statusText.focus(); }}
+							testID='profile-view-status'
+						/>
 						<RCTextInput
 							inputRef={(e) => { this.name = e; }}
 							label={I18n.t('Name')}
@@ -481,7 +498,8 @@ const mapStateToProps = state => ({
 		username: state.login.user && state.login.user.username,
 		customFields: state.login.user && state.login.user.customFields,
 		emails: state.login.user && state.login.user.emails,
-		token: state.login.user && state.login.user.token
+		token: state.login.user && state.login.user.token,
+		statusText: state.login.user && state.login.user.statusText
 	},
 	Accounts_CustomFields: state.settings.Accounts_CustomFields,
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''

app/views/RoomActionsView/index.js

@@ -36,7 +36,8 @@ class RoomActionsView extends React.Component {
 		navigation: PropTypes.object,
 		user: PropTypes.shape({
 			id: PropTypes.string,
-			token: PropTypes.string
+			token: PropTypes.string,
+			statusText: PropTypes.string
 		}),
 		leaveRoom: PropTypes.func
 	}
@@ -417,6 +418,7 @@ class RoomActionsView extends React.Component {
 						)
 					}
 					<Text style={styles.roomDescription} ellipsizeMode='tail' numberOfLines={1}>{t === 'd' ? `@${ name }` : topic}</Text>
+					{t === 'd' ? <Text style={styles.statusText} ellipsizeMode='tail' numberOfLines={1}>{user.statusText}</Text> : null }
 				</View>,
 				<DisclosureIndicator key='disclosure-indicator' />
 			], item)
@@ -484,7 +486,8 @@ class RoomActionsView extends React.Component {
 const mapStateToProps = state => ({
 	user: {
 		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
+		token: state.login.user && state.login.user.token,
+		statusText: state.login.user && state.login.user.statusText
 	},
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
 });

app/views/RoomActionsView/styles.js

@@ -72,5 +72,11 @@ export default StyleSheet.create({
 	roomTitleRow: {
 		flexDirection: 'row',
 		alignItems: 'center'
+	},
+	statusText: {
+		paddingTop: 5,
+		fontSize: 14,
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textMedium
 	}
 });

app/views/RoomInfoView/index.js

@@ -273,6 +273,7 @@ class RoomInfoView extends React.Component {
 					<View style={styles.avatarContainer}>
 						{this.renderAvatar(room, roomUser)}
 						<View style={styles.roomTitleContainer}>{ getRoomTitle(room, this.t, roomUser && roomUser.name) }</View>
+						{this.t === 'd' ? <Text style={styles.statusText} ellipsizeMode='tail' numberOfLines={2}>{roomUser.statusText}</Text> : null }
 					</View>
 					{this.isDirect() ? this.renderDirect() : this.renderChannel()}
 				</SafeAreaView>
@@ -285,7 +286,8 @@ const mapStateToProps = state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
 	user: {
 		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
+		token: state.login.user && state.login.user.token,
+		statusText: state.login.user && state.login.user.statusText
 	},
 	Message_TimeFormat: state.settings.Message_TimeFormat
 });

app/views/RoomInfoView/styles.js

@@ -74,5 +74,11 @@ export default StyleSheet.create({
 		fontSize: 14,
 		...sharedStyles.textColorNormal,
 		...sharedStyles.textRegular
+	},
+	statusText: {
+		paddingTop: 10,
+		fontSize: 18,
+		...sharedStyles.textColorDescription,
+		...sharedStyles.textMedium
 	}
 });

app/views/RoomView/index.js

@@ -89,7 +89,8 @@ class RoomView extends React.Component {
 		user: PropTypes.shape({
 			id: PropTypes.string.isRequired,
 			username: PropTypes.string.isRequired,
-			token: PropTypes.string.isRequired
+			token: PropTypes.string.isRequired,
+			statusText: PropTypes.string
 		}),
 		showActions: PropTypes.bool,
 		showErrorActions: PropTypes.bool,
@@ -624,6 +625,11 @@ class RoomView extends React.Component {
 		return (
 			<SafeAreaView style={styles.container} testID='room-view' forceInset={{ vertical: 'never' }}>
 				<StatusBar />
+				{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 }
 				<List rid={rid} t={t} tmid={this.tmid} renderRow={this.renderItem} />
 				{this.renderFooter()}
 				{this.renderActions()}
@@ -652,7 +658,8 @@ const mapStateToProps = state => ({
 	user: {
 		id: state.login.user && state.login.user.id,
 		username: state.login.user && state.login.user.username,
-		token: state.login.user && state.login.user.token
+		token: state.login.user && state.login.user.token,
+		statusText: state.login.user && state.login.user.statusText
 	},
 	actionMessage: state.messages.actionMessage,
 	editing: state.messages.editing,

app/views/RoomView/styles.js

@@ -64,5 +64,16 @@ export default StyleSheet.create({
 		fontSize: 16,
 		...sharedStyles.textMedium,
 		...sharedStyles.textColorNormal
+	},
+	statusTextContainer: {
+		padding: 10,
+		backgroundColor: '#292929',
+		justifyContent: 'flex-end',
+		alignItems: 'center'
+	},
+	statusText: {
+		fontSize: 14,
+		color: COLOR_WHITE,
+		...sharedStyles.textMedium
 	}
 });

app/views/SidebarView/index.js

@@ -88,6 +88,9 @@ class Sidebar extends Component {
 			if (nextProps.user.status !== user.status) {
 				return true;
 			}
+			if (nextProps.user.statusText !== user.statusText) {
+				return true;
+			}
 			if (nextProps.user.username !== user.username) {
 				return true;
 			}
@@ -210,6 +213,21 @@ class Sidebar extends Component {
 		);
 	}
 
+	renderStatusText = () => {
+		const { activeItemKey, user } = this.props;
+		return (
+			<React.Fragment>
+				<SidebarItem
+					text={user.statusText || I18n.t('Set_custom_status')}
+					left={<CustomIcon name='edit' size={20} color={COLOR_TEXT} />}
+					onPress={() => this.sidebarNavigate('RoomsListView')}
+					testID='sidebar-status'
+					current={activeItemKey === 'StatusStack'}
+				/>
+			</React.Fragment>
+		);
+	}
+
 	renderStatus = () => {
 		const { status } = this.state;
 		const { user } = this.props;
@@ -261,6 +279,8 @@ class Sidebar extends Component {
 
 					<Separator key='separator-header' />
 
+					{this.renderStatusText()}
+
 					{!showStatus ? this.renderNavigation() : null}
 					{showStatus ? this.renderStatus() : null}
 				</ScrollView>
@@ -275,6 +295,7 @@ const mapStateToProps = state => ({
 		id: state.login.user && state.login.user.id,
 		language: state.login.user && state.login.user.language,
 		status: state.login.user && state.login.user.status,
+		statusText: state.login.user && state.login.user.statusText,
 		username: state.login.user && state.login.user.username,
 		token: state.login.user && state.login.user.token,
 		roles: state.login.user && state.login.user.roles