diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/dialogs/BirthDateSettings.tsx (renamed from src/components/dialogs/BirthdaySettings.tsx) | 2 | ||||
-rw-r--r-- | src/view/com/modals/BirthDateSettings.tsx | 151 | ||||
-rw-r--r-- | src/view/com/modals/ContentFilteringSettings.tsx | 4 | ||||
-rw-r--r-- | src/view/screens/Settings/index.tsx | 4 |
4 files changed, 5 insertions, 156 deletions
diff --git a/src/components/dialogs/BirthdaySettings.tsx b/src/components/dialogs/BirthDateSettings.tsx index 00f6ff57e..47d7faa0c 100644 --- a/src/components/dialogs/BirthdaySettings.tsx +++ b/src/components/dialogs/BirthDateSettings.tsx @@ -16,7 +16,7 @@ import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {cleanError} from '#/lib/strings/errors' import {ActivityIndicator, View} from 'react-native' -export function BirthdaySettingsDialog({ +export function BirthDateSettingsDialog({ control, preferences, }: { diff --git a/src/view/com/modals/BirthDateSettings.tsx b/src/view/com/modals/BirthDateSettings.tsx deleted file mode 100644 index 1cab95989..000000000 --- a/src/view/com/modals/BirthDateSettings.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React, {useState} from 'react' -import { - ActivityIndicator, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' -import {Text} from '../util/text/Text' -import {DateInput} from '../util/forms/DateInput' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' -import { - usePreferencesQuery, - usePreferencesSetBirthDateMutation, - UsePreferencesQueryResponse, -} from '#/state/queries/preferences' -import {logger} from '#/logger' - -export const snapPoints = ['50%', '90%'] - -function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() - const {_} = useLingui() - const { - isPending, - isError, - error, - mutateAsync: setBirthDate, - } = usePreferencesSetBirthDateMutation() - const [date, setDate] = useState(preferences.birthDate || new Date()) - const {closeModal} = useModalControls() - - const onSave = React.useCallback(async () => { - try { - await setBirthDate({birthDate: date}) - closeModal() - } catch (e) { - logger.error(`setBirthDate failed`, {message: e}) - } - }, [date, setBirthDate, closeModal]) - - return ( - <View - testID="birthDateSettingsModal" - style={[pal.view, styles.container, isMobile && {paddingHorizontal: 18}]}> - <View style={styles.titleSection}> - <Text type="title-lg" style={[pal.text, styles.title]}> - <Trans>My Birthday</Trans> - </Text> - </View> - - <Text type="lg" style={[pal.textLight, {marginBottom: 10}]}> - <Trans>This information is not shared with other users.</Trans> - </Text> - - <View> - <DateInput - handleAsUTC - testID="birthdayInput" - value={date} - onChange={setDate} - buttonType="default-light" - buttonStyle={[pal.border, styles.dateInputButton]} - buttonLabelType="lg" - accessibilityLabel={_(msg`Birthday`)} - accessibilityHint={_(msg`Enter your birth date`)} - accessibilityLabelledBy="birthDate" - /> - </View> - - {isError ? ( - <ErrorMessage message={cleanError(error)} style={styles.error} /> - ) : undefined} - - <View style={[styles.btnContainer, pal.borderDark]}> - {isPending ? ( - <View style={styles.btn}> - <ActivityIndicator color="#fff" /> - </View> - ) : ( - <TouchableOpacity - testID="confirmBtn" - onPress={onSave} - style={styles.btn} - accessibilityRole="button" - accessibilityLabel={_(msg`Save`)} - accessibilityHint=""> - <Text style={[s.white, s.bold, s.f18]}> - <Trans>Save</Trans> - </Text> - </TouchableOpacity> - )} - </View> - </View> - ) -} - -export function Component({}: {}) { - const {data: preferences} = usePreferencesQuery() - - return !preferences ? ( - <ActivityIndicator /> - ) : ( - <Inner preferences={preferences} /> - ) -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingBottom: isWeb ? 0 : 40, - }, - titleSection: { - paddingTop: isWeb ? 0 : 4, - paddingBottom: isWeb ? 14 : 10, - }, - title: { - textAlign: 'center', - fontWeight: '600', - marginBottom: 5, - }, - error: { - borderRadius: 6, - marginTop: 10, - }, - dateInputButton: { - borderWidth: 1, - borderRadius: 6, - paddingVertical: 14, - }, - btn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 32, - padding: 14, - backgroundColor: colors.blue3, - }, - btnContainer: { - paddingTop: 20, - paddingHorizontal: 20, - }, -}) diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx index 56bb9c837..3c7edcf0d 100644 --- a/src/view/com/modals/ContentFilteringSettings.tsx +++ b/src/view/com/modals/ContentFilteringSettings.tsx @@ -25,7 +25,7 @@ import { UsePreferencesQueryResponse, } from '#/state/queries/preferences' import {useDialogControl} from '#/components/Dialog' -import {BirthdaySettingsDialog} from '#/components/dialogs/BirthdaySettings' +import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' export const snapPoints = ['90%'] @@ -137,7 +137,7 @@ function AdultContentEnabledPref() { return ( <View style={s.mb10}> - <BirthdaySettingsDialog + <BirthDateSettingsDialog control={bithdayDialogControl} preferences={preferences} /> diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index 4ea2a6701..3b5e190c1 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -71,7 +71,7 @@ import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {ExportCarDialog} from './ExportCarDialog' -import {BirthdaySettingsDialog} from '#/components/dialogs/BirthdaySettings' +import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' function SettingsAccountCard({account}: {account: SessionAccount}) { const pal = usePalette('default') @@ -291,7 +291,7 @@ export function SettingsScreen({}: Props) { return ( <View style={s.hContentRegion} testID="settingsScreen"> <ExportCarDialog control={exportCarControl} /> - <BirthdaySettingsDialog + <BirthDateSettingsDialog control={birthdayControl} preferences={preferences} /> |