address-verification-app/ProtectedRouter.tsx

import crashlytics from '@react-native-firebase/crashlytics';
import { RouteProp } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React, { useEffect } from 'react';
import { getUniqueId } from 'react-native-device-info';
import { useSelector } from 'react-redux';
import { _map } from './RN-UI-LIB/src/utlis/common';
import { GenericType } from './src/common/GenericTypes';
import Widget from './src/components/form';
import { registerNavigateAndDispatch } from './src/components/utlis/apiHelper';
import { getLoanIdToValueFromLocal } from './src/components/utlis/registerPaymentUtils';
import { setGlobalUserData } from './src/constants/Global';
import { useAppDispatch } from './src/hooks';
import useFirestoreUpdates from './src/hooks/useFirestoreUpdates';
import { setLoanIdToValue } from './src/reducer/paymentSlice';
import { setDeviceId } from './src/reducer/userSlice';
import AddressGeolocation from './src/screens/addressGeolocation';
import AllCasesMain from './src/screens/allCases';
import CompletedCase from './src/screens/allCases/CompletedCase';
import CaseDetails from './src/screens/caseDetails/CaseDetails';
import CollectionCaseDetails from './src/screens/caseDetails/CollectionCaseDetail';
import interactionsHandler from './src/screens/caseDetails/interactionsHandler';
import Layout from './src/screens/layout/Layout';
import Login from './src/screens/login';
import OtpInput from './src/screens/login/OtpInput';
import Profile from './src/screens/Profile';
import RegisterPayments from './src/screens/registerPayements/RegisterPayments';
import TodoList from './src/screens/todoList/TodoList';
import { RootState } from './src/store/store';

const ANIMATION_DURATION = 300;

const Stack = createNativeStackNavigator();

export enum PageRouteEnum {
    PAYMENTS = 'registerPayments',
    ADDRESS_GEO = 'addressGeolocation'
}

const ProtectedRouter = () => {
    const user = useSelector(
        (state: RootState) => state.user,
    );

    const template = useSelector(
        (state: RootState) => state.case.templateData,
    );

    const {isLoggedIn, deviceId, sessionDetails} = user;

    interactionsHandler()
    const dispatch = useAppDispatch();
    
    // Firestore listener hook
    useFirestoreUpdates();
    
    if (!deviceId) {
        getUniqueId().then(id => dispatch(setDeviceId(id)));
    }
    // for setting user token in global.ts for api calling's
    setGlobalUserData(sessionDetails?.sessionToken, deviceId, user?.user?.referenceId);

    const getScreenFocusListenerObj = ({route}: {route: RouteProp<GenericType>}) => ({
        focus: () => {
            crashlytics().log(JSON.stringify(route));
        }
      });

    registerNavigateAndDispatch(dispatch);

    useEffect(() => {
        (async () => {
            const loanIdToValueStored = await getLoanIdToValueFromLocal();
            if (loanIdToValueStored) {
                dispatch(setLoanIdToValue(loanIdToValueStored));
            }
        })();
    }, []);

    return (
        <Stack.Navigator>
            {isLoggedIn ? (
                <>
                    <Stack.Screen
                        name="Home"
                        component={AllCasesMain}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="Profile"
                        component={Profile}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="caseDetail"
                        component={CaseDetails}
                        options={{
                            header: () => null,
                            animationDuration: ANIMATION_DURATION,
                            animation: 'none',
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="collectionCaseDetail"
                        component={CollectionCaseDetails}
                        options={{
                            header: () => null,
                            animationDuration: ANIMATION_DURATION,
                            animation: 'none',
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name={PageRouteEnum.PAYMENTS}
                        component={RegisterPayments}
                        options={{
                            header: () => null,
                            animationDuration: ANIMATION_DURATION,
                            animation: 'none',
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name={PageRouteEnum.ADDRESS_GEO}
                        component={AddressGeolocation}
                        options={{
                            header: () => null,
                            animationDuration: ANIMATION_DURATION,
                            animation: 'none',
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    {_map(template?.widget, key => (
                        <Stack.Screen
                            key={key}
                            name={key}
                            component={Widget}
                            options={{
                                header: () => null,
                                animation: 'slide_from_right',
                                animationDuration: ANIMATION_DURATION
                            }}
                            listeners={getScreenFocusListenerObj}
                        />
                    ))}
                    <Stack.Screen
                        name="TodoList"
                        component={TodoList}
                        options={{
                            header: () => null,
                            animation: 'slide_from_bottom',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="CompletedCases"
                        component={CompletedCase}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                </>
            ) : (
                <>
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                    <Stack.Screen
                        name="OTP"
                        component={OtpInput}
                        options={{
                            header: () => null,
                            animation: 'slide_from_right',
                            animationDuration: ANIMATION_DURATION
                        }}
                        listeners={getScreenFocusListenerObj}
                    />
                </>
            )}
        </Stack.Navigator>
    );
};

export default ProtectedRouter;