TP-21895 : added network changes (#164)

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) {

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

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;

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;

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;
+    }
+  }
+}
+

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 = {