zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Merge pull request #3218 from bluesky-social/samuel/alf-birthday 

Use ALF for the birthday modal and remove legacy one
zio/stable
Samuel Newman 2024-03-15 16:45:17 +00:00 committed by GitHub
parent 4f8381678d 39da1cd465
commit e30b3d9b3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 152 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Dialog/index.tsx
View File

@ -23,6 +23,7 @@ import {
DialogInnerProps,
} from '#/components/Dialog/types'
import {Context} from '#/components/Dialog/context'
import {isNative} from 'platform/detection'
export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
export * from '#/components/Dialog/types'
@ -221,7 +222,8 @@ export function ScrollableInner({children, style}: DialogInnerProps) {
borderTopRightRadius: 40,
},
flatten(style),
]}>
]}
contentContainerStyle={isNative ? a.pb_4xl : undefined}>
{children}
<View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
</BottomSheetScrollView>

2
src/components/Prompt.tsx
View File

@ -3,7 +3,6 @@ import {View} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {isNative} from '#/platform/detection'
import {useTheme, atoms as a, useBreakpoints} from '#/alf'
import {Text} from '#/components/Typography'
import {Button, ButtonColor, ButtonText} from '#/components/Button'
@ -86,7 +85,6 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
gtMobile
? [a.flex_row, a.flex_row_reverse, a.justify_start]
: [a.flex_col],
isNative && [a.pb_4xl],
]}>
{children}
</View>

124
src/components/dialogs/BirthDateSettings.tsx 100644
View File

@ -0,0 +1,124 @@
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, 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'
export function BirthDateSettingsDialog({
control,
preferences,
}: {
control: Dialog.DialogControlProps
preferences: UsePreferencesQueryResponse | undefined
}) {
const {_} = useLingui()
const {isPending, isError, error, mutateAsync} =
usePreferencesSetBirthDateMutation()
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}
/>
) : (
<ActivityIndicator size="large" style={a.my_5xl} />
)}
</Dialog.ScrollableInner>
</Dialog.Outer>
)
}
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 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 (
<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
testID="birthdayInput"
value={date}
onChange={setDate}
buttonType="default-light"
buttonStyle={[a.rounded_sm]}
buttonLabelType="lg"
accessibilityLabel={_(msg`Birthday`)}
accessibilityHint={_(msg`Enter your birth date`)}
accessibilityLabelledBy="birthDate"
/>
</View>
{isError ? (
<ErrorMessage message={cleanError(error)} style={[a.rounded_sm]} />
) : undefined}
<View style={isWeb && [a.flex_row, a.justify_end]}>
<Button
label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
size={isWeb ? 'small' : 'medium'}
onPress={onSave}
variant="solid"
color="primary">
<ButtonText>
{hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
</ButtonText>
</Button>
</View>
</View>
)
}

5
src/state/modals/index.tsx
View File

@ -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

151
src/view/com/modals/BirthDateSettings.tsx
View File

@ -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,
},
})

12
src/view/com/modals/ContentFilteringSettings.tsx
View File

@ -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}>

4
src/view/com/modals/Modal.tsx
View File

@ -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} />

3
src/view/com/modals/Modal.web.tsx
View File

@ -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') {

18
src/view/screens/Settings/index.tsx
View File

@ -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>