diff options
| -rw-r--r-- | src/components/dialogs/BirthDateSettings.tsx | 74 | ||||
| -rw-r--r-- | src/screens/Moderation/index.tsx | 5 | ||||
| -rw-r--r-- | src/view/screens/Settings/index.tsx | 11 |
3 files changed, 44 insertions, 46 deletions
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx index 62c95c78d..4a3e96e56 100644 --- a/src/components/dialogs/BirthDateSettings.tsx +++ b/src/components/dialogs/BirthDateSettings.tsx @@ -1,48 +1,64 @@ import React from 'react' import {useLingui} from '@lingui/react' import {Trans, msg} from '@lingui/macro' +import {View} from 'react-native' import * as Dialog from '#/components/Dialog' import {Text} from '../Typography' import {DateInput} from '#/view/com/util/forms/DateInput' import {logger} from '#/logger' import { + usePreferencesQuery, usePreferencesSetBirthDateMutation, UsePreferencesQueryResponse, } from '#/state/queries/preferences' -import {Button, ButtonText} from '../Button' +import {Button, ButtonIcon, ButtonText} from '../Button' import {atoms as a, useTheme} from '#/alf' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {cleanError} from '#/lib/strings/errors' -import {ActivityIndicator, View} from 'react-native' import {isIOS, isWeb} from '#/platform/detection' +import {Loader} from '#/components/Loader' export function BirthDateSettingsDialog({ control, - preferences, }: { control: Dialog.DialogControlProps - preferences: UsePreferencesQueryResponse | undefined }) { + const t = useTheme() const {_} = useLingui() - const {isPending, isError, error, mutateAsync} = - usePreferencesSetBirthDateMutation() + const {isLoading, error, data: preferences} = usePreferencesQuery() return ( <Dialog.Outer control={control}> <Dialog.Handle /> + <Dialog.ScrollableInner label={_(msg`My Birthday`)}> - {preferences && !isPending ? ( - <BirthdayInner - control={control} - preferences={preferences} - isError={isError} - error={error} - setBirthDate={mutateAsync} + <View style={[a.gap_sm, a.pb_lg]}> + <Text style={[a.text_2xl, a.font_bold]}> + <Trans>My Birthday</Trans> + </Text> + <Text style={[a.text_md, t.atoms.text_contrast_medium]}> + <Trans>This information is not shared with other users.</Trans> + </Text> + </View> + + {isLoading ? ( + <Loader size="xl" /> + ) : error || !preferences ? ( + <ErrorMessage + message={ + error?.toString() || + _( + msg`We were unable to load your birth date preferences. Please try again.`, + ) + } + style={[a.rounded_sm]} /> ) : ( - <ActivityIndicator size="large" style={a.my_5xl} /> + <BirthdayInner control={control} preferences={preferences} /> )} + + <Dialog.Close /> </Dialog.ScrollableInner> </Dialog.Outer> ) @@ -51,20 +67,18 @@ export function BirthDateSettingsDialog({ function BirthdayInner({ control, preferences, - isError, - error, - setBirthDate, }: { control: Dialog.DialogControlProps preferences: UsePreferencesQueryResponse - isError: boolean - error: unknown - setBirthDate: (args: {birthDate: Date}) => Promise<unknown> }) { const {_} = useLingui() const [date, setDate] = React.useState(preferences.birthDate || new Date()) - const t = useTheme() - + const { + isPending, + isError, + error, + mutateAsync: setBirthDate, + } = usePreferencesSetBirthDateMutation() const hasChanged = date !== preferences.birthDate const onSave = React.useCallback(async () => { @@ -74,21 +88,13 @@ function BirthdayInner({ await setBirthDate({birthDate: date}) } control.close() - } catch (e) { - logger.error(`setBirthDate failed`, {message: e}) + } catch (e: any) { + logger.error(`setBirthDate failed`, {message: e.message}) } }, [date, setBirthDate, control, hasChanged]) return ( <View style={a.gap_lg} testID="birthDateSettingsDialog"> - <View style={[a.gap_sm]}> - <Text style={[a.text_2xl, a.font_bold]}> - <Trans>My Birthday</Trans> - </Text> - <Text style={t.atoms.text_contrast_medium}> - <Trans>This information is not shared with other users.</Trans> - </Text> - </View> <View style={isIOS && [a.w_full, a.align_center]}> <DateInput handleAsUTC @@ -103,6 +109,7 @@ function BirthdayInner({ accessibilityLabelledBy="birthDate" /> </View> + {isError ? ( <ErrorMessage message={cleanError(error)} style={[a.rounded_sm]} /> ) : undefined} @@ -110,13 +117,14 @@ function BirthdayInner({ <View style={isWeb && [a.flex_row, a.justify_end]}> <Button label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)} - size={isWeb ? 'small' : 'medium'} + size="medium" onPress={onSave} variant="solid" color="primary"> <ButtonText> {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>} </ButtonText> + {isPending && <ButtonIcon icon={Loader} />} </Button> </View> </View> diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 26fa9ec77..d0bfaeade 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -308,10 +308,7 @@ export function ModerationScreenInner({ </ButtonText> </Button> - <BirthDateSettingsDialog - control={birthdateDialogControl} - preferences={preferences} - /> + <BirthDateSettingsDialog control={birthdateDialogControl} /> </> )} <View diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index 1b96a09af..21225f581 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -40,10 +40,7 @@ import { } from '#/state/preferences' import {useSession, useSessionApi, SessionAccount} from '#/state/session' import {useProfileQuery} from '#/state/queries/profile' -import { - useClearPreferencesMutation, - usePreferencesQuery, -} from '#/state/queries/preferences' +import {useClearPreferencesMutation} from '#/state/queries/preferences' // TODO import {useInviteCodesQuery} from '#/state/queries/invites' import {clear as clearStorage} from '#/state/persisted/store' import {clearLegacyStorage} from '#/state/persisted/legacy' @@ -156,7 +153,6 @@ export function SettingsScreen({}: Props) { const {screen, track} = useAnalytics() const {openModal} = useModalControls() const {isSwitchingAccounts, accounts, currentAccount} = useSession() - const {data: preferences} = usePreferencesQuery() const {mutate: clearPreferences} = useClearPreferencesMutation() // TODO // const {data: invites} = useInviteCodesQuery() @@ -295,10 +291,7 @@ export function SettingsScreen({}: Props) { return ( <View style={s.hContentRegion} testID="settingsScreen"> <ExportCarDialog control={exportCarControl} /> - <BirthDateSettingsDialog - control={birthdayControl} - preferences={preferences} - /> + <BirthDateSettingsDialog control={birthdayControl} /> <SimpleViewHeader showBackButton={isMobile} |