diff --git a/src/components/dialogs/BirthdaySettings.tsx b/src/components/dialogs/BirthdaySettings.tsx
new file mode 100644
index 00000000..00f6ff57
--- /dev/null
+++ b/src/components/dialogs/BirthdaySettings.tsx
@@ -0,0 +1,122 @@
+import React from 'react'
+import {useLingui} from '@lingui/react'
+import {Trans, msg} from '@lingui/macro'
+
+import * as Dialog from '#/components/Dialog'
+import {Text} from '../Typography'
+import {DateInput} from '#/view/com/util/forms/DateInput'
+import {logger} from '#/logger'
+import {
+ usePreferencesSetBirthDateMutation,
+ UsePreferencesQueryResponse,
+} from '#/state/queries/preferences'
+import {Button, ButtonText} from '../Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {cleanError} from '#/lib/strings/errors'
+import {ActivityIndicator, View} from 'react-native'
+
+export function BirthdaySettingsDialog({
+ control,
+ preferences,
+}: {
+ control: Dialog.DialogControlProps
+ preferences: UsePreferencesQueryResponse | undefined
+}) {
+ const {_} = useLingui()
+ const {isPending, isError, error, mutateAsync} =
+ usePreferencesSetBirthDateMutation()
+
+ return (
+
+
+
+ {preferences && !isPending ? (
+
+ ) : (
+
+ )}
+
+
+ )
+}
+
+function BirthdayInner({
+ control,
+ preferences,
+ isError,
+ error,
+ setBirthDate,
+}: {
+ control: Dialog.DialogControlProps
+ preferences: UsePreferencesQueryResponse
+ isError: boolean
+ error: unknown
+ setBirthDate: (args: {birthDate: Date}) => Promise
+}) {
+ const {_} = useLingui()
+ const [date, setDate] = React.useState(preferences.birthDate || new Date())
+ const t = useTheme()
+ const {gtMobile} = useBreakpoints()
+
+ const hasChanged = date !== preferences.birthDate
+
+ const onSave = React.useCallback(async () => {
+ try {
+ // skip if date is the same
+ if (hasChanged) {
+ await setBirthDate({birthDate: date})
+ }
+ control.close()
+ } catch (e) {
+ logger.error(`setBirthDate failed`, {message: e})
+ }
+ }, [date, setBirthDate, control, hasChanged])
+
+ return (
+
+
+
+ My Birthday
+
+
+ This information is not shared with other users.
+
+
+
+ {isError ? (
+
+ ) : undefined}
+
+
+
+
+
+ )
+}
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index a18f6c87..db5be0b8 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -135,10 +135,6 @@ export interface PostLanguagesSettingsModal {
name: 'post-languages-settings'
}
-export interface BirthDateSettingsModal {
- name: 'birth-date-settings'
-}
-
export interface VerifyEmailModal {
name: 'verify-email'
showReminder?: boolean
@@ -179,7 +175,6 @@ export type Modal =
| ChangeHandleModal
| DeleteAccountModal
| EditProfileModal
- | BirthDateSettingsModal
| VerifyEmailModal
| ChangeEmailModal
| ChangePasswordModal
diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx
index 328d23dc..56bb9c83 100644
--- a/src/view/com/modals/ContentFilteringSettings.tsx
+++ b/src/view/com/modals/ContentFilteringSettings.tsx
@@ -24,6 +24,8 @@ import {
CONFIGURABLE_LABEL_GROUPS,
UsePreferencesQueryResponse,
} from '#/state/queries/preferences'
+import {useDialogControl} from '#/components/Dialog'
+import {BirthdaySettingsDialog} from '#/components/dialogs/BirthdaySettings'
export const snapPoints = ['90%']
@@ -107,11 +109,11 @@ function AdultContentEnabledPref() {
const {_} = useLingui()
const {data: preferences} = usePreferencesQuery()
const {mutate, variables} = usePreferencesSetAdultContentMutation()
- const {openModal} = useModalControls()
+ const bithdayDialogControl = useDialogControl()
const onSetAge = React.useCallback(
- () => openModal({name: 'birth-date-settings'}),
- [openModal],
+ () => bithdayDialogControl.open(),
+ [bithdayDialogControl],
)
const onToggleAdultContent = React.useCallback(async () => {
@@ -135,6 +137,10 @@ function AdultContentEnabledPref() {
return (
+
{isIOS ? (
preferences?.adultContentEnabled ? null : (
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index e03879c1..e382e6fa 100644
--- a/src/view/com/modals/Modal.tsx
+++ b/src/view/com/modals/Modal.tsx
@@ -25,7 +25,6 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
import * as ModerationDetailsModal from './ModerationDetails'
-import * as BirthDateSettingsModal from './BirthDateSettings'
import * as VerifyEmailModal from './VerifyEmail'
import * as ChangeEmailModal from './ChangeEmail'
import * as ChangePasswordModal from './ChangePassword'
@@ -122,9 +121,6 @@ export function ModalsContainer() {
} else if (activeModal?.name === 'moderation-details') {
snapPoints = ModerationDetailsModal.snapPoints
element =
- } else if (activeModal?.name === 'birth-date-settings') {
- snapPoints = BirthDateSettingsModal.snapPoints
- element =
} else if (activeModal?.name === 'verify-email') {
snapPoints = VerifyEmailModal.snapPoints
element =
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index d72b7e48..66ea2311 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -27,7 +27,6 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
import * as ModerationDetailsModal from './ModerationDetails'
-import * as BirthDateSettingsModal from './BirthDateSettings'
import * as VerifyEmailModal from './VerifyEmail'
import * as ChangeEmailModal from './ChangeEmail'
import * as ChangePasswordModal from './ChangePassword'
@@ -117,8 +116,6 @@ function Modal({modal}: {modal: ModalIface}) {
element =
} else if (modal.name === 'moderation-details') {
element =
- } else if (modal.name === 'birth-date-settings') {
- element =
} else if (modal.name === 'verify-email') {
element =
} else if (modal.name === 'change-email') {
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index 00b507a9..4ea2a670 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@@ -40,7 +40,10 @@ import {
} from '#/state/preferences'
import {useSession, useSessionApi, SessionAccount} from '#/state/session'
import {useProfileQuery} from '#/state/queries/profile'
-import {useClearPreferencesMutation} from '#/state/queries/preferences'
+import {
+ useClearPreferencesMutation,
+ usePreferencesQuery,
+} 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'
@@ -68,6 +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'
function SettingsAccountCard({account}: {account: SessionAccount}) {
const pal = usePalette('default')
@@ -152,6 +156,7 @@ 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()
@@ -159,6 +164,7 @@ export function SettingsScreen({}: Props) {
const {setShowLoggedOut} = useLoggedOutViewControls()
const closeAllActiveElements = useCloseAllActiveElements()
const exportCarControl = useDialogControl()
+ const birthdayControl = useDialogControl()
// const primaryBg = useCustomPalette({
// light: {backgroundColor: colors.blue0},
@@ -269,6 +275,10 @@ export function SettingsScreen({}: Props) {
Linking.openURL(STATUS_PAGE_URL)
}, [])
+ const onPressBirthday = React.useCallback(() => {
+ birthdayControl.open()
+ }, [birthdayControl])
+
const clearAllStorage = React.useCallback(async () => {
await clearStorage()
Toast.show(_(msg`Storage cleared, you need to restart the app now.`))
@@ -281,6 +291,10 @@ export function SettingsScreen({}: Props) {
return (
+
Birthday:{' '}
- openModal({name: 'birth-date-settings'})}>
+
Show