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