mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {View} from 'react-native'
3import {useNavigation} from '@react-navigation/core'
4import {StackActions} from '@react-navigation/native'
5import {msg, Trans} from '@lingui/macro'
6import {useLingui} from '@lingui/react'
7
8import {NavigationProp} from 'lib/routes/types'
9import {CenteredView} from 'view/com/util/Views'
10import {atoms as a, useBreakpoints, useTheme} from '#/alf'
11import {Button, ButtonText} from '#/components/Button'
12import {Text} from '#/components/Typography'
13import {router} from '#/routes'
14
15export function Error({
16 title,
17 message,
18 onRetry,
19}: {
20 title?: string
21 message?: string
22 onRetry?: () => unknown
23}) {
24 const navigation = useNavigation<NavigationProp>()
25 const {_} = useLingui()
26 const t = useTheme()
27 const {gtMobile} = useBreakpoints()
28
29 const canGoBack = navigation.canGoBack()
30 const onGoBack = React.useCallback(() => {
31 if (canGoBack) {
32 navigation.goBack()
33 } else {
34 navigation.navigate('HomeTab')
35
36 // Checking the state for routes ensures that web doesn't encounter errors while going back
37 if (navigation.getState()?.routes) {
38 navigation.dispatch(StackActions.push(...router.matchPath('/')))
39 } else {
40 navigation.navigate('HomeTab')
41 navigation.dispatch(StackActions.popToTop())
42 }
43 }
44 }, [navigation, canGoBack])
45
46 return (
47 <CenteredView
48 style={[
49 a.flex_1,
50 a.align_center,
51 !gtMobile ? a.justify_between : a.gap_5xl,
52 t.atoms.border_contrast_low,
53 {paddingTop: 175, paddingBottom: 110},
54 ]}
55 sideBorders>
56 <View style={[a.w_full, a.align_center, a.gap_lg]}>
57 <Text style={[a.font_bold, a.text_3xl]}>{title}</Text>
58 <Text
59 style={[
60 a.text_md,
61 a.text_center,
62 t.atoms.text_contrast_high,
63 {lineHeight: 1.4},
64 gtMobile && {width: 450},
65 ]}>
66 {message}
67 </Text>
68 </View>
69 <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
70 {onRetry && (
71 <Button
72 variant="solid"
73 color="primary"
74 label={_(msg`Press to retry`)}
75 onPress={onRetry}
76 size="large"
77 style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
78 <ButtonText>
79 <Trans>Retry</Trans>
80 </ButtonText>
81 </Button>
82 )}
83 <Button
84 variant="solid"
85 color={onRetry ? 'secondary' : 'primary'}
86 label={_(msg`Return to previous page`)}
87 onPress={onGoBack}
88 size="large"
89 style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
90 <ButtonText>
91 <Trans>Go Back</Trans>
92 </ButtonText>
93 </Button>
94 </View>
95 </CenteredView>
96 )
97}