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