Eric Bailey
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import {useMemo} from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {useCleanError} from '#/lib/hooks/useCleanError'
|
|
import {OUTER_SPACE} from '#/screens/PostThread/const'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
|
import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotateCounterClockwise'
|
|
import * as Layout from '#/components/Layout'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function ThreadError({
|
|
error,
|
|
onRetry,
|
|
}: {
|
|
error: Error
|
|
onRetry: () => void
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
const cleanError = useCleanError()
|
|
|
|
const {title, message} = useMemo(() => {
|
|
let title = _(msg`Error loading post`)
|
|
let message = _(msg`Something went wrong. Please try again in a moment.`)
|
|
|
|
const {raw, clean} = cleanError(error)
|
|
|
|
if (error.message.startsWith('Post not found')) {
|
|
title = _(msg`Post not found`)
|
|
message = clean || raw || message
|
|
}
|
|
|
|
return {title, message}
|
|
}, [_, error, cleanError])
|
|
|
|
return (
|
|
<Layout.Center>
|
|
<View
|
|
style={[
|
|
a.flex_1,
|
|
a.align_center,
|
|
{
|
|
padding: OUTER_SPACE,
|
|
paddingTop: OUTER_SPACE * 2,
|
|
},
|
|
]}>
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
a.align_center,
|
|
a.gap_xl,
|
|
{
|
|
maxWidth: 260,
|
|
},
|
|
]}>
|
|
<View style={[a.gap_xs]}>
|
|
<Text
|
|
style={[a.text_center, a.text_lg, a.font_bold, a.leading_snug]}>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
a.text_center,
|
|
a.text_sm,
|
|
a.leading_snug,
|
|
t.atoms.text_contrast_medium,
|
|
]}>
|
|
{message}
|
|
</Text>
|
|
</View>
|
|
<Button
|
|
label={_(msg`Retry`)}
|
|
size="small"
|
|
variant="solid"
|
|
color="secondary_inverted"
|
|
onPress={onRetry}>
|
|
<ButtonText>
|
|
<Trans>Retry</Trans>
|
|
</ButtonText>
|
|
<ButtonIcon icon={RetryIcon} position="right" />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
</Layout.Center>
|
|
)
|
|
}
|