@applicaster/zapp-react-native-ui-components 16.0.0-rc.104 → 16.0.0-rc.105

package/Components/OfflineHandler/__tests__/index.test.tsx

@@ -10,6 +10,28 @@ jest.useFakeTimers({ legacyFakeTimers: true });
 // isConnected/isInternetReachable/details fields, so the mock has to mirror
 // that shape for online/offline to actually be distinguishable.
 let mockConnectionStatus = false;
+let mockStillOfflineAfterResumeCount = 0;
+
+const mockComponentsLogger = {
+  log: jest.fn(),
+  debug: jest.fn(),
+  info: jest.fn(),
+  warning: jest.fn(),
+  error: jest.fn(),
+};
+
+jest.mock("../../../Helpers/logger", () => {
+  const proxy = {
+    log: (event) => mockComponentsLogger.log(event),
+    debug: (event) => mockComponentsLogger.debug(event),
+    info: (event) => mockComponentsLogger.info(event),
+    warning: (event) => mockComponentsLogger.warning(event),
+    error: (event) => mockComponentsLogger.error(event),
+    addSubsystem: () => proxy,
+  };
+
+  return { componentsLogger: proxy };
+});
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
   return {
@@ -20,6 +42,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/connection", () => {
       details: {},
       isConnected: mockConnectionStatus,
       isInternetReachable: mockConnectionStatus,
+      stillOfflineAfterResumeCount: mockStillOfflineAfterResumeCount,
     })),
   };
 });
@@ -58,6 +81,7 @@ describe("OfflineHandler", () => {
 
   beforeEach(() => {
     mockConnectionStatus = false;
+    mockStillOfflineAfterResumeCount = 0;
   });
 
   it("renders its children without wrapping them in a notification view", () => {
@@ -131,4 +155,89 @@ describe("OfflineHandler", () => {
 
     unsubscribe();
   });
+
+  it("re-shows the offline toast when still offline after app resume", () => {
+    mockConnectionStatus = false;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    const { rerender } = render(<OfflineHandler />);
+    handleShowToast.mockClear();
+
+    mockStillOfflineAfterResumeCount = 1;
+    rerender(<OfflineHandler />);
+
+    expect(handleShowToast).toHaveBeenCalledTimes(1);
+
+    expect(handleShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "offline-status",
+        message: "No internet connection",
+        timeout: 5000,
+      }),
+      expect.any(Function)
+    );
+
+    // further renders with the same counter must not re-emit
+    rerender(<OfflineHandler />);
+    expect(handleShowToast).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+  });
+
+  it("does not re-show the offline toast for a counter bump while online", () => {
+    mockConnectionStatus = true;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    const { rerender } = render(<OfflineHandler />);
+
+    mockStillOfflineAfterResumeCount = 1;
+    rerender(<OfflineHandler />);
+
+    expect(handleShowToast).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("does not emit on mount just because the counter is already > 0", () => {
+    mockConnectionStatus = true;
+    mockStillOfflineAfterResumeCount = 3;
+
+    const handleShowToast = jest.fn();
+    const unsubscribe = subscriberFor("showToast", handleShowToast);
+
+    render(<OfflineHandler />);
+
+    expect(handleShowToast).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+
+  it("logs toast emissions at info level", () => {
+    mockConnectionStatus = false;
+    mockComponentsLogger.info.mockClear();
+    mockComponentsLogger.warning.mockClear();
+
+    const { rerender } = render(<OfflineHandler />);
+
+    mockConnectionStatus = true;
+    rerender(<OfflineHandler />);
+
+    expect(mockComponentsLogger.info).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "OfflineHandler: device is offline, emit toast",
+      })
+    );
+
+    expect(mockComponentsLogger.info).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: "OfflineHandler: device is back online, emit toast",
+      })
+    );
+
+    expect(mockComponentsLogger.warning).not.toHaveBeenCalled();
+  });
 });

package/Components/OfflineHandler/index.tsx

@@ -29,12 +29,22 @@ export const OfflineHandler = ({ children }: Props) => {
   const { online } = parseConnectionInfo(connectionInfo);
   const prevOnline = usePrevious(online);
 
+  const stillOfflineAfterResumeCount =
+    connectionInfo?.stillOfflineAfterResumeCount ?? 0;
+
+  const prevStillOfflineAfterResumeCount = usePrevious(
+    stillOfflineAfterResumeCount
+  );
+
   const emitShowToast = useSubscriberFor(SHOW_TOAST_EVENT);
 
   const { message, extraMessage, style } = useOfflineHandlerProps(online);
 
   const showOnlineToast = useCallback(() => {
-    logger.log("Device is back online, emit toast");
+    logger.info({
+      message: "OfflineHandler: device is back online, emit toast",
+      data: { online, prevOnline },
+    });
 
     emitShowToast({
       id: OFFLINE_STATUS_TOAST_ID,
@@ -43,10 +53,13 @@ export const OfflineHandler = ({ children }: Props) => {
       style,
       timeout: timers.goingOnline,
     });
-  }, [emitShowToast, message, extraMessage, style]);
+  }, [emitShowToast, message, extraMessage, style, online, prevOnline]);
 
   const showOfflineToast = useCallback(() => {
-    logger.log("Device went offline, emit toast");
+    logger.info({
+      message: "OfflineHandler: device is offline, emit toast",
+      data: { online, prevOnline, stillOfflineAfterResumeCount },
+    });
 
     emitShowToast({
       id: OFFLINE_STATUS_TOAST_ID,
@@ -55,7 +68,15 @@ export const OfflineHandler = ({ children }: Props) => {
       style,
       timeout: timers.goingOffline,
     });
-  }, [emitShowToast, message, extraMessage, style]);
+  }, [
+    emitShowToast,
+    message,
+    extraMessage,
+    style,
+    online,
+    prevOnline,
+    stillOfflineAfterResumeCount,
+  ]);
 
   useEffect(() => {
     // On mount there is no previous state yet: only surface the offline toast
@@ -79,5 +100,22 @@ export const OfflineHandler = ({ children }: Props) => {
     }
   }, [online, prevOnline, showOfflineToast, showOnlineToast]);
 
+  useEffect(() => {
+    // NetworkStatusProvider bumps this counter when the app resumed while offline
+    // and is still offline after the verification delay: remind the user.
+    if (
+      prevStillOfflineAfterResumeCount !== undefined &&
+      stillOfflineAfterResumeCount > prevStillOfflineAfterResumeCount &&
+      !online
+    ) {
+      showOfflineToast();
+    }
+  }, [
+    stillOfflineAfterResumeCount,
+    prevStillOfflineAfterResumeCount,
+    online,
+    showOfflineToast,
+  ]);
+
   return children;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.104",
+  "version": "16.0.0-rc.105",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.104",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.104",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.104",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.104",
+    "@applicaster/applicaster-types": "16.0.0-rc.105",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.105",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.105",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.105",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",