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

View File

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

View File

@ -11,6 +11,8 @@ import {Button} from '../forms/Button'
import {CenteredView} from '../Views' import {CenteredView} from '../Views'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {ViewHeader} from 'view/com/util/ViewHeader'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
export function ErrorScreen({ export function ErrorScreen({
title, title,
@ -18,18 +20,23 @@ export function ErrorScreen({
details, details,
onPressTryAgain, onPressTryAgain,
testID, testID,
showHeader,
}: { }: {
title: string title: string
message: string message: string
details?: string details?: string
onPressTryAgain?: () => void onPressTryAgain?: () => void
testID?: string testID?: string
showHeader?: boolean
}) { }) {
const theme = useTheme() const theme = useTheme()
const {isMobile} = useWebMediaQueries()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
return ( return (
<>
{showHeader && isMobile && <ViewHeader title="Error" showBorder />}
<CenteredView testID={testID} style={[styles.outer, pal.view]}> <CenteredView testID={testID} style={[styles.outer, pal.view]}>
<View style={styles.errorIconContainer}> <View style={styles.errorIconContainer}>
<View <View
@ -78,6 +85,7 @@ export function ErrorScreen({
</View> </View>
)} )}
</CenteredView> </CenteredView>
</>
) )
} }

View File

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