forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix slow Hosting Provider dialog (#7594)
* avoid portal perf pitfall
* add dep array
authored by
Samuel Newman
and committed by
GitHub
083a5c96
24a4ab2b
+192
-157
+2
-2
src/components/forms/HostingProvider.tsx
+2
-2
src/components/forms/HostingProvider.tsx
+190
-155
src/view/com/auth/server-input/index.tsx
+190
-155
src/view/com/auth/server-input/index.tsx
···
1
-
import React from 'react'
1
+
import {useCallback, useImperativeHandle, useRef, useState} from 'react'
2
2
import {View} from 'react-native'
3
3
import {useWindowDimensions} from 'react-native'
4
4
import {msg, Trans} from '@lingui/macro'
···
24
24
control: Dialog.DialogOuterProps['control']
25
25
onSelect: (url: string) => void
26
26
}) {
27
-
const {_} = useLingui()
28
-
const t = useTheme()
29
27
const {height} = useWindowDimensions()
30
-
const {gtMobile} = useBreakpoints()
31
-
const [pdsAddressHistory, setPdsAddressHistory] = React.useState<string[]>(
32
-
persisted.get('pdsAddressHistory') || [],
33
-
)
34
-
const [fixedOption, setFixedOption] = React.useState([BSKY_SERVICE])
35
-
const [customAddress, setCustomAddress] = React.useState('')
36
-
const {accounts} = useSession()
28
+
const formRef = useRef<DialogInnerRef>(null)
37
29
38
-
const isFirstTimeUser = accounts.length === 0
30
+
// persist these options between dialog open/close
31
+
const [fixedOption, setFixedOption] = useState(BSKY_SERVICE)
32
+
const [previousCustomAddress, setPreviousCustomAddress] = useState('')
39
33
40
-
const onClose = React.useCallback(() => {
41
-
let url
42
-
if (fixedOption[0] === 'custom') {
43
-
url = customAddress.trim().toLowerCase()
44
-
if (!url) {
45
-
return
46
-
}
47
-
} else {
48
-
url = fixedOption[0]
49
-
}
50
-
if (!url.startsWith('http://') && !url.startsWith('https://')) {
51
-
if (url === 'localhost' || url.startsWith('localhost:')) {
52
-
url = `http://${url}`
53
-
} else {
54
-
url = `https://${url}`
34
+
const onClose = useCallback(() => {
35
+
const result = formRef.current?.getFormState()
36
+
if (result) {
37
+
onSelect(result)
38
+
if (result !== BSKY_SERVICE) {
39
+
setPreviousCustomAddress(result)
55
40
}
56
41
}
57
-
58
-
if (fixedOption[0] === 'custom') {
59
-
if (!pdsAddressHistory.includes(url)) {
60
-
const newHistory = [url, ...pdsAddressHistory.slice(0, 4)]
61
-
setPdsAddressHistory(newHistory)
62
-
persisted.write('pdsAddressHistory', newHistory)
63
-
}
64
-
}
65
-
66
-
onSelect(url)
67
-
}, [
68
-
fixedOption,
69
-
customAddress,
70
-
onSelect,
71
-
pdsAddressHistory,
72
-
setPdsAddressHistory,
73
-
])
42
+
}, [onSelect])
74
43
75
44
return (
76
45
<Dialog.Outer
···
78
47
onClose={onClose}
79
48
nativeOptions={{minHeight: height / 2}}>
80
49
<Dialog.Handle />
81
-
<Dialog.ScrollableInner
82
-
accessibilityDescribedBy="dialog-description"
83
-
accessibilityLabelledBy="dialog-title">
84
-
<View style={[a.relative, a.gap_md, a.w_full]}>
85
-
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
86
-
<Trans>Choose your account provider</Trans>
87
-
</Text>
88
-
<ToggleButton.Group
89
-
label="Preferences"
90
-
values={fixedOption}
91
-
onChange={setFixedOption}>
92
-
<ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
93
-
<ToggleButton.ButtonText>
94
-
{_(msg`Bluesky`)}
95
-
</ToggleButton.ButtonText>
96
-
</ToggleButton.Button>
97
-
<ToggleButton.Button
98
-
testID="customSelectBtn"
99
-
name="custom"
100
-
label={_(msg`Custom`)}>
101
-
<ToggleButton.ButtonText>
102
-
{_(msg`Custom`)}
103
-
</ToggleButton.ButtonText>
104
-
</ToggleButton.Button>
105
-
</ToggleButton.Group>
50
+
<DialogInner
51
+
formRef={formRef}
52
+
fixedOption={fixedOption}
53
+
setFixedOption={setFixedOption}
54
+
initialCustomAddress={previousCustomAddress}
55
+
/>
56
+
</Dialog.Outer>
57
+
)
58
+
}
59
+
60
+
type DialogInnerRef = {getFormState: () => string | null}
61
+
62
+
function DialogInner({
63
+
formRef,
64
+
fixedOption,
65
+
setFixedOption,
66
+
initialCustomAddress,
67
+
}: {
68
+
formRef: React.Ref<DialogInnerRef>
69
+
fixedOption: string
70
+
setFixedOption: (opt: string) => void
71
+
initialCustomAddress: string
72
+
}) {
73
+
const control = Dialog.useDialogContext()
74
+
const {_} = useLingui()
75
+
const t = useTheme()
76
+
const {accounts} = useSession()
77
+
const {gtMobile} = useBreakpoints()
78
+
const [customAddress, setCustomAddress] = useState(initialCustomAddress)
79
+
const [pdsAddressHistory, setPdsAddressHistory] = useState<string[]>(
80
+
persisted.get('pdsAddressHistory') || [],
81
+
)
106
82
107
-
{fixedOption[0] === BSKY_SERVICE && isFirstTimeUser && (
108
-
<Admonition type="tip">
109
-
<Trans>
110
-
Bluesky is an open network where you can choose your own
111
-
provider. If you're new here, we recommend sticking with the
112
-
default Bluesky Social option.
113
-
</Trans>
114
-
</Admonition>
115
-
)}
83
+
useImperativeHandle(
84
+
formRef,
85
+
() => ({
86
+
getFormState: () => {
87
+
let url
88
+
if (fixedOption === 'custom') {
89
+
url = customAddress.trim().toLowerCase()
90
+
if (!url) {
91
+
return null
92
+
}
93
+
} else {
94
+
url = fixedOption
95
+
}
96
+
if (!url.startsWith('http://') && !url.startsWith('https://')) {
97
+
if (url === 'localhost' || url.startsWith('localhost:')) {
98
+
url = `http://${url}`
99
+
} else {
100
+
url = `https://${url}`
101
+
}
102
+
}
103
+
104
+
if (fixedOption === 'custom') {
105
+
if (!pdsAddressHistory.includes(url)) {
106
+
const newHistory = [url, ...pdsAddressHistory.slice(0, 4)]
107
+
setPdsAddressHistory(newHistory)
108
+
persisted.write('pdsAddressHistory', newHistory)
109
+
}
110
+
}
111
+
112
+
return url
113
+
},
114
+
}),
115
+
[customAddress, fixedOption, pdsAddressHistory],
116
+
)
117
+
118
+
const isFirstTimeUser = accounts.length === 0
119
+
120
+
return (
121
+
<Dialog.ScrollableInner
122
+
accessibilityDescribedBy="dialog-description"
123
+
accessibilityLabelledBy="dialog-title">
124
+
<View style={[a.relative, a.gap_md, a.w_full]}>
125
+
<Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
126
+
<Trans>Choose your account provider</Trans>
127
+
</Text>
128
+
<ToggleButton.Group
129
+
label="Preferences"
130
+
values={[fixedOption]}
131
+
onChange={values => setFixedOption(values[0])}>
132
+
<ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
133
+
<ToggleButton.ButtonText>{_(msg`Bluesky`)}</ToggleButton.ButtonText>
134
+
</ToggleButton.Button>
135
+
<ToggleButton.Button
136
+
testID="customSelectBtn"
137
+
name="custom"
138
+
label={_(msg`Custom`)}>
139
+
<ToggleButton.ButtonText>{_(msg`Custom`)}</ToggleButton.ButtonText>
140
+
</ToggleButton.Button>
141
+
</ToggleButton.Group>
116
142
117
-
{fixedOption[0] === 'custom' && (
118
-
<View
119
-
style={[
120
-
a.border,
121
-
t.atoms.border_contrast_low,
122
-
a.rounded_sm,
123
-
a.px_md,
124
-
a.py_md,
125
-
]}>
126
-
<TextField.LabelText nativeID="address-input-label">
127
-
<Trans>Server address</Trans>
128
-
</TextField.LabelText>
129
-
<TextField.Root>
130
-
<TextField.Icon icon={Globe} />
131
-
<Dialog.Input
132
-
testID="customServerTextInput"
133
-
value={customAddress}
134
-
onChangeText={setCustomAddress}
135
-
label="my-server.com"
136
-
accessibilityLabelledBy="address-input-label"
137
-
autoCapitalize="none"
138
-
keyboardType="url"
139
-
/>
140
-
</TextField.Root>
141
-
{pdsAddressHistory.length > 0 && (
142
-
<View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
143
-
{pdsAddressHistory.map(uri => (
144
-
<Button
145
-
key={uri}
146
-
variant="ghost"
147
-
color="primary"
148
-
label={uri}
149
-
style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
150
-
onPress={() => setCustomAddress(uri)}>
151
-
<ButtonText>{uri}</ButtonText>
152
-
</Button>
153
-
))}
154
-
</View>
155
-
)}
156
-
</View>
157
-
)}
143
+
{fixedOption === BSKY_SERVICE && isFirstTimeUser && (
144
+
<Admonition type="tip">
145
+
<Trans>
146
+
Bluesky is an open network where you can choose your own provider.
147
+
If you're new here, we recommend sticking with the default Bluesky
148
+
Social option.
149
+
</Trans>
150
+
</Admonition>
151
+
)}
158
152
159
-
<View style={[a.py_xs]}>
160
-
<P
161
-
style={[
162
-
t.atoms.text_contrast_medium,
163
-
a.text_sm,
164
-
a.leading_snug,
165
-
a.flex_1,
166
-
]}>
167
-
{isFirstTimeUser ? (
168
-
<Trans>
169
-
If you're a developer, you can host your own server.
170
-
</Trans>
171
-
) : (
172
-
<Trans>
173
-
Bluesky is an open network where you can choose your hosting
174
-
provider. If you're a developer, you can host your own server.
175
-
</Trans>
176
-
)}{' '}
177
-
<InlineLinkText
178
-
label={_(msg`Learn more about self hosting your PDS.`)}
179
-
to="https://atproto.com/guides/self-hosting">
180
-
<Trans>Learn more.</Trans>
181
-
</InlineLinkText>
182
-
</P>
153
+
{fixedOption === 'custom' && (
154
+
<View
155
+
style={[
156
+
a.border,
157
+
t.atoms.border_contrast_low,
158
+
a.rounded_sm,
159
+
a.px_md,
160
+
a.py_md,
161
+
]}>
162
+
<TextField.LabelText nativeID="address-input-label">
163
+
<Trans>Server address</Trans>
164
+
</TextField.LabelText>
165
+
<TextField.Root>
166
+
<TextField.Icon icon={Globe} />
167
+
<Dialog.Input
168
+
testID="customServerTextInput"
169
+
value={customAddress}
170
+
onChangeText={setCustomAddress}
171
+
label="my-server.com"
172
+
accessibilityLabelledBy="address-input-label"
173
+
autoCapitalize="none"
174
+
keyboardType="url"
175
+
/>
176
+
</TextField.Root>
177
+
{pdsAddressHistory.length > 0 && (
178
+
<View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
179
+
{pdsAddressHistory.map(uri => (
180
+
<Button
181
+
key={uri}
182
+
variant="ghost"
183
+
color="primary"
184
+
label={uri}
185
+
style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
186
+
onPress={() => setCustomAddress(uri)}>
187
+
<ButtonText>{uri}</ButtonText>
188
+
</Button>
189
+
))}
190
+
</View>
191
+
)}
183
192
</View>
193
+
)}
184
194
185
-
<View style={gtMobile && [a.flex_row, a.justify_end]}>
186
-
<Button
187
-
testID="doneBtn"
188
-
variant="outline"
189
-
color="primary"
190
-
size="small"
191
-
onPress={() => control.close()}
192
-
label={_(msg`Done`)}>
193
-
<ButtonText>{_(msg`Done`)}</ButtonText>
194
-
</Button>
195
-
</View>
195
+
<View style={[a.py_xs]}>
196
+
<P
197
+
style={[
198
+
t.atoms.text_contrast_medium,
199
+
a.text_sm,
200
+
a.leading_snug,
201
+
a.flex_1,
202
+
]}>
203
+
{isFirstTimeUser ? (
204
+
<Trans>
205
+
If you're a developer, you can host your own server.
206
+
</Trans>
207
+
) : (
208
+
<Trans>
209
+
Bluesky is an open network where you can choose your hosting
210
+
provider. If you're a developer, you can host your own server.
211
+
</Trans>
212
+
)}{' '}
213
+
<InlineLinkText
214
+
label={_(msg`Learn more about self hosting your PDS.`)}
215
+
to="https://atproto.com/guides/self-hosting">
216
+
<Trans>Learn more.</Trans>
217
+
</InlineLinkText>
218
+
</P>
219
+
</View>
220
+
221
+
<View style={gtMobile && [a.flex_row, a.justify_end]}>
222
+
<Button
223
+
testID="doneBtn"
224
+
variant="outline"
225
+
color="primary"
226
+
size="small"
227
+
onPress={() => control.close()}
228
+
label={_(msg`Done`)}>
229
+
<ButtonText>{_(msg`Done`)}</ButtonText>
230
+
</Button>
196
231
</View>
197
-
</Dialog.ScrollableInner>
198
-
</Dialog.Outer>
232
+
</View>
233
+
</Dialog.ScrollableInner>
199
234
)
200
235
}