Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 2x 2x 4x 4x 4x 4x 4x 4x 4x 1x 4x 1x 4x 1x 1x 4x 4x 4x 4x | import React, { useCallback, useMemo, useState } from 'react';
import ErrorBoundary from 'react-native-error-boundary';
import Toast from 'react-native-toast-message';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { SCREENS } from '@repo/constants/screens';
import { useIsNewThemeEnabled } from '@repo/hooks/useFlags';
import { getErrorMessage } from '@repo/utils/error';
import { useBlockBackNavigation } from '@repo/utils/useBlockBackNavigation';
import { FallbackError } from '@/components/FallbackError';
import { LoadingSlider } from '@/components/LoadingSlider';
import { RemoteSafeArea } from '@/components/RemoteSafeArea';
import { useSetFabOffset } from '@/contexts/FabContext';
import { BASE_URL_API } from '@/constants/apis';
import type { AppStackScreenProps } from '@/types/navigation';
import { getAccessToken } from '@/services/mainHttpClient';
import { sentryService } from '@/services/sentryService';
type MaintenanceRemoteProps = {
onClose: () => void;
onSubmitSuccess?: () => void;
onSubmitError?: (error: unknown) => void;
onSubmittingChange?: (isSubmitting: boolean) => void;
setFabOffset?: (offset: number) => void;
auth: {
getAccessToken: () => Promise<string | null>;
};
env: {
baseApiUrl: string;
};
featureFlags?: Record<string, boolean>;
};
const MaintenanceRemote = React.lazy(
// @ts-ignore
() => import('maintenance/Maintenance'),
) as React.LazyExoticComponent<React.ComponentType<MaintenanceRemoteProps>>;
type MaintenanceScreenProps = AppStackScreenProps<typeof SCREENS.MAINTENANCE>;
export const MaintenanceScreen = ({ navigation }: MaintenanceScreenProps) => {
const styles = useStyles();
const { value: isNewTheme } = useIsNewThemeEnabled();
const setFabOffset = useSetFabOffset();
const [mfeIsSubmitting, setMfeIsSubmitting] = useState(false);
const handleMfeSubmittingChange = useCallback(
(submitting: boolean) => {
navigation.setOptions({ gestureEnabled: !submitting });
setMfeIsSubmitting(submitting);
},
[navigation],
);
useBlockBackNavigation(mfeIsSubmitting, { skipGestureHandling: true });
const handleClose = useCallback(() => {
navigation.goBack();
}, [navigation]);
const handleSubmitSuccess = useCallback(() => {
navigation.navigate(SCREENS.CREATE_REQUEST_SUCCESS, {
message: 'Your issue has been reported',
});
}, [navigation]);
const handleSubmitError = useCallback((error: unknown) => {
const apiMessage = getErrorMessage(error);
Toast.show({
type: 'error',
text1: 'Failed to create maintenance request',
...(apiMessage && { text2: apiMessage }),
});
}, []);
const remoteProps = useMemo<MaintenanceRemoteProps>(
() => ({
onClose: handleClose,
onSubmitSuccess: handleSubmitSuccess,
onSubmitError: handleSubmitError,
onSubmittingChange: handleMfeSubmittingChange,
setFabOffset,
auth: { getAccessToken },
env: { baseApiUrl: BASE_URL_API || '' },
featureFlags: { isNewTheme },
}),
[
handleClose,
handleSubmitSuccess,
handleSubmitError,
handleMfeSubmittingChange,
setFabOffset,
isNewTheme,
],
);
return (
<RemoteSafeArea style={styles.container}>
<ErrorBoundary
FallbackComponent={FallbackError}
onError={error => sentryService.captureException(error)}
>
<React.Suspense fallback={<LoadingSlider />}>
<MaintenanceRemote {...remoteProps} />
</React.Suspense>
</ErrorBoundary>
</RemoteSafeArea>
);
};
const useStyles = makeStyles(theme => ({
container: {
flex: 1,
backgroundColor: theme.colors.background.pageMuted,
paddingBottom: theme.metrics.spacing[3],
},
}));
|