import React from 'react';
import PropTypes from 'prop-types';
import { FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import I18n from '../i18n';
import * as List from '../containers/List';
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, { logEvent, events } from '../utils/log';
import { LISTENER } from '../containers/Toast';
import { withTheme } from '../theme';
import { getUserSelector } from '../selectors/login';
import * as HeaderButton from '../containers/HeaderButton';
import { setUser as setUserAction } from '../actions/login';
import SafeAreaView from '../containers/SafeAreaView';
const STATUS = [{
id: 'online',
name: 'Online'
}, {
id: 'busy',
name: 'Busy'
}, {
id: 'away',
name: 'Away'
}, {
id: 'offline',
name: 'Invisible'
}];
const styles = StyleSheet.create({
inputContainer: {
marginTop: 32,
marginBottom: 32
},
inputLeft: {
position: 'absolute',
top: 12,
left: 12
},
inputStyle: {
paddingLeft: 48
}
});
class StatusView extends React.Component {
static propTypes = {
user: PropTypes.shape({
id: PropTypes.string,
status: PropTypes.string,
statusText: PropTypes.string
}),
theme: PropTypes.string,
navigation: PropTypes.object,
isMasterDetail: PropTypes.bool,
setUser: PropTypes.func
}
constructor(props) {
super(props);
const { statusText } = props.user;
this.state = { statusText: statusText || '', loading: false };
this.setHeader();
}
setHeader = () => {
const { navigation, isMasterDetail } = this.props;
navigation.setOptions({
title: I18n.t('Edit_Status'),
headerLeft: isMasterDetail ? undefined : () => ,
headerRight: () => (
)
});
}
submit = async() => {
logEvent(events.STATUS_DONE);
const { statusText } = this.state;
const { user } = this.props;
if (statusText !== user.statusText) {
await this.setCustomStatus(statusText);
}
this.close();
}
close = () => {
const { navigation } = this.props;
navigation.goBack();
}
setCustomStatus = async() => {
const { statusText } = this.state;
const { user, setUser } = this.props;
this.setState({ loading: true });
try {
const result = await RocketChat.setUserStatus(user.status, statusText);
if (result.success) {
logEvent(events.STATUS_CUSTOM);
setUser({ statusText });
EventEmitter.emit(LISTENER, { message: I18n.t('Status_saved_successfully') });
} else {
logEvent(events.STATUS_CUSTOM_F);
EventEmitter.emit(LISTENER, { message: I18n.t('error-could-not-change-status') });
}
} catch {
logEvent(events.STATUS_CUSTOM_F);
EventEmitter.emit(LISTENER, { message: I18n.t('error-could-not-change-status') });
}
this.setState({ loading: false });
}
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 { statusText } = this.state;
const { user, setUser } = this.props;
const { id, name } = item;
return (
{
logEvent(events[`STATUS_${ item.id.toUpperCase() }`]);
if (user.status !== item.id) {
try {
const result = await RocketChat.setUserStatus(item.id, statusText);
if (result.success) {
setUser({ status: item.id });
}
} catch (e) {
logEvent(events.SET_STATUS_FAIL);
log(e);
}
}
}}
testID={`status-view-${ id }`}
left={() => }
/>
);
}
render() {
const { loading } = this.state;
return (
item.id}
renderItem={this.renderItem}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={List.Separator}
ItemSeparatorComponent={List.Separator}
/>
);
}
}
const mapStateToProps = state => ({
user: getUserSelector(state),
isMasterDetail: state.app.isMasterDetail
});
const mapDispatchToProps = dispatch => ({
setUser: user => dispatch(setUserAction(user))
});
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(StatusView));