diff --git a/app/views/StatusView/index.tsx b/app/views/StatusView/index.tsx index b2ab3d9773d..899758cfc02 100644 --- a/app/views/StatusView/index.tsx +++ b/app/views/StatusView/index.tsx @@ -1,5 +1,5 @@ import { useNavigation } from '@react-navigation/native'; -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect, useMemo } from 'react'; import { FlatList, StyleSheet, View } from 'react-native'; import { useDispatch, useSelector } from 'react-redux'; import { useForm } from 'react-hook-form'; @@ -122,23 +122,44 @@ const StatusView = (): React.ReactElement => { resolver: yupResolver(validationSchema) }); - const inputValues = watch(); - const { statusText } = inputValues; + const watchedStatus = watch('status'); + const statusText = watch('statusText'); const dispatch = useDispatch(); const { setOptions, goBack } = useNavigation(); const { colors } = useTheme(); - const submit = async () => { - const { status } = inputValues; + const setCustomStatus = useCallback( + async (status: TUserStatus, statusText: string) => { + sendLoadingEvent({ visible: true }); + try { + await setUserStatus(status, statusText); + dispatch(setUser({ statusText, status })); + logEvent(events.STATUS_CUSTOM); + showToast(I18n.t('Status_saved_successfully')); + } 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; + logEvent(events.STATUS_CUSTOM_F); + showErrorAlert(messageError); + log(e); + } + sendLoadingEvent({ visible: false }); + }, + [dispatch] + ); + + const submit = useCallback(async () => { logEvent(events.STATUS_DONE); - if (statusText !== user.statusText || status !== user.status) { - await setCustomStatus(status, statusText); + if (statusText !== user.statusText || watchedStatus !== user.status) { + await setCustomStatus(watchedStatus, statusText); } goBack(); - }; + }, [statusText, user.statusText, watchedStatus, user.status, goBack, setCustomStatus]); - useA11yErrorAnnouncement({ errors, inputValues }); + useA11yErrorAnnouncement({ errors, inputValues: { status: watchedStatus, statusText } }); useEffect(() => { const setHeader = () => { @@ -148,47 +169,28 @@ const StatusView = (): React.ReactElement => { }); }; setHeader(); - }, [isMasterDetail]); + }, [isMasterDetail, goBack, setOptions]); const setStatus = (updatedStatus: TUserStatus) => { setValue('status', updatedStatus); }; - const setCustomStatus = async (status: TUserStatus, statusText: string) => { - sendLoadingEvent({ visible: true }); - try { - await setUserStatus(status, statusText); - dispatch(setUser({ statusText, status })); - logEvent(events.STATUS_CUSTOM); - showToast(I18n.t('Status_saved_successfully')); - } 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; - logEvent(events.STATUS_CUSTOM_F); - showErrorAlert(messageError); - log(e); - } - sendLoadingEvent({ visible: false }); - }; - const statusType = Accounts_AllowInvisibleStatusOption ? STATUS : STATUS.filter(s => s.id !== 'offline'); - const isStatusChanged = () => { - const { status } = inputValues; - if (!isValid) { - return true; - } - const isStatusEqual = status === user.status; - const isStatusTextEqual = (!!user.statusText && user.statusText === statusText) ?? (!user.statusText && !statusText); - return !isValid && isStatusEqual && isStatusTextEqual; - }; - - const FooterComponent = () => ( - -