diff --git a/ProtectedRouter.tsx b/ProtectedRouter.tsx index 7cf0a907..d78503f9 100644 --- a/ProtectedRouter.tsx +++ b/ProtectedRouter.tsx @@ -33,6 +33,7 @@ import { resetNewVisitedCases } from './src/reducer/allCasesSlice'; import { getCaseUnifiedData, UnifiedCaseDetailsTypes } from './src/action/caseApiActions'; import FeedbackDetailContainer from './src/screens/caseDetails/feedback/FeedbackDetailContainer'; import EmiSchedule from './src/screens/emiSchedule'; +import { NetworkStatusService } from "./src/services/network-monitoring.service"; const ANIMATION_DURATION = 300; @@ -83,8 +84,9 @@ const ProtectedRouter = () => { interactionsHandler() const dispatch = useAppDispatch(); - - // Firestore listener hook + NetworkStatusService.listenForOnline(dispatch); + + // Firestore listener hook useFirestoreUpdates(); if (!deviceId) { diff --git a/src/hooks/useIsOnline.tsx b/src/hooks/useIsOnline.tsx index 19dc697b..9826d06a 100644 --- a/src/hooks/useIsOnline.tsx +++ b/src/hooks/useIsOnline.tsx @@ -1,33 +1,8 @@ -import { View, Text } from 'react-native' import React from 'react' -import NetInfo from '@react-native-community/netinfo'; -import { setNetworkStatus } from '../services/clickstreamEventService'; +import { useAppSelector } from "./index"; const useIsOnline = () => { - const [isOnline, setIsOnline] = React.useState(true); - NetInfo.configure({ - reachabilityUrl: 'https://google.com', - reachabilityTest: async response => response.status === 200, - reachabilityLongTimeout: 30 * 1000, // 60s - reachabilityShortTimeout: 5 * 1000, // 5s - reachabilityRequestTimeout: 15 * 1000, // 15s - }); - - NetInfo.configure({ - reachabilityUrl: 'https://google.com', - reachabilityTest: async response => response.status === 200, - reachabilityLongTimeout: 30 * 1000, // 60s - reachabilityShortTimeout: 5 * 1000, // 5s - reachabilityRequestTimeout: 15 * 1000, // 15s - }); - - NetInfo.addEventListener(state => { - setNetworkStatus(state); - if (isOnline !== state.isConnected) { - setIsOnline(!!state.isConnected && !!state.isInternetReachable); - } - }); - return isOnline; + return useAppSelector(state => state.networkStatus.isOnline); } export default useIsOnline \ No newline at end of file diff --git a/src/reducer/index.ts b/src/reducer/index.ts index d8529567..dc0314d6 100644 --- a/src/reducer/index.ts +++ b/src/reducer/index.ts @@ -4,6 +4,7 @@ import caseReducer from './caseReducer'; import formReducer from './formData'; import QueueSlice from './Queue'; import paymentSlice from './paymentSlice'; +import NetworkStatusSlice from "./networkStatusSlice"; const rootReducer = combineReducers({ caseDetail: caseReducer, @@ -11,6 +12,7 @@ const rootReducer = combineReducers({ loginInfo: loginSlice, queue: QueueSlice, payment: paymentSlice, + networkStatus : NetworkStatusSlice }); export default rootReducer; diff --git a/src/reducer/networkStatusSlice.ts b/src/reducer/networkStatusSlice.ts new file mode 100644 index 00000000..1d05d656 --- /dev/null +++ b/src/reducer/networkStatusSlice.ts @@ -0,0 +1,23 @@ +import { createSlice } from '@reduxjs/toolkit'; + +interface INetworkStatus { + isOnline: boolean +} + +const initialState = { + isOnline : true, +} as INetworkStatus; + +const NetworkStatusSlice = createSlice({ + name: 'networkStatus', + initialState, + reducers: { + setIsOnline: (state, action) => { + state.isOnline = action.payload; + }, + }, +}); + +export const {setIsOnline} = NetworkStatusSlice.actions; + +export default NetworkStatusSlice.reducer; diff --git a/src/services/network-monitoring.service.ts b/src/services/network-monitoring.service.ts new file mode 100644 index 00000000..5cdf5f67 --- /dev/null +++ b/src/services/network-monitoring.service.ts @@ -0,0 +1,42 @@ +import NetInfo from "@react-native-community/netinfo"; +import { setNetworkStatus } from "./clickstreamEventService"; +import { setIsOnline } from "../reducer/networkStatusSlice"; + + +export class NetworkStatusService { + private static isOnline = false; + private static isAlreadyListening = false; + // private static listeners: any[] = []; + private constructor() { // singleton + } + + static listenForOnline (dispatch:any) { + if(!NetworkStatusService.isAlreadyListening){ + NetInfo.configure({ + reachabilityUrl: 'https://google.com', + reachabilityTest: async response => response.status === 200, + reachabilityLongTimeout: 30 * 1000, // 60s + reachabilityShortTimeout: 5 * 1000, // 5s + reachabilityRequestTimeout: 15 * 1000, // 15s + }); + + + // check initial state. + NetInfo.fetch().then(state => { + NetworkStatusService.isOnline = !!state.isConnected + dispatch(setIsOnline(NetworkStatusService.isOnline)) + }); + + // listen for changes. + NetInfo.addEventListener(state => { + setNetworkStatus(state); + if (NetworkStatusService.isOnline !== state.isConnected) { + NetworkStatusService.isOnline = !!state.isConnected && !!state.isInternetReachable + dispatch(setIsOnline(NetworkStatusService.isOnline)) + } + }); + NetworkStatusService.isAlreadyListening = true; + } + } +} + diff --git a/src/store/store.ts b/src/store/store.ts index 953689a5..e49e43f3 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -24,6 +24,7 @@ import addressSlice from '../reducer/addressSlice'; import emiScheduleSlice from '../reducer/emiScheduleSlice'; import repaymentsSlice from '../reducer/repaymentsSlice'; import feedbackHistorySlice from '../reducer/feedbackHistorySlice'; +import NetworkStatusSlice from "../reducer/networkStatusSlice"; const rootReducer = combineReducers({ case: caseReducer, @@ -37,7 +38,8 @@ const rootReducer = combineReducers({ emiSchedule: emiScheduleSlice, repayments: repaymentsSlice, feedbackHistory: feedbackHistorySlice, - address: addressSlice + address: addressSlice, + networkStatus : NetworkStatusSlice }); const persistConfig = {