Add birth date handling

src/state/models/ui/create-account.ts

@@ -127,7 +127,6 @@ export class CreateAccountModel {
         password: this.password,
         inviteCode: this.inviteCode.trim(),
       })
-      /* dont await */ this.rootStore.preferences.setBirthDate(this.birthDate)
       track('Create Account')
     } catch (e: any) {
       onboardingDispatch({type: 'skip'}) // undo starting the onboard

src/state/models/ui/preferences.ts

@@ -226,6 +226,9 @@ export class PreferencesModel {
   // moderation
   // =
 
+  /**
+   * @deprecated use `getModerationOpts` from '#/state/queries/preferences/moderation' instead
+   */
   get moderationOpts(): ModerationOpts {
     return {
       userDid: this.rootStore.session.currentSession?.did || '',
@@ -339,16 +342,6 @@ export class PreferencesModel {
   // other
   // =
 
-  async setBirthDate(birthDate: Date) {
-    this.birthDate = birthDate
-    await this.lock.acquireAsync()
-    try {
-      await this.rootStore.agent.setPersonalDetails({birthDate})
-    } finally {
-      this.lock.release()
-    }
-  }
-
   async toggleHomeFeedHideReplies() {
     this.homeFeed.hideReplies = !this.homeFeed.hideReplies
     await this.lock.acquireAsync()

src/state/queries/preferences/index.ts

@@ -89,3 +89,18 @@ export function usePreferencesSetAdultContentMutation() {
     },
   })
 }
+
+export function usePreferencesSetBirthDateMutation() {
+  const {agent} = useSession()
+  const queryClient = useQueryClient()
+
+  return useMutation<void, unknown, {birthDate: Date}>({
+    mutationFn: async ({birthDate}: {birthDate: Date}) => {
+      await agent.setPersonalDetails({birthDate})
+      // triggers a refetch
+      await queryClient.invalidateQueries({
+        queryKey: usePreferencesQueryKey,
+      })
+    },
+  })
+}

src/view/com/auth/create/CreateAccount.tsx

@@ -19,6 +19,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useOnboardingDispatch} from '#/state/shell'
 import {useSessionApi} from '#/state/session'
+import {usePreferencesSetBirthDateMutation} from '#/state/queries/preferences'
 
 import {Step1} from './Step1'
 import {Step2} from './Step2'
@@ -36,6 +37,7 @@ export const CreateAccount = observer(function CreateAccountImpl({
   const {_} = useLingui()
   const onboardingDispatch = useOnboardingDispatch()
   const {createAccount} = useSessionApi()
+  const {mutate: setBirthDate} = usePreferencesSetBirthDateMutation()
 
   React.useEffect(() => {
     screen('CreateAccount')
@@ -70,13 +72,14 @@ export const CreateAccount = observer(function CreateAccountImpl({
           onboardingDispatch,
           createAccount,
         })
+        setBirthDate({birthDate: model.birthDate})
       } catch {
         // dont need to handle here
       } finally {
         track('Try Create Account')
       }
     }
-  }, [model, track, onboardingDispatch, createAccount])
+  }, [model, track, onboardingDispatch, createAccount, setBirthDate])
 
   return (
     <LoggedOutLayout

src/view/com/modals/BirthDateSettings.tsx

@@ -9,7 +9,6 @@ import {observer} from 'mobx-react-lite'
 import {Text} from '../util/text/Text'
 import {DateInput} from '../util/forms/DateInput'
 import {ErrorMessage} from '../util/error/ErrorMessage'
-import {useStores} from 'state/index'
 import {s, colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
@@ -18,33 +17,36 @@ 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%']
 
-export const Component = observer(function Component({}: {}) {
+function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) {
   const pal = usePalette('default')
-  const store = useStores()
+  const {isMobile} = useWebMediaQueries()
   const {_} = useLingui()
+  const {
+    isPending,
+    isError,
+    error,
+    mutateAsync: setBirthDate,
+  } = usePreferencesSetBirthDateMutation()
+  const [date, setDate] = useState(preferences.birthDate || new Date())
   const {closeModal} = useModalControls()
-  const [date, setDate] = useState<Date>(
-    store.preferences.birthDate || new Date(),
-  )
-  const [isProcessing, setIsProcessing] = useState<boolean>(false)
-  const [error, setError] = useState<string>('')
-  const {isMobile} = useWebMediaQueries()
 
-  const onSave = async () => {
-    setError('')
-    setIsProcessing(true)
+  const onSave = React.useCallback(async () => {
     try {
-      await store.preferences.setBirthDate(date)
+      await setBirthDate({birthDate: date})
       closeModal()
     } catch (e) {
-      setError(cleanError(String(e)))
-    } finally {
-      setIsProcessing(false)
+      logger.error(`setBirthDate failed`, {error: e})
     }
-  }
+  }, [date, setBirthDate, closeModal])
 
   return (
     <View
@@ -74,12 +76,12 @@ export const Component = observer(function Component({}: {}) {
         />
       </View>
 
-      {error ? (
-        <ErrorMessage message={error} style={styles.error} />
+      {isError ? (
+        <ErrorMessage message={cleanError(error)} style={styles.error} />
       ) : undefined}
 
       <View style={[styles.btnContainer, pal.borderDark]}>
-        {isProcessing ? (
+        {isPending ? (
           <View style={styles.btn}>
             <ActivityIndicator color="#fff" />
           </View>
@@ -99,6 +101,16 @@ export const Component = observer(function Component({}: {}) {
       </View>
     </View>
   )
+}
+
+export const Component = observer(function Component({}: {}) {
+  const {data: preferences} = usePreferencesQuery()
+
+  return !preferences ? (
+    <ActivityIndicator />
+  ) : (
+    <Inner preferences={preferences} />
+  )
 })
 
 const styles = StyleSheet.create({

src/view/com/modals/ContentFilteringSettings.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {BskyPreferences} from '@atproto/api'
+import {BskyPreferences, LabelPreference} from '@atproto/api'
 import {StyleSheet, Pressable, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {observer} from 'mobx-react-lite'
@@ -21,7 +21,6 @@ import {
   usePreferencesQuery,
   usePreferencesSetContentLabelMutation,
   usePreferencesSetAdultContentMutation,
-  LabelPreference,
   ConfigurableLabelGroup,
   CONFIGURABLE_LABEL_GROUPS,
 } from '#/state/queries/preferences'
@@ -111,7 +110,10 @@ function AdultContentEnabledPref() {
   const {mutate, variables} = usePreferencesSetAdultContentMutation()
   const {openModal} = useModalControls()
 
-  const onSetAge = () => openModal({name: 'birth-date-settings'})
+  const onSetAge = React.useCallback(
+    () => openModal({name: 'birth-date-settings'}),
+    [openModal],
+  )
 
   const onToggleAdultContent = React.useCallback(async () => {
     if (isIOS) return