about summary refs log tree commit diff
path: root/src/view
diff options
context:
space:
mode:
Diffstat (limited to 'src/view')
-rw-r--r--src/view/com/modals/BirthDateSettings.tsx151
-rw-r--r--src/view/com/modals/ContentFilteringSettings.tsx12
-rw-r--r--src/view/com/modals/Modal.tsx4
-rw-r--r--src/view/com/modals/Modal.web.tsx3
-rw-r--r--src/view/screens/Settings/index.tsx18
5 files changed, 25 insertions, 163 deletions
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 328d23dc2..3c7edcf0d 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 {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 
 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 (
     <View style={s.mb10}>
+      <BirthDateSettingsDialog
+        control={bithdayDialogControl}
+        preferences={preferences}
+      />
       {isIOS ? (
         preferences?.adultContentEnabled ? null : (
           <Text type="md" style={pal.textLight}>
diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx
index e03879c1d..e382e6fab 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 = <ModerationDetailsModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'birth-date-settings') {
-    snapPoints = BirthDateSettingsModal.snapPoints
-    element = <BirthDateSettingsModal.Component />
   } else if (activeModal?.name === 'verify-email') {
     snapPoints = VerifyEmailModal.snapPoints
     element = <VerifyEmailModal.Component {...activeModal} />
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index d72b7e485..66ea2311f 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 = <EditImageModal.Component {...modal} />
   } else if (modal.name === 'moderation-details') {
     element = <ModerationDetailsModal.Component {...modal} />
-  } else if (modal.name === 'birth-date-settings') {
-    element = <BirthDateSettingsModal.Component />
   } else if (modal.name === 'verify-email') {
     element = <VerifyEmailModal.Component {...modal} />
   } else if (modal.name === 'change-email') {
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index 00b507a99..3b5e190c1 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 {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 
 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<ViewStyle>({
   //   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 (
     <View style={s.hContentRegion} testID="settingsScreen">
       <ExportCarDialog control={exportCarControl} />
+      <BirthDateSettingsDialog
+        control={birthdayControl}
+        preferences={preferences}
+      />
 
       <SimpleViewHeader
         showBackButton={isMobile}
@@ -339,7 +353,7 @@ export function SettingsScreen({}: Props) {
               <Text type="lg-medium" style={pal.text}>
                 <Trans>Birthday:</Trans>{' '}
               </Text>
-              <Link onPress={() => openModal({name: 'birth-date-settings'})}>
+              <Link onPress={onPressBirthday}>
                 <Text type="lg" style={pal.link}>
                   <Trans>Show</Trans>
                 </Text>
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-12 03:50:54 +0000