Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 71 71 a.flex_row, 72 72 a.align_center, 73 73 a.rounded_sm, 74 - a.px_md, 74 + a.pl_md, 75 75 a.pr_sm, 76 76 a.gap_xs, 77 - {paddingVertical: isAndroid ? 14 : 9}, 77 + {paddingVertical: isAndroid ? 14 : 8}, 78 78 ]} 79 79 onPress={onPressSelectService}> 80 80 {({hovered, pressed}) => {
+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 }