forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
starter pack dialog tweaks (#8913)
authored by
Samuel Newman
and committed by
GitHub
8adebe67
39d460db
+21
-25
+21
-25
src/components/dialogs/StarterPackDialog.tsx
+21
-25
src/components/dialogs/StarterPackDialog.tsx
···
1
-
import React from 'react'
1
+
import {useCallback, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {
4
4
type AppBskyGraphGetStarterPacksWithMembership,
···
22
22
} from '#/state/queries/list-memberships'
23
23
import * as Toast from '#/view/com/util/Toast'
24
24
import {atoms as a, useTheme} from '#/alf'
25
+
import {AvatarStack} from '#/components/AvatarStack'
25
26
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
26
27
import * as Dialog from '#/components/Dialog'
27
28
import {Divider} from '#/components/Divider'
29
+
import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
30
+
import {StarterPack} from '#/components/icons/StarterPack'
31
+
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
28
32
import {Loader} from '#/components/Loader'
29
33
import {Text} from '#/components/Typography'
30
34
import * as bsky from '#/types/bsky'
31
-
import {AvatarStack} from '../AvatarStack'
32
-
import {PlusLarge_Stroke2_Corner0_Rounded} from '../icons/Plus'
33
-
import {StarterPack} from '../icons/StarterPack'
34
-
import {TimesLarge_Stroke2_Corner0_Rounded} from '../icons/Times'
35
35
36
36
type StarterPackWithMembership =
37
37
AppBskyGraphGetStarterPacksWithMembership.StarterPackWithMembership
···
51
51
const navigation = useNavigation<NavigationProp>()
52
52
const requireEmailVerification = useRequireEmailVerification()
53
53
54
-
const navToWizard = React.useCallback(() => {
54
+
const navToWizard = useCallback(() => {
55
55
control.close()
56
56
navigation.navigate('StarterPackWizard', {
57
57
fromDialog: true,
···
91
91
const {_} = useLingui()
92
92
const t = useTheme()
93
93
94
-
isWeb
95
94
return (
96
95
<View style={[a.gap_2xl, {paddingTop: isWeb ? 100 : 64}]}>
97
96
<View style={[a.gap_xs, a.align_center]}>
···
115
114
Create
116
115
</Trans>
117
116
</ButtonText>
118
-
<ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
117
+
<ButtonIcon icon={PlusIcon} />
119
118
</Button>
120
119
</View>
121
120
</View>
···
134
133
enabled?: boolean
135
134
}) {
136
135
const {_} = useLingui()
137
-
const t = useTheme()
138
136
139
137
const {
140
138
data,
···
149
147
const membershipItems =
150
148
data?.pages.flatMap(page => page.starterPacksWithMembership) || []
151
149
152
-
const _onRefresh = React.useCallback(async () => {
150
+
const _onRefresh = useCallback(async () => {
153
151
try {
154
152
await refetch()
155
153
} catch (err) {
···
157
155
}
158
156
}, [refetch])
159
157
160
-
const _onEndReached = React.useCallback(async () => {
158
+
const _onEndReached = useCallback(async () => {
161
159
if (isFetchingNextPage || !hasNextPage || isError) return
162
160
try {
163
161
await fetchNextPage()
···
166
164
}
167
165
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
168
166
169
-
const renderItem = React.useCallback(
167
+
const renderItem = useCallback(
170
168
({item}: {item: StarterPackWithMembership}) => (
171
169
<StarterPackItem starterPackWithMembership={item} targetDid={targetDid} />
172
170
),
173
171
[targetDid],
174
172
)
175
173
176
-
const onClose = React.useCallback(() => {
174
+
const onClose = useCallback(() => {
177
175
control.close()
178
176
}, [control])
179
-
180
-
const XIcon = React.useMemo(() => {
181
-
return (
182
-
<TimesLarge_Stroke2_Corner0_Rounded
183
-
fill={t.atoms.text_contrast_medium.color}
184
-
/>
185
-
)
186
-
}, [t])
187
177
188
178
const listHeader = (
189
179
<>
···
196
186
<Text style={[a.text_lg, a.font_bold]}>
197
187
<Trans>Add to starter packs</Trans>
198
188
</Text>
199
-
<Button label={_(msg`Close`)} onPress={onClose}>
200
-
<ButtonIcon icon={() => XIcon} />
189
+
<Button
190
+
label={_(msg`Close`)}
191
+
onPress={onClose}
192
+
variant="ghost"
193
+
color="secondary"
194
+
size="small"
195
+
shape="round">
196
+
<ButtonIcon icon={XIcon} />
201
197
</Button>
202
198
</View>
203
199
{membershipItems.length > 0 && (
···
217
213
Create
218
214
</Trans>
219
215
</ButtonText>
220
-
<ButtonIcon icon={PlusLarge_Stroke2_Corner0_Rounded} />
216
+
<ButtonIcon icon={PlusIcon} />
221
217
</Button>
222
218
</View>
223
219
<Divider />
···
268
264
const starterPack = starterPackWithMembership.starterPack
269
265
const isInPack = !!starterPackWithMembership.listItem
270
266
271
-
const [isPendingRefresh, setIsPendingRefresh] = React.useState(false)
267
+
const [isPendingRefresh, setIsPendingRefresh] = useState(false)
272
268
273
269
const {mutate: addMembership} = useListMembershipAddMutation({
274
270
onSuccess: () => {