ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
ewancroft.uk
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 {getTerminology, TERMINOLOGY} from '#/lib/strings/terminology'
8import {useTerminologyPreference} from '#/state/preferences'
9import {OUTER_SPACE} from '#/screens/PostThread/const'
10import {atoms as a, useTheme} from '#/alf'
11import {Button, ButtonIcon, ButtonText} from '#/components/Button'
12import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotate'
13import * as Layout from '#/components/Layout'
14import {Text} from '#/components/Typography'
15
16export function ThreadError({
17 error,
18 onRetry,
19}: {
20 error: Error
21 onRetry: () => void
22}) {
23 const t = useTheme()
24 const {_} = useLingui()
25 const terminologyPreference = useTerminologyPreference()
26 const cleanError = useCleanError()
27
28 const {title, message} = useMemo(() => {
29 let title = _(getTerminology(terminologyPreference, TERMINOLOGY.errorLoading))
30 let message = _(msg`Something went wrong. Please try again in a moment.`)
31
32 const {raw, clean} = cleanError(error)
33
34 if (error.message.startsWith('Post not found')) {
35 title = _(getTerminology(terminologyPreference, TERMINOLOGY.notFound))
36 message = clean || raw || message
37 }
38
39 return {title, message}
40 }, [_, error, cleanError, terminologyPreference])
41
42 return (
43 <Layout.Center>
44 <View
45 style={[
46 a.w_full,
47 a.align_center,
48 {
49 padding: OUTER_SPACE,
50 paddingTop: OUTER_SPACE * 2,
51 },
52 ]}>
53 <View
54 style={[
55 a.w_full,
56 a.align_center,
57 a.gap_xl,
58 {
59 maxWidth: 260,
60 },
61 ]}>
62 <View style={[a.gap_xs]}>
63 <Text
64 style={[
65 a.text_center,
66 a.text_lg,
67 a.font_semi_bold,
68 a.leading_snug,
69 ]}>
70 {title}
71 </Text>
72 <Text
73 style={[
74 a.text_center,
75 a.text_sm,
76 a.leading_snug,
77 t.atoms.text_contrast_medium,
78 ]}>
79 {message}
80 </Text>
81 </View>
82 <Button
83 label={_(msg`Retry`)}
84 size="small"
85 variant="solid"
86 color="secondary_inverted"
87 onPress={onRetry}>
88 <ButtonText>
89 <Trans>Retry</Trans>
90 </ButtonText>
91 <ButtonIcon icon={RetryIcon} position="right" />
92 </Button>
93 </View>
94 </View>
95 </Layout.Center>
96 )
97}