diff options
Diffstat (limited to 'src/view/com/auth')
| -rw-r--r-- | src/view/com/auth/LoggedOut.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/auth/Onboarding.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/auth/create/CreateAccount.tsx | 196 | ||||
| -rw-r--r-- | src/view/com/auth/create/Step1.tsx | 6 | ||||
| -rw-r--r-- | src/view/com/auth/create/Step2.tsx | 6 | ||||
| -rw-r--r-- | src/view/com/auth/create/Step3.tsx | 6 | ||||
| -rw-r--r-- | src/view/com/auth/onboarding/RecommendedFeeds.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/auth/onboarding/RecommendedFeedsItem.tsx | 236 | ||||
| -rw-r--r-- | src/view/com/auth/onboarding/WelcomeDesktop.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/auth/onboarding/WelcomeMobile.tsx | 5 | ||||
| -rw-r--r-- | src/view/com/auth/withAuthRequired.tsx | 2 |
11 files changed, 247 insertions, 222 deletions
diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index 6d3b87dd3..c74c2aa33 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -16,7 +16,7 @@ enum ScreenState { S_CreateAccount, } -export const LoggedOut = observer(() => { +export const LoggedOut = observer(function LoggedOutImpl() { const pal = usePalette('default') const store = useStores() const {screen} = useAnalytics() diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx index 065d4d244..6ea8cd79e 100644 --- a/src/view/com/auth/Onboarding.tsx +++ b/src/view/com/auth/Onboarding.tsx @@ -8,7 +8,7 @@ import {useStores} from 'state/index' import {Welcome} from './onboarding/Welcome' import {RecommendedFeeds} from './onboarding/RecommendedFeeds' -export const Onboarding = observer(() => { +export const Onboarding = observer(function OnboardingImpl() { const pal = usePalette('default') const store = useStores() diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index 8cf1cfaf5..1d64cc067 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -20,114 +20,116 @@ import {Step1} from './Step1' import {Step2} from './Step2' import {Step3} from './Step3' -export const CreateAccount = observer( - ({onPressBack}: {onPressBack: () => void}) => { - const {track, screen} = useAnalytics() - const pal = usePalette('default') - const store = useStores() - const model = React.useMemo(() => new CreateAccountModel(store), [store]) +export const CreateAccount = observer(function CreateAccountImpl({ + onPressBack, +}: { + onPressBack: () => void +}) { + const {track, screen} = useAnalytics() + const pal = usePalette('default') + const store = useStores() + const model = React.useMemo(() => new CreateAccountModel(store), [store]) - React.useEffect(() => { - screen('CreateAccount') - }, [screen]) + React.useEffect(() => { + screen('CreateAccount') + }, [screen]) - React.useEffect(() => { - model.fetchServiceDescription() - }, [model]) + React.useEffect(() => { + model.fetchServiceDescription() + }, [model]) - const onPressRetryConnect = React.useCallback( - () => model.fetchServiceDescription(), - [model], - ) + const onPressRetryConnect = React.useCallback( + () => model.fetchServiceDescription(), + [model], + ) - const onPressBackInner = React.useCallback(() => { - if (model.canBack) { - model.back() - } else { - onPressBack() - } - }, [model, onPressBack]) + const onPressBackInner = React.useCallback(() => { + if (model.canBack) { + model.back() + } else { + onPressBack() + } + }, [model, onPressBack]) - const onPressNext = React.useCallback(async () => { - if (!model.canNext) { - return - } - if (model.step < 3) { - model.next() - } else { - try { - await model.submit() - } catch { - // dont need to handle here - } finally { - track('Try Create Account') - } + const onPressNext = React.useCallback(async () => { + if (!model.canNext) { + return + } + if (model.step < 3) { + model.next() + } else { + try { + await model.submit() + } catch { + // dont need to handle here + } finally { + track('Try Create Account') } - }, [model, track]) + } + }, [model, track]) - return ( - <LoggedOutLayout - leadin={`Step ${model.step}`} - title="Create Account" - description="We're so excited to have you join us!"> - <ScrollView testID="createAccount" style={pal.view}> - <KeyboardAvoidingView behavior="padding"> - <View style={styles.stepContainer}> - {model.step === 1 && <Step1 model={model} />} - {model.step === 2 && <Step2 model={model} />} - {model.step === 3 && <Step3 model={model} />} - </View> - <View style={[s.flexRow, s.pl20, s.pr20]}> + return ( + <LoggedOutLayout + leadin={`Step ${model.step}`} + title="Create Account" + description="We're so excited to have you join us!"> + <ScrollView testID="createAccount" style={pal.view}> + <KeyboardAvoidingView behavior="padding"> + <View style={styles.stepContainer}> + {model.step === 1 && <Step1 model={model} />} + {model.step === 2 && <Step2 model={model} />} + {model.step === 3 && <Step3 model={model} />} + </View> + <View style={[s.flexRow, s.pl20, s.pr20]}> + <TouchableOpacity + onPress={onPressBackInner} + testID="backBtn" + accessibilityRole="button"> + <Text type="xl" style={pal.link}> + Back + </Text> + </TouchableOpacity> + <View style={s.flex1} /> + {model.canNext ? ( <TouchableOpacity - onPress={onPressBackInner} - testID="backBtn" + testID="nextBtn" + onPress={onPressNext} accessibilityRole="button"> - <Text type="xl" style={pal.link}> - Back - </Text> - </TouchableOpacity> - <View style={s.flex1} /> - {model.canNext ? ( - <TouchableOpacity - testID="nextBtn" - onPress={onPressNext} - accessibilityRole="button"> - {model.isProcessing ? ( - <ActivityIndicator /> - ) : ( - <Text type="xl-bold" style={[pal.link, s.pr5]}> - Next - </Text> - )} - </TouchableOpacity> - ) : model.didServiceDescriptionFetchFail ? ( - <TouchableOpacity - testID="retryConnectBtn" - onPress={onPressRetryConnect} - accessibilityRole="button" - accessibilityLabel="Retry" - accessibilityHint="Retries account creation" - accessibilityLiveRegion="polite"> + {model.isProcessing ? ( + <ActivityIndicator /> + ) : ( <Text type="xl-bold" style={[pal.link, s.pr5]}> - Retry - </Text> - </TouchableOpacity> - ) : model.isFetchingServiceDescription ? ( - <> - <ActivityIndicator color="#fff" /> - <Text type="xl" style={[pal.text, s.pr5]}> - Connecting... + Next </Text> - </> - ) : undefined} - </View> - <View style={s.footerSpacer} /> - </KeyboardAvoidingView> - </ScrollView> - </LoggedOutLayout> - ) - }, -) + )} + </TouchableOpacity> + ) : model.didServiceDescriptionFetchFail ? ( + <TouchableOpacity + testID="retryConnectBtn" + onPress={onPressRetryConnect} + accessibilityRole="button" + accessibilityLabel="Retry" + accessibilityHint="Retries account creation" + accessibilityLiveRegion="polite"> + <Text type="xl-bold" style={[pal.link, s.pr5]}> + Retry + </Text> + </TouchableOpacity> + ) : model.isFetchingServiceDescription ? ( + <> + <ActivityIndicator color="#fff" /> + <Text type="xl" style={[pal.text, s.pr5]}> + Connecting... + </Text> + </> + ) : undefined} + </View> + <View style={s.footerSpacer} /> + </KeyboardAvoidingView> + </ScrollView> + </LoggedOutLayout> + ) +}) const styles = StyleSheet.create({ stepContainer: { diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index 5d3dec430..cdd5cb21d 100644 --- a/src/view/com/auth/create/Step1.tsx +++ b/src/view/com/auth/create/Step1.tsx @@ -20,7 +20,11 @@ import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags' * @field Bluesky (default) * @field Other (staging, local dev, your own PDS, etc.) */ -export const Step1 = observer(({model}: {model: CreateAccountModel}) => { +export const Step1 = observer(function Step1Impl({ + model, +}: { + model: CreateAccountModel +}) { const pal = usePalette('default') const [isDefaultSelected, setIsDefaultSelected] = React.useState(true) diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx index 5f71469f0..83b0aee40 100644 --- a/src/view/com/auth/create/Step2.tsx +++ b/src/view/com/auth/create/Step2.tsx @@ -21,7 +21,11 @@ import {useStores} from 'state/index' * @field Birth date * @readonly Terms of service & privacy policy */ -export const Step2 = observer(({model}: {model: CreateAccountModel}) => { +export const Step2 = observer(function Step2Impl({ + model, +}: { + model: CreateAccountModel +}) { const pal = usePalette('default') const store = useStores() diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx index f35777d27..beb756ac1 100644 --- a/src/view/com/auth/create/Step3.tsx +++ b/src/view/com/auth/create/Step3.tsx @@ -13,7 +13,11 @@ import {ErrorMessage} from 'view/com/util/error/ErrorMessage' /** STEP 3: Your user handle * @field User handle */ -export const Step3 = observer(({model}: {model: CreateAccountModel}) => { +export const Step3 = observer(function Step3Impl({ + model, +}: { + model: CreateAccountModel +}) { const pal = usePalette('default') return ( <View> diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx index 92d12f60b..99cdcafd0 100644 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx @@ -15,7 +15,9 @@ import {RECOMMENDED_FEEDS} from 'lib/constants' type Props = { next: () => void } -export const RecommendedFeeds = observer(({next}: Props) => { +export const RecommendedFeeds = observer(function RecommendedFeedsImpl({ + next, +}: Props) { const pal = usePalette('default') const {isTabletOrMobile} = useWebMediaQueries() diff --git a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx index d16b3213e..e5d12273a 100644 --- a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx @@ -13,130 +13,134 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {makeRecordUri} from 'lib/strings/url-helpers' import {sanitizeHandle} from 'lib/strings/handles' -export const RecommendedFeedsItem = observer( - ({did, rkey}: {did: string; rkey: string}) => { - const {isMobile} = useWebMediaQueries() - const pal = usePalette('default') - const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey) - const item = useCustomFeed(uri) - if (!item) return null - const onToggle = async () => { - if (item.isSaved) { - try { - await item.unsave() - } catch (e) { - Toast.show('There was an issue contacting your server') - console.error('Failed to unsave feed', {e}) - } - } else { - try { - await item.save() - await item.pin() - } catch (e) { - Toast.show('There was an issue contacting your server') - console.error('Failed to pin feed', {e}) - } +export const RecommendedFeedsItem = observer(function RecommendedFeedsItemImpl({ + did, + rkey, +}: { + did: string + rkey: string +}) { + const {isMobile} = useWebMediaQueries() + const pal = usePalette('default') + const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey) + const item = useCustomFeed(uri) + if (!item) return null + const onToggle = async () => { + if (item.isSaved) { + try { + await item.unsave() + } catch (e) { + Toast.show('There was an issue contacting your server') + console.error('Failed to unsave feed', {e}) + } + } else { + try { + await item.save() + await item.pin() + } catch (e) { + Toast.show('There was an issue contacting your server') + console.error('Failed to pin feed', {e}) } } - return ( - <View testID={`feed-${item.displayName}`}> - <View - style={[ - pal.border, - { - flex: isMobile ? 1 : undefined, - flexDirection: 'row', - gap: 18, - maxWidth: isMobile ? undefined : 670, - borderRightWidth: isMobile ? undefined : 1, - paddingHorizontal: 24, - paddingVertical: isMobile ? 12 : 24, - borderTopWidth: 1, - }, - ]}> - <View style={{marginTop: 2}}> - <UserAvatar type="algo" size={42} avatar={item.data.avatar} /> - </View> - <View style={{flex: isMobile ? 1 : undefined}}> + } + return ( + <View testID={`feed-${item.displayName}`}> + <View + style={[ + pal.border, + { + flex: isMobile ? 1 : undefined, + flexDirection: 'row', + gap: 18, + maxWidth: isMobile ? undefined : 670, + borderRightWidth: isMobile ? undefined : 1, + paddingHorizontal: 24, + paddingVertical: isMobile ? 12 : 24, + borderTopWidth: 1, + }, + ]}> + <View style={{marginTop: 2}}> + <UserAvatar type="algo" size={42} avatar={item.data.avatar} /> + </View> + <View style={{flex: isMobile ? 1 : undefined}}> + <Text + type="2xl-bold" + numberOfLines={1} + style={[pal.text, {fontSize: 19}]}> + {item.displayName} + </Text> + + <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}> + by {sanitizeHandle(item.data.creator.handle, '@')} + </Text> + + {item.data.description ? ( <Text - type="2xl-bold" - numberOfLines={1} - style={[pal.text, {fontSize: 19}]}> - {item.displayName} + type="xl" + style={[ + pal.text, + { + flex: isMobile ? 1 : undefined, + maxWidth: 550, + marginBottom: 18, + }, + ]} + numberOfLines={6}> + {item.data.description} </Text> + ) : null} - <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}> - by {sanitizeHandle(item.data.creator.handle, '@')} - </Text> + <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}> + <Button + type="inverted" + style={{paddingVertical: 6}} + onPress={onToggle}> + <View + style={{ + flexDirection: 'row', + alignItems: 'center', + paddingRight: 2, + gap: 6, + }}> + {item.isSaved ? ( + <> + <FontAwesomeIcon + icon="check" + size={16} + color={pal.colors.textInverted} + /> + <Text type="lg-medium" style={pal.textInverted}> + Added + </Text> + </> + ) : ( + <> + <FontAwesomeIcon + icon="plus" + size={16} + color={pal.colors.textInverted} + /> + <Text type="lg-medium" style={pal.textInverted}> + Add + </Text> + </> + )} + </View> + </Button> - {item.data.description ? ( - <Text - type="xl" - style={[ - pal.text, - { - flex: isMobile ? 1 : undefined, - maxWidth: 550, - marginBottom: 18, - }, - ]} - numberOfLines={6}> - {item.data.description} + <View style={{flexDirection: 'row', gap: 4}}> + <HeartIcon + size={16} + strokeWidth={2.5} + style={[pal.textLight, {position: 'relative', top: 2}]} + /> + <Text type="lg-medium" style={[pal.text, pal.textLight]}> + {item.data.likeCount || 0} </Text> - ) : null} - - <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}> - <Button - type="inverted" - style={{paddingVertical: 6}} - onPress={onToggle}> - <View - style={{ - flexDirection: 'row', - alignItems: 'center', - paddingRight: 2, - gap: 6, - }}> - {item.isSaved ? ( - <> - <FontAwesomeIcon - icon="check" - size={16} - color={pal.colors.textInverted} - /> - <Text type="lg-medium" style={pal.textInverted}> - Added - </Text> - </> - ) : ( - <> - <FontAwesomeIcon - icon="plus" - size={16} - color={pal.colors.textInverted} - /> - <Text type="lg-medium" style={pal.textInverted}> - Add - </Text> - </> - )} - </View> - </Button> - - <View style={{flexDirection: 'row', gap: 4}}> - <HeartIcon - size={16} - strokeWidth={2.5} - style={[pal.textLight, {position: 'relative', top: 2}]} - /> - <Text type="lg-medium" style={[pal.text, pal.textLight]}> - {item.data.likeCount || 0} - </Text> - </View> </View> </View> </View> </View> - ) - }, -) + </View> + ) +}) diff --git a/src/view/com/auth/onboarding/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx index 7b7555ace..c066e9bd5 100644 --- a/src/view/com/auth/onboarding/WelcomeDesktop.tsx +++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx @@ -14,7 +14,9 @@ type Props = { skip: () => void } -export const WelcomeDesktop = observer(({next}: Props) => { +export const WelcomeDesktop = observer(function WelcomeDesktopImpl({ + next, +}: Props) { const pal = usePalette('default') const horizontal = useMediaQuery({minWidth: 1300}) const title = ( diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx index 0f627ad0b..19c8d52d0 100644 --- a/src/view/com/auth/onboarding/WelcomeMobile.tsx +++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx @@ -13,7 +13,10 @@ type Props = { skip: () => void } -export const WelcomeMobile = observer(({next, skip}: Props) => { +export const WelcomeMobile = observer(function WelcomeMobileImpl({ + next, + skip, +}: Props) { const pal = usePalette('default') return ( diff --git a/src/view/com/auth/withAuthRequired.tsx b/src/view/com/auth/withAuthRequired.tsx index c81c2d5df..25d12165f 100644 --- a/src/view/com/auth/withAuthRequired.tsx +++ b/src/view/com/auth/withAuthRequired.tsx @@ -17,7 +17,7 @@ import {STATUS_PAGE_URL} from 'lib/constants' export const withAuthRequired = <P extends object>( Component: React.ComponentType<P>, ): React.FC<P> => - observer((props: P) => { + observer(function AuthRequired(props: P) { const store = useStores() if (store.session.isResumingSession) { return <Loading /> |