An ATproto social media client -- with an independent Appview.
quilling.dev
1import {useMemo} from 'react'
2import {View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {useCleanError} from '#/lib/hooks/useCleanError'
7import {OUTER_SPACE} from '#/screens/PostThread/const'
8import {atoms as a, useTheme} from '#/alf'
9import {Button, ButtonIcon, ButtonText} from '#/components/Button'
10import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotateCounterClockwise'
11import * as Layout from '#/components/Layout'
12import {Text} from '#/components/Typography'
13
14export function ThreadError({
15 error,
16 onRetry,
17}: {
18 error: Error
19 onRetry: () => void
20}) {
21 const t = useTheme()
22 const {_} = useLingui()
23 const cleanError = useCleanError()
24
25 const {title, message} = useMemo(() => {
26 let title = _(msg`Error loading post`)
27 let message = _(msg`Something went wrong. Please try again in a moment.`)
28
29 const {raw, clean} = cleanError(error)
30
31 if (error.message.startsWith('Post not found')) {
32 title = _(msg`Post not found`)
33 message = clean || raw || message
34 }
35
36 return {title, message}
37 }, [_, error, cleanError])
38
39 return (
40 <Layout.Center>
41 <View
42 style={[
43 a.w_full,
44 a.align_center,
45 {
46 padding: OUTER_SPACE,
47 paddingTop: OUTER_SPACE * 2,
48 },
49 ]}>
50 <View
51 style={[
52 a.w_full,
53 a.align_center,
54 a.gap_xl,
55 {
56 maxWidth: 260,
57 },
58 ]}>
59 <View style={[a.gap_xs]}>
60 <Text
61 style={[a.text_center, a.text_lg, a.font_bold, a.leading_snug]}>
62 {title}
63 </Text>
64 <Text
65 style={[
66 a.text_center,
67 a.text_sm,
68 a.leading_snug,
69 t.atoms.text_contrast_medium,
70 ]}>
71 {message}
72 </Text>
73 </View>
74 <Button
75 label={_(msg`Retry`)}
76 size="small"
77 variant="solid"
78 color="secondary_inverted"
79 onPress={onRetry}>
80 <ButtonText>
81 <Trans>Retry</Trans>
82 </ButtonText>
83 <ButtonIcon icon={RetryIcon} position="right" />
84 </Button>
85 </View>
86 </View>
87 </Layout.Center>
88 )
89}