Skip to content

Commit 4a1b1f1

Browse files
mozziusmozzius
authored
Clean up dialogs (#8934)
1 parent 7574a74 commit 4a1b1f1

File tree

6 files changed

+221
-195
lines changed

6 files changed

+221
-195
lines changed

‎src/components/NewskieDialog.tsx‎

Lines changed: 110 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import {useMemo, useState} from 'react'
22
import {View} from 'react-native'
33
import {type AppBskyActorDefs, moderateProfile} from '@atproto/api'
44
import {msg, Trans} from '@lingui/macro'
@@ -27,30 +27,12 @@ export function NewskieDialog({
2727
disabled?: boolean
2828
}) {
2929
const {_} = useLingui()
30-
const t = useTheme()
31-
const moderationOpts = useModerationOpts()
32-
const {currentAccount} = useSession()
33-
const timeAgo = useGetTimeAgo()
3430
const control = useDialogControl()
3531

36-
const isMe = profile.did === currentAccount?.did
3732
const createdAt = profile.createdAt as string | undefined
3833

39-
const profileName = React.useMemo(() => {
40-
const name = profile.displayName || profile.handle
41-
42-
if (isMe) {
43-
return _(msg`You`)
44-
}
45-
46-
if (!moderationOpts) return name
47-
const moderation = moderateProfile(profile, moderationOpts)
48-
49-
return sanitizeDisplayName(name, moderation.ui('displayName'))
50-
}, [_, isMe, moderationOpts, profile])
51-
52-
const [now] = React.useState(() => Date.now())
53-
const daysOld = React.useMemo(() => {
34+
const [now] = useState(() => Date.now())
35+
const daysOld = useMemo(() => {
5436
if (!createdAt) return Infinity
5537
return differenceInSeconds(now, new Date(createdAt)) / 86400
5638
}, [createdAt, now])
@@ -77,88 +59,116 @@ export function NewskieDialog({
7759
)}
7860
</Button>
7961

80-
<Dialog.Outer control={control}>
62+
<Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
8163
<Dialog.Handle />
82-
<Dialog.ScrollableInner
83-
label={_(msg`New user info dialog`)}
84-
style={web({width: 'auto', maxWidth: 400, minWidth: 200})}>
85-
<View style={[a.gap_md]}>
86-
<View style={[a.align_center]}>
87-
<View
88-
style={[
89-
{
90-
height: 60,
91-
width: 64,
92-
},
93-
]}>
94-
<Newskie
95-
width={64}
96-
height={64}
97-
fill="#FFC404"
98-
style={[a.absolute, a.inset_0]}
99-
/>
100-
</View>
101-
<Text style={[a.font_bold, a.text_xl]}>
102-
{isMe ? (
103-
<Trans>Welcome, friend!</Trans>
104-
) : (
105-
<Trans>Say hello!</Trans>
106-
)}
107-
</Text>
108-
</View>
109-
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
110-
{profile.joinedViaStarterPack ? (
111-
<Trans>
112-
{profileName} joined Bluesky using a starter pack{' '}
113-
{timeAgo(createdAt, now, {format: 'long'})} ago
114-
</Trans>
115-
) : (
116-
<Trans>
117-
{profileName} joined Bluesky{' '}
118-
{timeAgo(createdAt, now, {format: 'long'})} ago
119-
</Trans>
120-
)}
121-
</Text>
122-
{profile.joinedViaStarterPack ? (
123-
<StarterPackCard.Link
124-
starterPack={profile.joinedViaStarterPack}
125-
onPress={() => {
126-
control.close()
127-
}}>
128-
<View
129-
style={[
130-
a.w_full,
131-
a.mt_sm,
132-
a.p_lg,
133-
a.border,
134-
a.rounded_sm,
135-
t.atoms.border_contrast_low,
136-
]}>
137-
<StarterPackCard.Card
138-
starterPack={profile.joinedViaStarterPack}
139-
/>
140-
</View>
141-
</StarterPackCard.Link>
142-
) : null}
64+
<DialogInner profile={profile} createdAt={createdAt} now={now} />
65+
</Dialog.Outer>
66+
</View>
67+
)
68+
}
14369

144-
{isNative && (
145-
<Button
146-
label={_(msg`Close`)}
147-
variant="solid"
148-
color="secondary"
149-
size="small"
150-
style={[a.mt_sm]}
151-
onPress={() => control.close()}>
152-
<ButtonText>
153-
<Trans>Close</Trans>
154-
</ButtonText>
155-
</Button>
156-
)}
70+
function DialogInner({
71+
profile,
72+
createdAt,
73+
now,
74+
}: {
75+
profile: AppBskyActorDefs.ProfileViewDetailed
76+
createdAt: string
77+
now: number
78+
}) {
79+
const control = Dialog.useDialogContext()
80+
const {_} = useLingui()
81+
const t = useTheme()
82+
const moderationOpts = useModerationOpts()
83+
const {currentAccount} = useSession()
84+
const timeAgo = useGetTimeAgo()
85+
const isMe = profile.did === currentAccount?.did
86+
87+
const profileName = useMemo(() => {
88+
const name = profile.displayName || profile.handle
89+
90+
if (isMe) {
91+
return _(msg`You`)
92+
}
93+
94+
if (!moderationOpts) return name
95+
const moderation = moderateProfile(profile, moderationOpts)
96+
97+
return sanitizeDisplayName(name, moderation.ui('displayName'))
98+
}, [_, isMe, moderationOpts, profile])
99+
100+
return (
101+
<Dialog.ScrollableInner
102+
label={_(msg`New user info dialog`)}
103+
style={web({maxWidth: 400})}>
104+
<View style={[a.gap_md]}>
105+
<View style={[a.align_center]}>
106+
<View
107+
style={[
108+
{
109+
height: 60,
110+
width: 64,
111+
},
112+
]}>
113+
<Newskie
114+
width={64}
115+
height={64}
116+
fill="#FFC404"
117+
style={[a.absolute, a.inset_0]}
118+
/>
157119
</View>
120+
<Text style={[a.font_bold, a.text_xl]}>
121+
{isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>}
122+
</Text>
123+
</View>
124+
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
125+
{profile.joinedViaStarterPack ? (
126+
<Trans>
127+
{profileName} joined Bluesky using a starter pack{' '}
128+
{timeAgo(createdAt, now, {format: 'long'})} ago
129+
</Trans>
130+
) : (
131+
<Trans>
132+
{profileName} joined Bluesky{' '}
133+
{timeAgo(createdAt, now, {format: 'long'})} ago
134+
</Trans>
135+
)}
136+
</Text>
137+
{profile.joinedViaStarterPack ? (
138+
<StarterPackCard.Link
139+
starterPack={profile.joinedViaStarterPack}
140+
onPress={() => control.close()}>
141+
<View
142+
style={[
143+
a.w_full,
144+
a.mt_sm,
145+
a.p_lg,
146+
a.border,
147+
a.rounded_sm,
148+
t.atoms.border_contrast_low,
149+
]}>
150+
<StarterPackCard.Card
151+
starterPack={profile.joinedViaStarterPack}
152+
/>
153+
</View>
154+
</StarterPackCard.Link>
155+
) : null}
158156

159-
<Dialog.Close />
160-
</Dialog.ScrollableInner>
161-
</Dialog.Outer>
162-
</View>
157+
{isNative && (
158+
<Button
159+
label={_(msg`Close`)}
160+
color="secondary"
161+
size="small"
162+
style={[a.mt_sm]}
163+
onPress={() => control.close()}>
164+
<ButtonText>
165+
<Trans>Close</Trans>
166+
</ButtonText>
167+
</Button>
168+
)}
169+
</View>
170+
171+
<Dialog.Close />
172+
</Dialog.ScrollableInner>
163173
)
164174
}

‎src/components/StarterPack/QrCode.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import {lazy} from 'react'
22
import {View} from 'react-native'
33
// @ts-expect-error missing types
44
import QRCode from 'react-native-qrcode-styled'
@@ -15,20 +15,20 @@ import {LinearGradientBackground} from '#/components/LinearGradientBackground'
1515
import {Text} from '#/components/Typography'
1616
import * as bsky from '#/types/bsky'
1717

18-
const LazyViewShot = React.lazy(
18+
const LazyViewShot = lazy(
1919
// @ts-expect-error dynamic import
2020
() => import('react-native-view-shot/src/index'),
2121
)
2222

23-
interface Props {
23+
export function QrCode({
24+
starterPack,
25+
link,
26+
ref,
27+
}: {
2428
starterPack: AppBskyGraphDefs.StarterPackView
2529
link: string
26-
}
27-
28-
export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
29-
{starterPack, link},
30-
ref,
31-
) {
30+
ref: React.Ref<ViewShot>
31+
}) {
3232
const {record} = starterPack
3333

3434
if (
@@ -93,7 +93,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
9393
</LinearGradientBackground>
9494
</LazyViewShot>
9595
)
96-
})
96+
}
9797

9898
export function QrCodeInner({link}: {link: string}) {
9999
const t = useTheme()

0 commit comments

Comments
 (0)