Skip to content

Commit

Permalink
Logged out improvments (#5771)
Browse files Browse the repository at this point in the history
* fetch all accounts in one go

* delete unused component

* add safeareaview to logged out layout

* add safe area insets to LoggedOut view

* add safe area insets to the error boundary

* sanitize displaynames/handles

* use button for X

* increase spacing
  • Loading branch information
mozzius authored Oct 17, 2024
1 parent 9a91746 commit 74b0929
Show file tree
Hide file tree
Showing 10 changed files with 75 additions and 129 deletions.
15 changes: 7 additions & 8 deletions src/Splash.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import React, {useCallback, useEffect} from 'react'
import {
View,
StyleSheet,
Image as RNImage,
AccessibilityInfo,
Image as RNImage,
StyleSheet,
useColorScheme,
View,
} from 'react-native'
import * as SplashScreen from 'expo-splash-screen'
import {Image} from 'expo-image'
import Animated, {
Easing,
interpolate,
runOnJS,
useAnimatedStyle,
useSharedValue,
withTiming,
Easing,
} from 'react-native-reanimated'
import MaskedView from '@react-native-masked-view/masked-view'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import Svg, {Path, SvgProps} from 'react-native-svg'
import {Image} from 'expo-image'
import * as SplashScreen from 'expo-splash-screen'
import MaskedView from '@react-native-masked-view/masked-view'

import {isAndroid} from '#/platform/detection'
import {Logotype} from '#/view/icons/Logotype'

// @ts-ignore
import splashImagePointer from '../assets/splash.png'
// @ts-ignore
Expand Down
22 changes: 16 additions & 6 deletions src/components/AccountList.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React, {useCallback} from 'react'
import {View} from 'react-native'
import {AppBskyActorDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {useProfileQuery} from '#/state/queries/profile'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {useProfilesQuery} from '#/state/queries/profile'
import {type SessionAccount, useSession} from '#/state/session'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
Expand All @@ -26,6 +29,9 @@ export function AccountList({
const {currentAccount, accounts} = useSession()
const t = useTheme()
const {_} = useLingui()
const {data: profiles} = useProfilesQuery({
handles: accounts.map(acc => acc.did),
})

const onPressAddAccount = useCallback(() => {
onSelectOther()
Expand All @@ -43,6 +49,7 @@ export function AccountList({
{accounts.map(account => (
<React.Fragment key={account.did}>
<AccountItem
profile={profiles?.profiles.find(p => p.did === account.did)}
account={account}
onSelect={onSelectAccount}
isCurrentAccount={account.did === currentAccount?.did}
Expand Down Expand Up @@ -84,21 +91,22 @@ export function AccountList({
}

function AccountItem({
profile,
account,
onSelect,
isCurrentAccount,
isPendingAccount,
}: {
profile?: AppBskyActorDefs.ProfileViewDetailed
account: SessionAccount
onSelect: (account: SessionAccount) => void
isCurrentAccount: boolean
isPendingAccount: boolean
}) {
const t = useTheme()
const {_} = useLingui()
const {data: profile} = useProfileQuery({did: account.did})

const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
onSelect(account)
}, [account, onSelect])

Expand Down Expand Up @@ -127,10 +135,12 @@ function AccountItem({
</View>
<Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
<Text emoji style={[a.font_bold]}>
{profile?.displayName || account.handle}{' '}
</Text>
{sanitizeDisplayName(
profile?.displayName || profile?.handle || account.handle,
)}
</Text>{' '}
<Text emoji style={[t.atoms.text_contrast_medium]}>
{account.handle}
{sanitizeHandle(account.handle)}
</Text>
</Text>
{isCurrentAccount ? (
Expand Down
4 changes: 2 additions & 2 deletions src/screens/Deactivated.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,15 @@ export function Deactivated() {
}, [_, agent, setPending, setError, queryClient])

return (
<View style={[a.h_full_vh, a.flex_1, t.atoms.bg]}>
<View style={[a.util_screen_outer, a.flex_1, t.atoms.bg]}>
<ScrollView
style={[a.h_full, a.w_full]}
contentContainerStyle={{borderWidth: 0}}>
<View
style={[
a.px_2xl,
{
paddingTop: isWeb ? 64 : insets.top,
paddingTop: isWeb ? 64 : insets.top + 16,
paddingBottom: isWeb ? 64 : insets.bottom,
},
]}>
Expand Down
6 changes: 3 additions & 3 deletions src/state/shell/logged-out.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react'

import {isWeb} from 'platform/detection'
import {useSession} from 'state/session'
import {useActiveStarterPack} from 'state/shell/starter-pack'
import {isWeb} from '#/platform/detection'
import {useSession} from '#/state/session'
import {useActiveStarterPack} from '#/state/shell/starter-pack'

type State = {
showLoggedOut: boolean
Expand Down
60 changes: 32 additions & 28 deletions src/view/com/auth/LoggedOut.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React from 'react'
import {Pressable, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {usePalette} from '#/lib/hooks/usePalette'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {logEvent} from '#/lib/statsig/statsig'
import {s} from '#/lib/styles'
import {isIOS} from '#/platform/detection'
import {
useLoggedOutView,
useLoggedOutViewControls,
Expand All @@ -17,6 +15,9 @@ import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
import {Login} from '#/screens/Login'
import {Signup} from '#/screens/Signup'
import {LandingScreen} from '#/screens/StarterPack/StarterPackLandingScreen'
import {atoms as a, native, tokens, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
import {SplashScreen} from './SplashScreen'

enum ScreenState {
Expand All @@ -29,7 +30,8 @@ export {ScreenState as LoggedOutScreenState}

export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
const {_} = useLingui()
const pal = usePalette('default')
const t = useTheme()
const insets = useSafeAreaInsets()
const setMinimalShellMode = useSetMinimalShellMode()
const {requestedAccountSwitchTo} = useLoggedOutView()
const [screenState, setScreenState] = React.useState<ScreenState>(() => {
Expand Down Expand Up @@ -57,31 +59,33 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
}, [clearRequestedAccount, onDismiss])

return (
<View testID="noSessionView" style={[s.hContentRegion, pal.view]}>
<View
testID="noSessionView"
style={[
a.util_screen_outer,
t.atoms.bg,
{paddingTop: insets.top, paddingBottom: insets.bottom},
]}>
<ErrorBoundary>
{onDismiss && screenState === ScreenState.S_LoginOrCreateAccount ? (
<Pressable
accessibilityHint={_(msg`Go back`)}
accessibilityLabel={_(msg`Go back`)}
accessibilityRole="button"
style={{
position: 'absolute',
top: isIOS ? 0 : 20,
right: 20,
padding: 10,
zIndex: 100,
backgroundColor: pal.text.color,
borderRadius: 100,
}}
<Button
label={_(msg`Go back`)}
variant="solid"
color="secondary_inverted"
size="small"
shape="round"
PressableComponent={native(PressableScale)}
style={[
a.absolute,
{
top: insets.top + tokens.space.xl,
right: tokens.space.xl,
zIndex: 100,
},
]}
onPress={onPressDismiss}>
<FontAwesomeIcon
icon="x"
size={12}
style={{
color: String(pal.textInverted.color),
}}
/>
</Pressable>
<ButtonIcon icon={XIcon} />
</Button>
) : null}

{screenState === ScreenState.S_StarterPack ? (
Expand Down
4 changes: 3 additions & 1 deletion src/view/com/util/ErrorBoundary.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, {Component, ErrorInfo, ReactNode} from 'react'
import {StyleProp, ViewStyle} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'

Expand All @@ -9,6 +10,7 @@ import {CenteredView} from './Views'
interface Props {
children?: ReactNode
renderError?: (error: any) => ReactNode
style?: StyleProp<ViewStyle>
}

interface State {
Expand Down Expand Up @@ -37,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
}

return (
<CenteredView style={{height: '100%', flex: 1}}>
<CenteredView style={[{height: '100%', flex: 1}, this.props.style]}>
<TranslatedErrorScreen details={this.state.error.toString()} />
</CenteredView>
)
Expand Down
15 changes: 6 additions & 9 deletions src/view/com/util/layouts/LoggedOutLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react'
import {ScrollView, StyleSheet, View} from 'react-native'

import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {isWeb} from '#/platform/detection'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {atoms as a} from '#/alf'
import {Text} from '../text/Text'

Expand Down Expand Up @@ -36,7 +36,7 @@ export const LoggedOutLayout = ({
if (scrollable) {
return (
<ScrollView
style={styles.scrollview}
style={a.flex_1}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="none"
contentContainerStyle={[
Expand Down Expand Up @@ -75,7 +75,7 @@ export const LoggedOutLayout = ({
{scrollable ? (
<View style={[styles.scrollableContent, contentBg]}>
<ScrollView
style={styles.scrollview}
style={a.flex_1}
contentContainerStyle={styles.scrollViewContentContainer}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag">
Expand Down Expand Up @@ -113,9 +113,6 @@ const styles = StyleSheet.create({
scrollableContent: {
flex: 2,
},
scrollview: {
flex: 1,
},
scrollViewContentContainer: {
flex: 1,
paddingHorizontal: 40,
Expand Down
69 changes: 0 additions & 69 deletions src/view/com/util/layouts/TitleColumnLayout.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions src/view/shell/createNativeStackNavigatorWithAuth.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,17 @@ import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src

import {PWI_ENABLED} from '#/lib/build-flags'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {isNative, isWeb} from '#/platform/detection'
import {useSession} from '#/state/session'
import {useOnboardingState} from '#/state/shell'
import {
useLoggedOutView,
useLoggedOutViewControls,
} from '#/state/shell/logged-out'
import {isNative, isWeb} from 'platform/detection'
import {LoggedOut} from '#/view/com/auth/LoggedOut'
import {Deactivated} from '#/screens/Deactivated'
import {Onboarding} from '#/screens/Onboarding'
import {SignupQueued} from '#/screens/SignupQueued'
import {LoggedOut} from '../com/auth/LoggedOut'
import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
import {DesktopLeftNav} from './desktop/LeftNav'
import {DesktopRightNav} from './desktop/RightNav'
Expand Down
Loading

0 comments on commit 74b0929

Please sign in to comment.