forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+69
-62
+1
-1
src/view/com/modals/ProfilePreview.tsx
+1
-1
src/view/com/modals/ProfilePreview.tsx
+53
-45
src/view/com/util/error/ErrorScreen.tsx
+53
-45
src/view/com/util/error/ErrorScreen.tsx
···
11
11
import {CenteredView} from '../Views'
12
12
import {Trans, msg} from '@lingui/macro'
13
13
import {useLingui} from '@lingui/react'
14
+
import {ViewHeader} from 'view/com/util/ViewHeader'
15
+
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
14
16
15
17
export function ErrorScreen({
16
18
title,
···
18
20
details,
19
21
onPressTryAgain,
20
22
testID,
23
+
showHeader,
21
24
}: {
22
25
title: string
23
26
message: string
24
27
details?: string
25
28
onPressTryAgain?: () => void
26
29
testID?: string
30
+
showHeader?: boolean
27
31
}) {
28
32
const theme = useTheme()
33
+
const {isMobile} = useWebMediaQueries()
29
34
const pal = usePalette('default')
30
35
const {_} = useLingui()
31
36
32
37
return (
33
-
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
34
-
<View style={styles.errorIconContainer}>
35
-
<View
36
-
style={[
37
-
styles.errorIcon,
38
-
{backgroundColor: theme.palette.inverted.background},
39
-
]}>
40
-
<FontAwesomeIcon
41
-
icon="exclamation"
42
-
style={pal.textInverted as FontAwesomeIconStyle}
43
-
size={24}
44
-
/>
45
-
</View>
46
-
</View>
47
-
<Text type="title-lg" style={[styles.title, pal.text]}>
48
-
{title}
49
-
</Text>
50
-
<Text style={[styles.message, pal.text]}>{message}</Text>
51
-
{details && (
52
-
<Text
53
-
testID={`${testID}-details`}
54
-
style={[styles.details, pal.text, pal.viewLight]}>
55
-
{details}
56
-
</Text>
57
-
)}
58
-
{onPressTryAgain && (
59
-
<View style={styles.btnContainer}>
60
-
<Button
61
-
testID="errorScreenTryAgainButton"
62
-
type="default"
63
-
style={[styles.btn]}
64
-
onPress={onPressTryAgain}
65
-
accessibilityLabel={_(msg`Retry`)}
66
-
accessibilityHint={_(
67
-
msg`Retries the last action, which errored out`,
68
-
)}>
38
+
<>
39
+
{showHeader && isMobile && <ViewHeader title="Error" showBorder />}
40
+
<CenteredView testID={testID} style={[styles.outer, pal.view]}>
41
+
<View style={styles.errorIconContainer}>
42
+
<View
43
+
style={[
44
+
styles.errorIcon,
45
+
{backgroundColor: theme.palette.inverted.background},
46
+
]}>
69
47
<FontAwesomeIcon
70
-
icon="arrows-rotate"
71
-
style={pal.link as FontAwesomeIconStyle}
72
-
size={16}
48
+
icon="exclamation"
49
+
style={pal.textInverted as FontAwesomeIconStyle}
50
+
size={24}
73
51
/>
74
-
<Text type="button" style={[styles.btnText, pal.link]}>
75
-
<Trans context="action">Try again</Trans>
76
-
</Text>
77
-
</Button>
52
+
</View>
78
53
</View>
79
-
)}
80
-
</CenteredView>
54
+
<Text type="title-lg" style={[styles.title, pal.text]}>
55
+
{title}
56
+
</Text>
57
+
<Text style={[styles.message, pal.text]}>{message}</Text>
58
+
{details && (
59
+
<Text
60
+
testID={`${testID}-details`}
61
+
style={[styles.details, pal.text, pal.viewLight]}>
62
+
{details}
63
+
</Text>
64
+
)}
65
+
{onPressTryAgain && (
66
+
<View style={styles.btnContainer}>
67
+
<Button
68
+
testID="errorScreenTryAgainButton"
69
+
type="default"
70
+
style={[styles.btn]}
71
+
onPress={onPressTryAgain}
72
+
accessibilityLabel={_(msg`Retry`)}
73
+
accessibilityHint={_(
74
+
msg`Retries the last action, which errored out`,
75
+
)}>
76
+
<FontAwesomeIcon
77
+
icon="arrows-rotate"
78
+
style={pal.link as FontAwesomeIconStyle}
79
+
size={16}
80
+
/>
81
+
<Text type="button" style={[styles.btnText, pal.link]}>
82
+
<Trans context="action">Try again</Trans>
83
+
</Text>
84
+
</Button>
85
+
</View>
86
+
)}
87
+
</CenteredView>
88
+
</>
81
89
)
82
90
}
83
91
+15
-16
src/view/screens/Profile.tsx
+15
-16
src/view/screens/Profile.tsx
···
50
50
51
51
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
52
52
export function ProfileScreen({route}: Props) {
53
+
const {_} = useLingui()
53
54
const {currentAccount} = useSession()
54
55
const name =
55
56
route.params.name === 'me' ? currentAccount?.did : route.params.name
···
97
98
}
98
99
if (resolveError || profileError) {
99
100
return (
100
-
<CenteredView>
101
-
<ErrorScreen
102
-
testID="profileErrorScreen"
103
-
title="Oops!"
104
-
message={cleanError(resolveError || profileError)}
105
-
onPressTryAgain={onPressTryAgain}
106
-
/>
107
-
</CenteredView>
101
+
<ErrorScreen
102
+
testID="profileErrorScreen"
103
+
title={profileError ? _(msg`Not Found`) : _(msg`Oops!`)}
104
+
message={cleanError(resolveError || profileError)}
105
+
onPressTryAgain={onPressTryAgain}
106
+
showHeader
107
+
/>
108
108
)
109
109
}
110
110
if (profile && moderationOpts) {
···
118
118
}
119
119
// should never happen
120
120
return (
121
-
<CenteredView>
122
-
<ErrorScreen
123
-
testID="profileErrorScreen"
124
-
title="Oops!"
125
-
message="Something went wrong and we're not sure what."
126
-
onPressTryAgain={onPressTryAgain}
127
-
/>
128
-
</CenteredView>
121
+
<ErrorScreen
122
+
testID="profileErrorScreen"
123
+
title="Oops!"
124
+
message="Something went wrong and we're not sure what."
125
+
onPressTryAgain={onPressTryAgain}
126
+
showHeader
127
+
/>
129
128
)
130
129
}
131
130