[FIX] User status update with hooks (#4362)

* [FIX] User status update with hooks

* add log

* fix dispatch

Co-authored-by: GleidsonDaniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto 2022-07-15 17:18:36 -03:00 committed by GitHub
parent fe7722ca10
commit 5a7f77a159
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 37 deletions

View File

@ -57,34 +57,28 @@ const styles = StyleSheet.create({
} }
}); });
const Status = ({ status }: { status: IStatus }) => { const Status = ({
const user = useSelector((state: IApplicationState) => getUserSelector(state)); statusType,
const dispatch = useDispatch(); status,
setStatus
const { id, name } = status; }: {
statusType: IStatus;
status: TUserStatus;
setStatus: (status: TUserStatus) => void;
}) => {
const { id, name } = statusType;
return ( return (
<List.Item <List.Item
title={name} title={name}
onPress={async () => { onPress={() => {
const key = `STATUS_${status.id.toUpperCase()}` as keyof typeof events; const key = `STATUS_${statusType.id.toUpperCase()}` as keyof typeof events;
logEvent(events[key]); logEvent(events[key]);
if (user.status !== status.id) { if (status !== statusType.id) {
try { setStatus(statusType.id);
await Services.setUserStatus(status.id, user.statusText || '');
dispatch(setUser({ status: status.id }));
} catch (e: any) {
const messageError =
e.error && e.error.includes('[error-too-many-requests]')
? I18n.t('error-too-many-requests', { seconds: e.reason.replace(/\D/g, '') })
: e.reason;
showErrorAlert(messageError);
logEvent(events.SET_STATUS_FAIL);
log(e);
}
} }
}} }}
testID={`status-view-${id}`} testID={`status-view-${id}`}
left={() => <StatusIcon size={24} status={status.id} />} left={() => <StatusIcon size={24} status={statusType.id} />}
/> />
); );
}; };
@ -98,6 +92,7 @@ const StatusView = (): React.ReactElement => {
const [statusText, setStatusText] = useState(user.statusText || ''); const [statusText, setStatusText] = useState(user.statusText || '');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [status, setStatus] = useState(user.status);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { setOptions, goBack } = useNavigation(); const { setOptions, goBack } = useNavigation();
@ -105,8 +100,8 @@ const StatusView = (): React.ReactElement => {
useEffect(() => { useEffect(() => {
const submit = async () => { const submit = async () => {
logEvent(events.STATUS_DONE); logEvent(events.STATUS_DONE);
if (statusText !== user.statusText) { if (statusText !== user.statusText || status !== user.status) {
await setCustomStatus(user.status, statusText); await setCustomStatus(status, statusText);
} }
goBack(); goBack();
}; };
@ -122,13 +117,13 @@ const StatusView = (): React.ReactElement => {
}); });
}; };
setHeader(); setHeader();
}, [statusText, user.status]); }, [statusText, status]);
const setCustomStatus = async (status: string, statusText: string) => { const setCustomStatus = async (status: TUserStatus, statusText: string) => {
setLoading(true); setLoading(true);
try { try {
await Services.setUserStatus(status, statusText); await Services.setUserStatus(status, statusText);
dispatch(setUser({ statusText })); dispatch(setUser({ statusText, status }));
logEvent(events.STATUS_CUSTOM); logEvent(events.STATUS_CUSTOM);
showToast(I18n.t('Status_saved_successfully')); showToast(I18n.t('Status_saved_successfully'));
} catch (e: any) { } catch (e: any) {
@ -138,32 +133,26 @@ const StatusView = (): React.ReactElement => {
: e.reason; : e.reason;
logEvent(events.STATUS_CUSTOM_F); logEvent(events.STATUS_CUSTOM_F);
showErrorAlert(messageError); showErrorAlert(messageError);
log(e);
} }
setLoading(false); setLoading(false);
}; };
const status = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline'); const statusType = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline');
return ( return (
<SafeAreaView testID='status-view'> <SafeAreaView testID='status-view'>
<FlatList <FlatList
data={status} data={statusType}
keyExtractor={item => item.id} keyExtractor={item => item.id}
renderItem={({ item }) => <Status status={item} />} renderItem={({ item }) => <Status statusType={item} status={status} setStatus={setStatus} />}
ListHeaderComponent={ ListHeaderComponent={
<> <>
<FormTextInput <FormTextInput
value={statusText} value={statusText}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
onChangeText={text => setStatusText(text)} onChangeText={text => setStatusText(text)}
left={ left={<StatusIcon testID={`status-view-current-${status}`} style={styles.inputLeft} status={status} size={24} />}
<StatusIcon
testID={`status-view-current-${user.status}`}
style={styles.inputLeft}
status={user.status}
size={24}
/>
}
inputStyle={styles.inputStyle} inputStyle={styles.inputStyle}
placeholder={I18n.t('What_are_you_doing_right_now')} placeholder={I18n.t('What_are_you_doing_right_now')}
testID='status-view-input' testID='status-view-input'