quilling.dev
An ATproto social media client -- with an independent Appview.
Bday modal tweaks (#3252)
* Smol tweaks to bday dialog
* Juse use existing DateInput for now
* Remove unused code
* Remove passed-in prefs
* Adjust load state
* Revert "Adjust load state"
This reverts commit 802459fd044b380ccc4f96432af416996219a0de.
* Fix type error
authored by
Eric Bailey
and committed by
GitHub
8ac5144a
4de8e8fa
+44
-46
+41
-33
src/components/dialogs/BirthDateSettings.tsx
+41
-33
src/components/dialogs/BirthDateSettings.tsx
···
1
1
import React from 'react'
2
2
import {useLingui} from '@lingui/react'
3
3
import {Trans, msg} from '@lingui/macro'
4
+
import {View} from 'react-native'
4
5
5
6
import * as Dialog from '#/components/Dialog'
6
7
import {Text} from '../Typography'
7
8
import {DateInput} from '#/view/com/util/forms/DateInput'
8
9
import {logger} from '#/logger'
9
10
import {
11
+
usePreferencesQuery,
10
12
usePreferencesSetBirthDateMutation,
11
13
UsePreferencesQueryResponse,
12
14
} from '#/state/queries/preferences'
13
-
import {Button, ButtonText} from '../Button'
15
+
import {Button, ButtonIcon, ButtonText} from '../Button'
14
16
import {atoms as a, useTheme} from '#/alf'
15
17
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
16
18
import {cleanError} from '#/lib/strings/errors'
17
-
import {ActivityIndicator, View} from 'react-native'
18
19
import {isIOS, isWeb} from '#/platform/detection'
20
+
import {Loader} from '#/components/Loader'
19
21
20
22
export function BirthDateSettingsDialog({
21
23
control,
22
-
preferences,
23
24
}: {
24
25
control: Dialog.DialogControlProps
25
-
preferences: UsePreferencesQueryResponse | undefined
26
26
}) {
27
+
const t = useTheme()
27
28
const {_} = useLingui()
28
-
const {isPending, isError, error, mutateAsync} =
29
-
usePreferencesSetBirthDateMutation()
29
+
const {isLoading, error, data: preferences} = usePreferencesQuery()
30
30
31
31
return (
32
32
<Dialog.Outer control={control}>
33
33
<Dialog.Handle />
34
+
34
35
<Dialog.ScrollableInner label={_(msg`My Birthday`)}>
35
-
{preferences && !isPending ? (
36
-
<BirthdayInner
37
-
control={control}
38
-
preferences={preferences}
39
-
isError={isError}
40
-
error={error}
41
-
setBirthDate={mutateAsync}
36
+
<View style={[a.gap_sm, a.pb_lg]}>
37
+
<Text style={[a.text_2xl, a.font_bold]}>
38
+
<Trans>My Birthday</Trans>
39
+
</Text>
40
+
<Text style={[a.text_md, t.atoms.text_contrast_medium]}>
41
+
<Trans>This information is not shared with other users.</Trans>
42
+
</Text>
43
+
</View>
44
+
45
+
{isLoading ? (
46
+
<Loader size="xl" />
47
+
) : error || !preferences ? (
48
+
<ErrorMessage
49
+
message={
50
+
error?.toString() ||
51
+
_(
52
+
msg`We were unable to load your birth date preferences. Please try again.`,
53
+
)
54
+
}
55
+
style={[a.rounded_sm]}
42
56
/>
43
57
) : (
44
-
<ActivityIndicator size="large" style={a.my_5xl} />
58
+
<BirthdayInner control={control} preferences={preferences} />
45
59
)}
60
+
61
+
<Dialog.Close />
46
62
</Dialog.ScrollableInner>
47
63
</Dialog.Outer>
48
64
)
···
51
67
function BirthdayInner({
52
68
control,
53
69
preferences,
54
-
isError,
55
-
error,
56
-
setBirthDate,
57
70
}: {
58
71
control: Dialog.DialogControlProps
59
72
preferences: UsePreferencesQueryResponse
60
-
isError: boolean
61
-
error: unknown
62
-
setBirthDate: (args: {birthDate: Date}) => Promise<unknown>
63
73
}) {
64
74
const {_} = useLingui()
65
75
const [date, setDate] = React.useState(preferences.birthDate || new Date())
66
-
const t = useTheme()
67
-
76
+
const {
77
+
isPending,
78
+
isError,
79
+
error,
80
+
mutateAsync: setBirthDate,
81
+
} = usePreferencesSetBirthDateMutation()
68
82
const hasChanged = date !== preferences.birthDate
69
83
70
84
const onSave = React.useCallback(async () => {
···
74
88
await setBirthDate({birthDate: date})
75
89
}
76
90
control.close()
77
-
} catch (e) {
78
-
logger.error(`setBirthDate failed`, {message: e})
91
+
} catch (e: any) {
92
+
logger.error(`setBirthDate failed`, {message: e.message})
79
93
}
80
94
}, [date, setBirthDate, control, hasChanged])
81
95
82
96
return (
83
97
<View style={a.gap_lg} testID="birthDateSettingsDialog">
84
-
<View style={[a.gap_sm]}>
85
-
<Text style={[a.text_2xl, a.font_bold]}>
86
-
<Trans>My Birthday</Trans>
87
-
</Text>
88
-
<Text style={t.atoms.text_contrast_medium}>
89
-
<Trans>This information is not shared with other users.</Trans>
90
-
</Text>
91
-
</View>
92
98
<View style={isIOS && [a.w_full, a.align_center]}>
93
99
<DateInput
94
100
handleAsUTC
···
103
109
accessibilityLabelledBy="birthDate"
104
110
/>
105
111
</View>
112
+
106
113
{isError ? (
107
114
<ErrorMessage message={cleanError(error)} style={[a.rounded_sm]} />
108
115
) : undefined}
···
110
117
<View style={isWeb && [a.flex_row, a.justify_end]}>
111
118
<Button
112
119
label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
113
-
size={isWeb ? 'small' : 'medium'}
120
+
size="medium"
114
121
onPress={onSave}
115
122
variant="solid"
116
123
color="primary">
117
124
<ButtonText>
118
125
{hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
119
126
</ButtonText>
127
+
{isPending && <ButtonIcon icon={Loader} />}
120
128
</Button>
121
129
</View>
122
130
</View>
+1
-4
src/screens/Moderation/index.tsx
+1
-4
src/screens/Moderation/index.tsx
+2
-9
src/view/screens/Settings/index.tsx
+2
-9
src/view/screens/Settings/index.tsx
···
40
40
} from '#/state/preferences'
41
41
import {useSession, useSessionApi, SessionAccount} from '#/state/session'
42
42
import {useProfileQuery} from '#/state/queries/profile'
43
-
import {
44
-
useClearPreferencesMutation,
45
-
usePreferencesQuery,
46
-
} from '#/state/queries/preferences'
43
+
import {useClearPreferencesMutation} from '#/state/queries/preferences'
47
44
// TODO import {useInviteCodesQuery} from '#/state/queries/invites'
48
45
import {clear as clearStorage} from '#/state/persisted/store'
49
46
import {clearLegacyStorage} from '#/state/persisted/legacy'
···
156
153
const {screen, track} = useAnalytics()
157
154
const {openModal} = useModalControls()
158
155
const {isSwitchingAccounts, accounts, currentAccount} = useSession()
159
-
const {data: preferences} = usePreferencesQuery()
160
156
const {mutate: clearPreferences} = useClearPreferencesMutation()
161
157
// TODO
162
158
// const {data: invites} = useInviteCodesQuery()
···
295
291
return (
296
292
<View style={s.hContentRegion} testID="settingsScreen">
297
293
<ExportCarDialog control={exportCarControl} />
298
-
<BirthDateSettingsDialog
299
-
control={birthdayControl}
300
-
preferences={preferences}
301
-
/>
294
+
<BirthDateSettingsDialog control={birthdayControl} />
302
295
303
296
<SimpleViewHeader
304
297
showBackButton={isMobile}