Chore: Evaluate StatusView - TypeScript ++hooks (#4075)
* move statusview to your specific folder * create showToast helper * migrate StatusView to hooks * fix type * add peer deep to useEffect * fix lint * fix error message
This commit is contained in:
Gleidson Daniel Silva
GitHub
parent
9642d9e8a8
commit
be19da54a3
|
|
@ -0,0 +1,4 @@
|
|||
import { LISTENER } from '../../../containers/Toast';
|
||||
import EventEmitter from '../../../utils/events';
|
||||
|
||||
export const showToast = (message: string): void => EventEmitter.emit(LISTENER, { message });
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
import React from 'react';
|
||||
import { FlatList, StyleSheet } from 'react-native';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { setUser } from '../actions/login';
|
||||
import * as HeaderButton from '../containers/HeaderButton';
|
||||
import * as List from '../containers/List';
|
||||
import Loading from '../containers/Loading';
|
||||
import SafeAreaView from '../containers/SafeAreaView';
|
||||
import Status from '../containers/Status/Status';
|
||||
import TextInput from '../containers/TextInput';
|
||||
import { LISTENER } from '../containers/Toast';
|
||||
import { IApplicationState, IBaseScreen, IUser, TUserStatus } from '../definitions';
|
||||
import I18n from '../i18n';
|
||||
import { Services } from '../lib/services';
|
||||
import { getUserSelector } from '../selectors/login';
|
||||
import { withTheme } from '../theme';
|
||||
import EventEmitter from '../utils/events';
|
||||
import { showErrorAlert } from '../utils/info';
|
||||
import log, { events, logEvent } from '../utils/log';
|
||||
|
||||
interface IStatus {
|
||||
id: TUserStatus;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const STATUS: IStatus[] = [
|
||||
{
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
interface IStatusViewState {
|
||||
statusText: string;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
interface IStatusViewProps extends IBaseScreen<any, 'StatusView'> {
|
||||
user: IUser;
|
||||
isMasterDetail: boolean;
|
||||
Accounts_AllowInvisibleStatusOption: boolean;
|
||||
}
|
||||
|
||||
class StatusView extends React.Component<IStatusViewProps, IStatusViewState> {
|
||||
constructor(props: IStatusViewProps) {
|
||||
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 : () => <HeaderButton.CancelModal onPress={this.close} />,
|
||||
headerRight: () => (
|
||||
<HeaderButton.Container>
|
||||
<HeaderButton.Item title={I18n.t('Done')} onPress={this.submit} testID='status-view-submit' />
|
||||
</HeaderButton.Container>
|
||||
)
|
||||
});
|
||||
};
|
||||
|
||||
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 (statusText: string) => {
|
||||
const { user, dispatch } = this.props;
|
||||
|
||||
this.setState({ loading: true });
|
||||
|
||||
try {
|
||||
const result = await Services.setUserStatus(user.status, statusText);
|
||||
if (result.success) {
|
||||
logEvent(events.STATUS_CUSTOM);
|
||||
dispatch(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 (
|
||||
<>
|
||||
<TextInput
|
||||
theme={theme}
|
||||
value={statusText}
|
||||
containerStyle={styles.inputContainer}
|
||||
onChangeText={text => this.setState({ statusText: text })}
|
||||
left={<Status testID={`status-view-current-${user.status}`} style={styles.inputLeft} status={user.status} size={24} />}
|
||||
inputStyle={styles.inputStyle}
|
||||
placeholder={I18n.t('What_are_you_doing_right_now')}
|
||||
testID='status-view-input'
|
||||
/>
|
||||
<List.Separator />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
renderItem = ({ item }: { item: IStatus }) => {
|
||||
const { statusText } = this.state;
|
||||
const { user, dispatch } = this.props;
|
||||
const { id, name } = item;
|
||||
return (
|
||||
<List.Item
|
||||
title={name}
|
||||
onPress={async () => {
|
||||
// @ts-ignore
|
||||
logEvent(events[`STATUS_${item.id.toUpperCase()}`]);
|
||||
if (user.status !== item.id) {
|
||||
try {
|
||||
const result = await Services.setUserStatus(item.id, statusText);
|
||||
if (result.success) {
|
||||
dispatch(setUser({ status: item.id }));
|
||||
}
|
||||
} catch (e: any) {
|
||||
const messageError =
|
||||
e.data && e.data.error.includes('[error-too-many-requests]')
|
||||
? I18n.t('error-too-many-requests', { seconds: e.data.error.replace(/\D/g, '') })
|
||||
: e.data.errorType;
|
||||
showErrorAlert(messageError);
|
||||
logEvent(events.SET_STATUS_FAIL);
|
||||
log(e);
|
||||
}
|
||||
}
|
||||
}}
|
||||
testID={`status-view-${id}`}
|
||||
left={() => <Status size={24} status={item.id} />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
const { Accounts_AllowInvisibleStatusOption } = this.props;
|
||||
|
||||
const status = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline');
|
||||
|
||||
return (
|
||||
<SafeAreaView testID='status-view'>
|
||||
<FlatList
|
||||
data={status}
|
||||
keyExtractor={item => item.id}
|
||||
renderItem={this.renderItem}
|
||||
ListHeaderComponent={this.renderHeader}
|
||||
ListFooterComponent={List.Separator}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
/>
|
||||
<Loading visible={loading} />
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: IApplicationState) => ({
|
||||
user: getUserSelector(state),
|
||||
isMasterDetail: state.app.isMasterDetail,
|
||||
Accounts_AllowInvisibleStatusOption: (state.settings.Accounts_AllowInvisibleStatusOption as boolean) ?? true
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(withTheme(StatusView));
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
import { useNavigation } from '@react-navigation/native';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { FlatList, StyleSheet } from 'react-native';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { setUser } from '../../actions/login';
|
||||
import * as HeaderButton from '../../containers/HeaderButton';
|
||||
import * as List from '../../containers/List';
|
||||
import Loading from '../../containers/Loading';
|
||||
import SafeAreaView from '../../containers/SafeAreaView';
|
||||
import StatusIcon from '../../containers/Status/Status';
|
||||
import TextInput from '../../containers/TextInput';
|
||||
import { IApplicationState, TUserStatus } from '../../definitions';
|
||||
import I18n from '../../i18n';
|
||||
import { showToast } from '../../lib/methods/helpers/showToast';
|
||||
import { Services } from '../../lib/services';
|
||||
import { getUserSelector } from '../../selectors/login';
|
||||
import { useTheme } from '../../theme';
|
||||
import { showErrorAlert } from '../../utils/info';
|
||||
import log, { events, logEvent } from '../../utils/log';
|
||||
|
||||
interface IStatus {
|
||||
id: TUserStatus;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const STATUS: IStatus[] = [
|
||||
{
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
const Status = ({ status, statusText }: { status: IStatus; statusText: string }) => {
|
||||
const user = useSelector((state: IApplicationState) => getUserSelector(state));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { id, name } = status;
|
||||
return (
|
||||
<List.Item
|
||||
title={name}
|
||||
onPress={async () => {
|
||||
const key = `STATUS_${status.id.toUpperCase()}` as keyof typeof events;
|
||||
logEvent(events[key]);
|
||||
if (user.status !== status.id) {
|
||||
try {
|
||||
const result = await Services.setUserStatus(status.id, statusText);
|
||||
if (result.success) {
|
||||
dispatch(setUser({ status: status.id }));
|
||||
}
|
||||
} catch (e: any) {
|
||||
const messageError =
|
||||
e.data && e.data.error.includes('[error-too-many-requests]')
|
||||
? I18n.t('error-too-many-requests', { seconds: e.data.error.replace(/\D/g, '') })
|
||||
: e.data.errorType;
|
||||
showErrorAlert(messageError);
|
||||
logEvent(events.SET_STATUS_FAIL);
|
||||
log(e);
|
||||
}
|
||||
}
|
||||
}}
|
||||
testID={`status-view-${id}`}
|
||||
left={() => <StatusIcon size={24} status={status.id} />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const StatusView = (): React.ReactElement => {
|
||||
const user = useSelector((state: IApplicationState) => getUserSelector(state));
|
||||
const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
|
||||
const Accounts_AllowInvisibleStatusOption = useSelector(
|
||||
(state: IApplicationState) => state.settings.Accounts_AllowInvisibleStatusOption
|
||||
);
|
||||
|
||||
const [statusText, setStatusText] = useState(user.statusText || '');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { setOptions, goBack } = useNavigation();
|
||||
|
||||
const { theme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
const submit = async () => {
|
||||
logEvent(events.STATUS_DONE);
|
||||
if (statusText !== user.statusText) {
|
||||
await setCustomStatus(statusText);
|
||||
}
|
||||
goBack();
|
||||
};
|
||||
const setHeader = () => {
|
||||
setOptions({
|
||||
title: I18n.t('Edit_Status'),
|
||||
headerLeft: isMasterDetail ? undefined : () => <HeaderButton.CancelModal onPress={goBack} />,
|
||||
headerRight: () => (
|
||||
<HeaderButton.Container>
|
||||
<HeaderButton.Item title={I18n.t('Done')} onPress={submit} testID='status-view-submit' />
|
||||
</HeaderButton.Container>
|
||||
)
|
||||
});
|
||||
};
|
||||
setHeader();
|
||||
}, [statusText, user.status]);
|
||||
|
||||
const setCustomStatus = async (statusText: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await Services.setUserStatus(user.status, statusText);
|
||||
if (result.success) {
|
||||
dispatch(setUser({ statusText }));
|
||||
logEvent(events.STATUS_CUSTOM);
|
||||
showToast(I18n.t('Status_saved_successfully'));
|
||||
} else {
|
||||
logEvent(events.STATUS_CUSTOM_F);
|
||||
showToast(I18n.t('error-could-not-change-status'));
|
||||
}
|
||||
} catch (e: any) {
|
||||
const messageError =
|
||||
e.data && e.data.error.includes('[error-too-many-requests]')
|
||||
? I18n.t('error-too-many-requests', { seconds: e.data.error.replace(/\D/g, '') })
|
||||
: e.data.errorType;
|
||||
logEvent(events.STATUS_CUSTOM_F);
|
||||
showErrorAlert(messageError);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const status = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline');
|
||||
|
||||
return (
|
||||
<SafeAreaView testID='status-view'>
|
||||
<FlatList
|
||||
data={status}
|
||||
keyExtractor={item => item.id}
|
||||
renderItem={({ item }) => <Status status={item} statusText={statusText} />}
|
||||
ListHeaderComponent={
|
||||
<>
|
||||
<TextInput
|
||||
theme={theme}
|
||||
value={statusText}
|
||||
containerStyle={styles.inputContainer}
|
||||
onChangeText={text => setStatusText(text)}
|
||||
left={
|
||||
<StatusIcon
|
||||
testID={`status-view-current-${user.status}`}
|
||||
style={styles.inputLeft}
|
||||
status={user.status}
|
||||
size={24}
|
||||
/>
|
||||
}
|
||||
inputStyle={styles.inputStyle}
|
||||
placeholder={I18n.t('What_are_you_doing_right_now')}
|
||||
testID='status-view-input'
|
||||
/>
|
||||
<List.Separator />
|
||||
</>
|
||||
}
|
||||
ListFooterComponent={List.Separator}
|
||||
ItemSeparatorComponent={List.Separator}
|
||||
/>
|
||||
<Loading visible={loading} />
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusView;
|
||||
Loading…
Reference in New Issue