diff --git a/app/constants/settings.js b/app/constants/settings.js
index 2b26af320..f01c79ae2 100644
--- a/app/constants/settings.js
+++ b/app/constants/settings.js
@@ -14,6 +14,9 @@ export default {
Accounts_AllowUserProfileChange: {
type: 'valueAsBoolean'
},
+ Accounts_AllowUserStatusMessageChange: {
+ type: 'valueAsBoolean'
+ },
Accounts_AllowUsernameChange: {
type: 'valueAsBoolean'
},
diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js
index f696f2afd..7cb5375f1 100644
--- a/app/containers/HeaderButton.js
+++ b/app/containers/HeaderButton.js
@@ -42,7 +42,7 @@ export const CloseModalButton = React.memo(({ navigation, testID, onPress = () =
));
-export const CloseShareExtensionButton = React.memo(({ onPress, testID }) => (
+export const CancelModalButton = React.memo(({ onPress, testID }) => (
{isIOS
?
- {this.renderAnnouncementModal()}
{this.renderFooter()}
{this.renderActions()}
diff --git a/app/views/ShareListView/index.js b/app/views/ShareListView/index.js
index d16b9c8fe..55d00d71d 100644
--- a/app/views/ShareListView/index.js
+++ b/app/views/ShareListView/index.js
@@ -20,7 +20,7 @@ import log from '../../utils/log';
import { canUploadFile } from '../../utils/media';
import DirectoryItem, { ROW_HEIGHT } from '../../presentation/DirectoryItem';
import ServerItem from '../../presentation/ServerItem';
-import { CloseShareExtensionButton, CustomHeaderButtons, Item } from '../../containers/HeaderButton';
+import { CancelModalButton, CustomHeaderButtons, Item } from '../../containers/HeaderButton';
import ShareListHeader from './Header';
import ActivityIndicator from '../../containers/ActivityIndicator';
@@ -66,7 +66,7 @@ class ShareListView extends React.Component {
)
: (
-
diff --git a/app/views/SidebarView/SidebarItem.js b/app/views/SidebarView/SidebarItem.js
index c0eadea63..0b2b8d2bc 100644
--- a/app/views/SidebarView/SidebarItem.js
+++ b/app/views/SidebarView/SidebarItem.js
@@ -8,7 +8,7 @@ import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
const Item = React.memo(({
- left, text, onPress, testID, current, theme
+ left, right, text, onPress, testID, current, theme
}) => (
-
+
{left}
@@ -25,11 +25,15 @@ const Item = React.memo(({
{text}
+
+ {right}
+
));
Item.propTypes = {
left: PropTypes.element,
+ right: PropTypes.element,
text: PropTypes.string,
current: PropTypes.bool,
onPress: PropTypes.func,
diff --git a/app/views/SidebarView/index.js b/app/views/SidebarView/index.js
index 65ef944fc..cad318486 100644
--- a/app/views/SidebarView/index.js
+++ b/app/views/SidebarView/index.js
@@ -1,16 +1,13 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
- ScrollView, Text, View, FlatList, SafeAreaView
+ ScrollView, Text, View, SafeAreaView
} from 'react-native';
import { connect } from 'react-redux';
-import equal from 'deep-equal';
import { Q } from '@nozbe/watermelondb';
-import Touch from '../../utils/touch';
import Avatar from '../../containers/Avatar';
import Status from '../../containers/Status/Status';
-import RocketChat from '../../lib/rocketchat';
import log from '../../utils/log';
import I18n from '../../i18n';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
@@ -19,12 +16,10 @@ import styles from './styles';
import SidebarItem from './SidebarItem';
import { themes } from '../../constants/colors';
import database from '../../lib/database';
-import { animateNextTransition } from '../../utils/layoutAnimation';
import { withTheme } from '../../theme';
import { withSplit } from '../../split';
import { getUserSelector } from '../../selectors/login';
-
-const keyExtractor = item => item.id;
+import Navigation from '../../lib/Navigation';
const Separator = React.memo(({ theme }) => );
Separator.propTypes = {
@@ -48,6 +43,7 @@ class Sidebar extends Component {
theme: PropTypes.string,
loadingServer: PropTypes.bool,
useRealName: PropTypes.bool,
+ allowStatusMessage: PropTypes.bool,
split: PropTypes.bool
}
@@ -55,28 +51,23 @@ class Sidebar extends Component {
super(props);
this.state = {
showStatus: false,
- isAdmin: false,
- status: []
+ isAdmin: false
};
}
componentDidMount() {
- this.setStatus();
this.setIsAdmin();
}
componentWillReceiveProps(nextProps) {
- const { user, loadingServer } = this.props;
- if (nextProps.user && user && user.language !== nextProps.user.language) {
- this.setStatus();
- }
+ const { loadingServer } = this.props;
if (loadingServer && nextProps.loadingServer !== loadingServer) {
this.setIsAdmin();
}
}
shouldComponentUpdate(nextProps, nextState) {
- const { status, showStatus, isAdmin } = this.state;
+ const { showStatus, isAdmin } = this.state;
const {
Site_Name, user, baseUrl, activeItemKey, split, useRealName, theme
} = this.props;
@@ -108,6 +99,9 @@ class Sidebar extends Component {
if (nextProps.user.username !== user.username) {
return true;
}
+ if (nextProps.user.statusText !== user.statusText) {
+ return true;
+ }
}
if (nextProps.split !== split) {
return true;
@@ -115,33 +109,12 @@ class Sidebar extends Component {
if (nextProps.useRealName !== useRealName) {
return true;
}
- if (!equal(nextState.status, status)) {
- return true;
- }
if (nextState.isAdmin !== isAdmin) {
return true;
}
return false;
}
- setStatus = () => {
- this.setState({
- status: [{
- id: 'online',
- name: I18n.t('Online')
- }, {
- id: 'busy',
- name: I18n.t('Busy')
- }, {
- id: 'away',
- name: I18n.t('Away')
- }, {
- id: 'offline',
- name: I18n.t('Invisible')
- }]
- });
- }
-
async setIsAdmin() {
const db = database.active;
const { user } = this.props;
@@ -165,32 +138,6 @@ class Sidebar extends Component {
navigation.navigate(route);
}
- toggleStatus = () => {
- animateNextTransition();
- this.setState(prevState => ({ showStatus: !prevState.showStatus }));
- }
-
- renderStatusItem = ({ item }) => {
- const { user } = this.props;
- return (
- }
- current={user.status === item.id}
- onPress={() => {
- this.toggleStatus();
- if (user.status !== item.id) {
- try {
- RocketChat.setUserPresenceDefaultStatus(item.id);
- } catch (e) {
- log(e);
- }
- }
- }}
- />
- );
- }
-
renderNavigation = () => {
const { isAdmin } = this.state;
const { activeItemKey, theme } = this.props;
@@ -230,23 +177,22 @@ class Sidebar extends Component {
);
}
- renderStatus = () => {
- const { status } = this.state;
- const { user } = this.props;
+ renderCustomStatus = () => {
+ const { user, theme } = this.props;
return (
- }
+ right={}
+ onPress={() => Navigation.navigate('StatusView')}
+ testID='sidebar-custom-status'
/>
);
}
render() {
- const { showStatus } = this.state;
const {
- user, Site_Name, baseUrl, useRealName, split, theme
+ user, Site_Name, baseUrl, useRealName, allowStatusMessage, split, theme
} = this.props;
if (!user) {
@@ -265,12 +211,7 @@ class Sidebar extends Component {
]}
{...scrollPersistTaps}
>
-
+
-
{useRealName ? user.name : user.username}
{Site_Name}
-
-
+
- {!split ? : null}
+
- {!showStatus && !split ? this.renderNavigation() : null}
- {showStatus ? this.renderStatus() : null}
- {!split ? : null}
+ {allowStatusMessage ? this.renderCustomStatus() : null}
+ {!split ? (
+ <>
+
+ {this.renderNavigation()}
+
+
+ ) : null}
);
@@ -305,7 +249,8 @@ const mapStateToProps = state => ({
user: getUserSelector(state),
baseUrl: state.server.server,
loadingServer: state.server.loading,
- useRealName: state.settings.UI_Use_Real_Name
+ useRealName: state.settings.UI_Use_Real_Name,
+ allowStatusMessage: state.settings.Accounts_AllowUserStatusMessageChange
});
export default connect(mapStateToProps)(withTheme(withSplit(Sidebar)));
diff --git a/app/views/SidebarView/styles.js b/app/views/SidebarView/styles.js
index b3b07f787..0075c098c 100644
--- a/app/views/SidebarView/styles.js
+++ b/app/views/SidebarView/styles.js
@@ -13,7 +13,7 @@ export default StyleSheet.create({
itemCurrent: {
backgroundColor: '#E1E5E8'
},
- itemLeft: {
+ itemHorizontal: {
marginHorizontal: 10,
width: 30,
alignItems: 'center'
@@ -48,9 +48,6 @@ export default StyleSheet.create({
fontSize: 14,
...sharedStyles.textMedium
},
- headerIcon: {
- paddingHorizontal: 10
- },
avatar: {
marginHorizontal: 10
},
diff --git a/app/views/StatusView.js b/app/views/StatusView.js
new file mode 100644
index 000000000..1f142794c
--- /dev/null
+++ b/app/views/StatusView.js
@@ -0,0 +1,218 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FlatList, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-navigation';
+import { connect } from 'react-redux';
+
+import I18n from '../i18n';
+import Separator from '../containers/Separator';
+import ListItem from '../containers/ListItem';
+import Status from '../containers/Status/Status';
+import TextInput from '../containers/TextInput';
+import EventEmitter from '../utils/events';
+import Loading from '../containers/Loading';
+import RocketChat from '../lib/rocketchat';
+import log from '../utils/log';
+
+import { LISTENER } from '../containers/Toast';
+import { themes } from '../constants/colors';
+import { withTheme } from '../theme';
+import { withSplit } from '../split';
+import { themedHeader } from '../utils/navigation';
+import { getUserSelector } from '../selectors/login';
+import { CustomHeaderButtons, Item, CancelModalButton } from '../containers/HeaderButton';
+
+const STATUS = [{
+ id: 'online',
+ name: I18n.t('Online')
+}, {
+ id: 'busy',
+ name: I18n.t('Busy')
+}, {
+ id: 'away',
+ name: I18n.t('Away')
+}, {
+ id: 'offline',
+ name: I18n.t('Invisible')
+}];
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1
+ },
+ status: {
+ marginRight: 16
+ },
+ inputContainer: {
+ marginTop: 32,
+ marginBottom: 32
+ },
+ inputLeft: {
+ position: 'absolute',
+ top: 18,
+ left: 14
+ },
+ inputStyle: {
+ paddingLeft: 40
+ }
+});
+
+class StatusView extends React.Component {
+ static navigationOptions = ({ navigation, screenProps }) => ({
+ title: I18n.t('Edit_Status'),
+ headerLeft: {})} />,
+ headerRight: (
+
+ - {})}
+ testID='status-view-submit'
+ />
+
+ ),
+ ...themedHeader(screenProps.theme)
+ })
+
+ static propTypes = {
+ user: PropTypes.shape({
+ status: PropTypes.string,
+ statusText: PropTypes.string
+ }),
+ theme: PropTypes.string,
+ split: PropTypes.bool,
+ navigation: PropTypes.object
+ }
+
+ constructor(props) {
+ super(props);
+
+ const { statusText } = props.user;
+ this.state = { statusText, loading: false };
+
+ props.navigation.setParams({ submit: this.submit, close: this.close });
+ }
+
+ submit = async() => {
+ const { statusText } = this.state;
+ const { user } = this.props;
+ if (statusText !== user.statusText) {
+ await this.setCustomStatus();
+ }
+ this.close();
+ }
+
+ close = () => {
+ const { navigation, split } = this.props;
+ if (split) {
+ navigation.goBack();
+ } else {
+ navigation.pop();
+ }
+ }
+
+ setCustomStatus = async() => {
+ const { statusText } = this.state;
+
+ this.setState({ loading: true });
+
+ try {
+ const result = await RocketChat.setUserStatus(statusText);
+ if (result.success) {
+ EventEmitter.emit(LISTENER, { message: I18n.t('Status_saved_successfully') });
+ } else {
+ EventEmitter.emit(LISTENER, { message: I18n.t('error-could-not-change-status') });
+ }
+ } catch {
+ EventEmitter.emit(LISTENER, { message: I18n.t('error-could-not-change-status') });
+ }
+
+ this.setState({ loading: false });
+ }
+
+ renderSeparator = () => {
+ const { theme } = this.props;
+ return ;
+ }
+
+ renderHeader = () => {
+ const { statusText } = this.state;
+ const { user, theme } = this.props;
+
+ return (
+ <>
+ this.setState({ statusText: text })}
+ left={(
+
+ )}
+ inputStyle={styles.inputStyle}
+ placeholder={I18n.t('What_are_you_doing_right_now')}
+ testID='status-view-input'
+ />
+
+
+ );
+ }
+
+ renderItem = ({ item }) => {
+ const { theme, user } = this.props;
+ const { id, name } = item;
+ return (
+ {
+ if (user.status !== item.id) {
+ try {
+ await RocketChat.setUserPresenceDefaultStatus(item.id);
+ } catch (e) {
+ log(e);
+ }
+ }
+ }}
+ testID={`status-view-${ id }`}
+ left={() => }
+ theme={theme}
+ />
+ );
+ }
+
+ render() {
+ const { loading } = this.state;
+ const { theme } = this.props;
+ return (
+
+ item.id}
+ contentContainerStyle={{ borderColor: themes[theme].separatorColor }}
+ renderItem={this.renderItem}
+ ListHeaderComponent={this.renderHeader}
+ ListFooterComponent={() => }
+ ItemSeparatorComponent={this.renderSeparator}
+ />
+
+
+ );
+ }
+}
+
+const mapStateToProps = state => ({
+ user: getUserSelector(state)
+});
+
+export default connect(mapStateToProps)(withSplit(withTheme(StatusView)));
diff --git a/app/views/WithoutServersView.js b/app/views/WithoutServersView.js
index 75b7968ed..566f6e1bc 100644
--- a/app/views/WithoutServersView.js
+++ b/app/views/WithoutServersView.js
@@ -5,7 +5,7 @@ import {
import PropTypes from 'prop-types';
import ShareExtension from 'rn-extensions-share';
-import { CloseShareExtensionButton } from '../containers/HeaderButton';
+import { CancelModalButton } from '../containers/HeaderButton';
import sharedStyles from './Styles';
import I18n from '../i18n';
import { themes } from '../constants/colors';
@@ -34,7 +34,7 @@ class WithoutServerView extends React.Component {
static navigationOptions = ({ screenProps }) => ({
...themedHeader(screenProps.theme),
headerLeft: (
-
diff --git a/e2e/13-profile.spec.js b/e2e/13-profile.spec.js
index 1896ca704..2447aa57f 100644
--- a/e2e/13-profile.spec.js
+++ b/e2e/13-profile.spec.js
@@ -34,6 +34,10 @@ describe('Profile screen', () => {
await expect(element(by.id('profile-view-avatar')).atIndex(0)).toExist();
});
+ it('should have custom status', async() => {
+ await expect(element(by.id('profile-view-custom-status'))).toExist();
+ });
+
it('should have name', async() => {
await expect(element(by.id('profile-view-name'))).toExist();
});
@@ -76,6 +80,16 @@ describe('Profile screen', () => {
});
describe('Usage', async() => {
+ it('should change custom status', async() => {
+ await element(by.type('UIScrollView')).atIndex(1).swipe('down');
+ await element(by.id('profile-view-custom-status')).replaceText(`${ data.user }new`);
+ await sleep(1000);
+ await element(by.type('UIScrollView')).atIndex(1).swipe('up');
+ await sleep(1000);
+ await element(by.id('profile-view-submit')).tap();
+ await waitForToast();
+ });
+
it('should change name and username', async() => {
await element(by.type('UIScrollView')).atIndex(1).swipe('down');
await element(by.id('profile-view-name')).replaceText(`${ data.user }new`);
diff --git a/e2e/16-status.spec.js b/e2e/16-status.spec.js
new file mode 100644
index 000000000..5b9e6b2d1
--- /dev/null
+++ b/e2e/16-status.spec.js
@@ -0,0 +1,44 @@
+const {
+ expect, element, by, waitFor
+} = require('detox');
+const { sleep } = require('./helpers/app');
+
+async function waitForToast() {
+ await sleep(5000);
+}
+
+describe('Status screen', () => {
+ before(async() => {
+ await element(by.id('rooms-list-view-sidebar')).tap();
+ await waitFor(element(by.id('sidebar-view'))).toBeVisible().withTimeout(2000);
+ await waitFor(element(by.id('sidebar-custom-status'))).toBeVisible().withTimeout(2000);
+
+ await element(by.id('sidebar-custom-status')).tap();
+ await waitFor(element(by.id('status-view'))).toBeVisible().withTimeout(2000);
+ });
+
+ describe('Render', async() => {
+ it('should have status input', async() => {
+ await expect(element(by.id('status-view-input'))).toBeVisible();
+ await expect(element(by.id('status-view-online'))).toExist();
+ await expect(element(by.id('status-view-busy'))).toExist();
+ await expect(element(by.id('status-view-away'))).toExist();
+ await expect(element(by.id('status-view-offline'))).toExist();
+ });
+ });
+
+ describe('Usage', async() => {
+ it('should change status', async() => {
+ await element(by.id('status-view-busy')).tap();
+ sleep(1000);
+ await expect(element(by.id('status-view-current-busy'))).toExist();
+ });
+
+ it('should change status text', async() => {
+ await element(by.id('status-view-input')).replaceText('status-text-new');
+ await sleep(1000);
+ await element(by.id('status-view-submit')).tap();
+ await waitForToast();
+ });
+ });
+});
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 6e3a8114b..0d0cf5b2a 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -22,7 +22,7 @@ const reducers = combineReducers({
}
}),
meteor: () => ({ connected: true }),
- activeUsers: () => ({ abc: 'online' })
+ activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } })
});
const store = createStore(reducers);