mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
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={[
62 a.text_center,
63 a.text_lg,
64 a.font_semi_bold,
65 a.leading_snug,
66 ]}>
67 {title}
68 </Text>
69 <Text
70 style={[
71 a.text_center,
72 a.text_sm,
73 a.leading_snug,
74 t.atoms.text_contrast_medium,
75 ]}>
76 {message}
77 </Text>
78 </View>
79 <Button
80 label={_(msg`Retry`)}
81 size="small"
82 variant="solid"
83 color="secondary_inverted"
84 onPress={onRetry}>
85 <ButtonText>
86 <Trans>Retry</Trans>
87 </ButtonText>
88 <ButtonIcon icon={RetryIcon} position="right" />
89 </Button>
90 </View>
91 </View>
92 </Layout.Center>
93 )
94}