zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Fix error screen on native, use `Not Found` for profile errors instead of `Oops!` (#2789) 

* remove unnecessary `<CenterView>`

* show back header on profile error

* use `Not Found` instead of `Oops` for account errors

* use `Not Found` instead of `Oops` for account errors
zio/stable
Hailey 2024-02-08 12:01:36 -08:00 committed by GitHub
parent 4041db31e2
commit 1de1d10cf6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 69 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/com/modals/ProfilePreview.tsx
View File

@ -46,7 +46,7 @@ export function Component({did}: {did: string}) {
if (profileError) {
return (
<ErrorScreen
title={_(msg`Oops!`)}
title={_(msg`Not Found`)}
message={cleanError(profileError)}
onPressTryAgain={refetchProfile}
/>

98
src/view/com/util/error/ErrorScreen.tsx
View File

@ -11,6 +11,8 @@ import {Button} from '../forms/Button'
import {CenteredView} from '../Views'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
export function ErrorScreen({
title,
@ -18,66 +20,72 @@ export function ErrorScreen({
details,
onPressTryAgain,
testID,
showHeader,
}: {
title: string
message: string
details?: string
onPressTryAgain?: () => void
testID?: string
showHeader?: boolean
}) {
const theme = useTheme()
const {isMobile} = useWebMediaQueries()
const pal = usePalette('default')
const {_} = useLingui()
return (
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
<View style={styles.errorIconContainer}>
<View
style={[
styles.errorIcon,
{backgroundColor: theme.palette.inverted.background},
]}>
<FontAwesomeIcon
icon="exclamation"
style={pal.textInverted as FontAwesomeIconStyle}
size={24}
/>
</View>
</View>
<Text type="title-lg" style={[styles.title, pal.text]}>
{title}
</Text>
<Text style={[styles.message, pal.text]}>{message}</Text>
{details && (
<Text
testID={`${testID}-details`}
style={[styles.details, pal.text, pal.viewLight]}>
{details}
</Text>
)}
{onPressTryAgain && (
<View style={styles.btnContainer}>
<Button
testID="errorScreenTryAgainButton"
type="default"
style={[styles.btn]}
onPress={onPressTryAgain}
accessibilityLabel={_(msg`Retry`)}
accessibilityHint={_(
msg`Retries the last action, which errored out`,
)}>
<>
{showHeader && isMobile && <ViewHeader title="Error" showBorder />}
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
<View style={styles.errorIconContainer}>
<View
style={[
styles.errorIcon,
{backgroundColor: theme.palette.inverted.background},
]}>
<FontAwesomeIcon
icon="arrows-rotate"
style={pal.link as FontAwesomeIconStyle}
size={16}
icon="exclamation"
style={pal.textInverted as FontAwesomeIconStyle}
size={24}
/>
<Text type="button" style={[styles.btnText, pal.link]}>
<Trans context="action">Try again</Trans>
</Text>
</Button>
</View>
</View>
)}
</CenteredView>
<Text type="title-lg" style={[styles.title, pal.text]}>
{title}
</Text>
<Text style={[styles.message, pal.text]}>{message}</Text>
{details && (
<Text
testID={`${testID}-details`}
style={[styles.details, pal.text, pal.viewLight]}>
{details}
</Text>
)}
{onPressTryAgain && (
<View style={styles.btnContainer}>
<Button
testID="errorScreenTryAgainButton"
type="default"
style={[styles.btn]}
onPress={onPressTryAgain}
accessibilityLabel={_(msg`Retry`)}
accessibilityHint={_(
msg`Retries the last action, which errored out`,
)}>
<FontAwesomeIcon
icon="arrows-rotate"
style={pal.link as FontAwesomeIconStyle}
size={16}
/>
<Text type="button" style={[styles.btnText, pal.link]}>
<Trans context="action">Try again</Trans>
</Text>
</Button>
</View>
)}
</CenteredView>
</>
)
}

31
src/view/screens/Profile.tsx
View File

@ -50,6 +50,7 @@ interface SectionRef {
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
export function ProfileScreen({route}: Props) {
const {_} = useLingui()
const {currentAccount} = useSession()
const name =
route.params.name === 'me' ? currentAccount?.did : route.params.name
@ -97,14 +98,13 @@ export function ProfileScreen({route}: Props) {
}
if (resolveError || profileError) {
return (
<CenteredView>
<ErrorScreen
testID="profileErrorScreen"
title="Oops!"
message={cleanError(resolveError || profileError)}
onPressTryAgain={onPressTryAgain}
/>
</CenteredView>
<ErrorScreen
testID="profileErrorScreen"
title={profileError ? _(msg`Not Found`) : _(msg`Oops!`)}
message={cleanError(resolveError || profileError)}
onPressTryAgain={onPressTryAgain}
showHeader
/>
)
}
if (profile && moderationOpts) {
@ -118,14 +118,13 @@ export function ProfileScreen({route}: Props) {
}
// should never happen
return (
<CenteredView>
<ErrorScreen
testID="profileErrorScreen"
title="Oops!"
message="Something went wrong and we're not sure what."
onPressTryAgain={onPressTryAgain}
/>
</CenteredView>
<ErrorScreen
testID="profileErrorScreen"
title="Oops!"
message="Something went wrong and we're not sure what."
onPressTryAgain={onPressTryAgain}
showHeader
/>
)
}