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 errorszio/stable
parent
4041db31e2
commit
1de1d10cf6
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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,66 +20,72 @@ 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 (
|
||||||
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
|
<>
|
||||||
<View style={styles.errorIconContainer}>
|
{showHeader && isMobile && <ViewHeader title="Error" showBorder />}
|
||||||
<View
|
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
|
||||||
style={[
|
<View style={styles.errorIconContainer}>
|
||||||
styles.errorIcon,
|
<View
|
||||||
{backgroundColor: theme.palette.inverted.background},
|
style={[
|
||||||
]}>
|
styles.errorIcon,
|
||||||
<FontAwesomeIcon
|
{backgroundColor: theme.palette.inverted.background},
|
||||||
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`,
|
|
||||||
)}>
|
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon="arrows-rotate"
|
icon="exclamation"
|
||||||
style={pal.link as FontAwesomeIconStyle}
|
style={pal.textInverted as FontAwesomeIconStyle}
|
||||||
size={16}
|
size={24}
|
||||||
/>
|
/>
|
||||||
<Text type="button" style={[styles.btnText, pal.link]}>
|
</View>
|
||||||
<Trans context="action">Try again</Trans>
|
|
||||||
</Text>
|
|
||||||
</Button>
|
|
||||||
</View>
|
</View>
|
||||||
)}
|
<Text type="title-lg" style={[styles.title, pal.text]}>
|
||||||
</CenteredView>
|
{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>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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={profileError ? _(msg`Not Found`) : _(msg`Oops!`)}
|
||||||
title="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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue