acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Logged out improvments (#5771)

Browse Source 
* 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
This commit is contained in:
Samuel Newman
2024-10-17 18:48:38 +03:00
committed by GitHub
parent 9a91746fbb
commit 74b0929e4d
10 changed files with 75 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Splash.tsx
+7 -8
View File
@@ -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
src/components/AccountList.tsx
+16 -6
View File
@@ -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'
@@ -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()
@@ -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}
@@ -84,11 +91,13 @@ export function AccountList({
}
function AccountItem({
profile,
account,
onSelect,
isCurrentAccount,
isPendingAccount,
}: {
profile?: AppBskyActorDefs.ProfileViewDetailed
account: SessionAccount
onSelect: (account: SessionAccount) => void
isCurrentAccount: boolean
@@ -96,9 +105,8 @@ function AccountItem({
}) {
const t = useTheme()
const {_} = useLingui()
const {data: profile} = useProfileQuery({did: account.did})
const onPress = React.useCallback(() => {
const onPress = useCallback(() => {
onSelect(account)
}, [account, onSelect])
@@ -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 ? (
src/screens/Deactivated.tsx
+2 -2
View File
@@ -104,7 +104,7 @@ 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}}>
@@ -112,7 +112,7 @@ export function Deactivated() {
style={[
a.px_2xl,
{
paddingTop: isWeb ? 64 : insets.top,
paddingTop: isWeb ? 64 : insets.top + 16,
paddingBottom: isWeb ? 64 : insets.bottom,
},
]}>
src/state/shell/logged-out.tsx
+3 -3
View File
@@ -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
src/view/com/auth/LoggedOut.tsx
+32 -28
View File
@@ -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,
@@ -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 {
@@ -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>(() => {
@@ -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 ? (
src/view/com/util/ErrorBoundary.tsx
+3 -1
View File
@@ -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'
@@ -9,6 +10,7 @@ import {CenteredView} from './Views'
interface Props {
children?: ReactNode
renderError?: (error: any) => ReactNode
style?: StyleProp<ViewStyle>
}
interface State {
@@ -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>
)
src/view/com/util/layouts/LoggedOutLayout.tsx
+6 -9
View File
@@ -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'
@@ -36,7 +36,7 @@ export const LoggedOutLayout = ({
if (scrollable) {
return (
<ScrollView
style={styles.scrollview}
style={a.flex_1}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="none"
contentContainerStyle={[
@@ -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">
@@ -113,9 +113,6 @@ const styles = StyleSheet.create({
scrollableContent: {
flex: 2,
},
scrollview: {
flex: 1,
},
scrollViewContentContainer: {
flex: 1,
paddingHorizontal: 40,
src/view/com/util/layouts/TitleColumnLayout.tsx
-69
View File
@@ -1,69 +0,0 @@
import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
interface Props {
testID?: string
title: JSX.Element
horizontal: boolean
titleStyle?: StyleProp<ViewStyle>
contentStyle?: StyleProp<ViewStyle>
}
export function TitleColumnLayout({
testID,
title,
horizontal,
children,
titleStyle,
contentStyle,
}: React.PropsWithChildren<Props>) {
const pal = usePalette('default')
const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
const contentBg = useColorSchemeStyle(pal.view, {
backgroundColor: pal.colors.background,
borderColor: pal.colors.border,
borderLeftWidth: 1,
})
const layoutStyles = horizontal ? styles2Column : styles1Column
return (
<View testID={testID} style={layoutStyles.container}>
<View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
<View style={[layoutStyles.content, contentBg, contentStyle]}>
{children}
</View>
</View>
)
}
const styles2Column = StyleSheet.create({
container: {
flexDirection: 'row',
height: '100%',
},
title: {
flex: 1,
paddingHorizontal: 40,
paddingBottom: 80,
justifyContent: 'center',
},
content: {
flex: 2,
paddingHorizontal: 40,
justifyContent: 'center',
},
})
const styles1Column = StyleSheet.create({
container: {},
title: {
paddingHorizontal: 40,
paddingVertical: 40,
},
content: {
paddingHorizontal: 40,
paddingVertical: 40,
},
})
src/view/shell/createNativeStackNavigatorWithAuth.tsx
+2 -2
View File
@@ -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'
src/view/shell/index.tsx
+4 -1
View File
@@ -2,6 +2,7 @@ import React from 'react'
import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native'
import {Drawer} from 'react-native-drawer-layout'
import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import * as NavigationBar from 'expo-navigation-bar'
import {StatusBar} from 'expo-status-bar'
import {useNavigation, useNavigationState} from '@react-navigation/native'
@@ -41,6 +42,7 @@ function ShellInner() {
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
const setIsDrawerOpen = useSetDrawerOpen()
const winDim = useWindowDimensions()
const insets = useSafeAreaInsets()
const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
const onOpenDrawer = React.useCallback(
@@ -94,7 +96,8 @@ function ShellInner() {
return (
<>
<Animated.View style={[a.h_full]}>
<ErrorBoundary>
<ErrorBoundary
style={{paddingTop: insets.top, paddingBottom: insets.bottom}}>
<Drawer
renderDrawerContent={renderDrawerContent}
drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}