@applicaster/quick-brick-core 16.0.0-rc.11 → 16.0.0-rc.110

package/App/NetworkStatusProvider/__tests__/useResumeVerifiedNetInfo.test.ts

@@ -0,0 +1,189 @@
+import React from "react";
+import { renderHook, act } from "@testing-library/react-native";
+import { AppState, Platform } from "react-native";
+
+import { useResumeVerifiedNetInfo } from "../useResumeVerifiedNetInfo";
+import { RESUME_VERIFICATION_DELAY_MS } from "../resumeVerification";
+import { isOnline } from "../utils";
+
+const mockLogger = {
+  warning: jest.fn(),
+  debug: jest.fn(),
+  info: jest.fn(),
+  log: jest.fn(),
+  error: jest.fn(),
+};
+
+// addSubsystem runs at module load, before mockLogger is initialised: delegate lazily
+jest.mock("../../logger", () => ({
+  coreAppLogger: {
+    addSubsystem: () => ({
+      warning: (event) => mockLogger.warning(event),
+      debug: (event) => mockLogger.debug(event),
+      info: (event) => mockLogger.info(event),
+      log: (event) => mockLogger.log(event),
+      error: (event) => mockLogger.error(event),
+    }),
+  },
+}));
+
+jest.mock("react-native/Libraries/AppState/AppState", () => {
+  const { EventEmitter } = require("events");
+  const emitter = new EventEmitter();
+
+  return {
+    emitter,
+    currentState: "active",
+    addEventListener: (type, handler) => {
+      emitter.addListener(type, handler);
+
+      return { remove: () => emitter.removeListener(type, handler) };
+    },
+  };
+});
+
+const ONLINE = {
+  type: "wifi",
+  details: { isConnectionExpensive: false },
+  isConnected: true,
+  isInternetReachable: true,
+  deviceStatus: null,
+} as any;
+
+const OFFLINE = {
+  type: "wifi",
+  details: { isConnectionExpensive: false },
+  isConnected: false,
+  isInternetReachable: false,
+  deviceStatus: null,
+} as any;
+
+const mockAppState = AppState as any;
+
+const changeAppState = (state: string) =>
+  act(() => {
+    mockAppState.currentState = state;
+    mockAppState.emitter.emit("change", state);
+  });
+
+const advance = (ms: number) =>
+  act(() => {
+    jest.advanceTimersByTime(ms);
+  });
+
+const setup = (initial = ONLINE, options = {}) => {
+  const hook = renderHook(({ info }) => useResumeVerifiedNetInfo(info), {
+    initialProps: { info: initial },
+    ...options,
+  });
+
+  const setLive = (info) => hook.rerender({ info });
+  const publishedOnline = () => isOnline(hook.result.current.netInfo) === true;
+
+  return { ...hook, setLive, publishedOnline };
+};
+
+const infoMessages = () =>
+  mockLogger.info.mock.calls.map(([event]) => event.message);
+
+describe("useResumeVerifiedNetInfo", () => {
+  const originalOS = Platform.OS;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    Platform.OS = "ios";
+    mockAppState.currentState = "active";
+    mockAppState.emitter.removeAllListeners();
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    Platform.OS = originalOS;
+  });
+
+  it("publishes live changes immediately while active", () => {
+    const { setLive, result } = setup(ONLINE);
+
+    setLive(OFFLINE);
+
+    expect(result.current.netInfo).toBe(OFFLINE);
+    expect(result.current.stillOfflineAfterResumeCount).toBe(0);
+  });
+
+  it("holds the state in background and publishes the verified state 5s after resume", () => {
+    const { setLive, publishedOnline } = setup(ONLINE);
+
+    changeAppState("background");
+    setLive(OFFLINE);
+    changeAppState("active");
+
+    advance(RESUME_VERIFICATION_DELAY_MS - 1);
+    expect(publishedOnline()).toBe(true);
+
+    advance(1);
+    expect(publishedOnline()).toBe(false);
+  });
+
+  it("logs the resume verification at info level (delegates to the controller)", () => {
+    setup(ONLINE);
+
+    changeAppState("background");
+    changeAppState("active");
+    advance(RESUME_VERIFICATION_DELAY_MS);
+
+    expect(infoMessages()).toEqual(
+      expect.arrayContaining([
+        "NetworkStatus: resume verification started",
+        "NetworkStatus: resume verification finished",
+      ])
+    );
+
+    expect(mockLogger.warning).not.toHaveBeenCalled();
+  });
+
+  it("exposes stillOfflineAfterResumeCount after an offline resume", () => {
+    const { result } = setup(OFFLINE);
+
+    changeAppState("background");
+    changeAppState("active");
+    advance(RESUME_VERIFICATION_DELAY_MS);
+
+    expect(result.current.stillOfflineAfterResumeCount).toBe(1);
+  });
+
+  it("stops the controller on unmount (no AppState listener, pending window never finishes)", () => {
+    const { setLive, unmount } = setup(ONLINE);
+
+    changeAppState("background");
+    changeAppState("active");
+    setLive(OFFLINE);
+
+    unmount();
+    advance(RESUME_VERIFICATION_DELAY_MS);
+
+    expect(mockAppState.emitter.listenerCount("change")).toBe(0);
+
+    expect(infoMessages()).not.toContain(
+      "NetworkStatus: resume verification finished"
+    );
+  });
+
+  it("works under React.StrictMode (double-invoked effects)", () => {
+    const { setLive, publishedOnline } = setup(ONLINE, {
+      wrapper: React.StrictMode,
+    });
+
+    expect(mockAppState.emitter.listenerCount("change")).toBe(1);
+
+    changeAppState("background");
+    changeAppState("active");
+    setLive(OFFLINE);
+
+    advance(RESUME_VERIFICATION_DELAY_MS - 1);
+    expect(publishedOnline()).toBe(true);
+
+    advance(1);
+    expect(publishedOnline()).toBe(false);
+  });
+});

package/App/NetworkStatusProvider/resumeVerification.ts

@@ -0,0 +1,54 @@
+import { Platform } from "react-native";
+import { NetInfoState } from "@react-native-community/netinfo";
+import { isConnectionInfoReady, isOnline } from "./utils";
+
+type ConnectionInfo = NetInfoState & { deviceStatus?: NetStatus };
+
+export type ResumeDecision =
+  | "still_online"
+  | "went_offline"
+  | "back_online"
+  | "still_offline";
+
+/**
+ * Time to wait after the app returns to foreground before trusting NetInfo.
+ * On iOS the JS reachability check (NetInfo internetReachability) is suspended
+ * with the app and reports a stale failure right after resume/unlock.
+ */
+export const RESUME_VERIFICATION_DELAY_MS = 5000;
+
+// Only "background" suspends JS (and NetInfo's reachability check). "inactive"
+// (Control Center, Notification Center, system alerts) keeps JS running, and is
+// where users toggle airplane mode / Wi-Fi, so changes there must pass through.
+export const isBackgroundAppState = (state?: string | null): boolean =>
+  state === "background";
+
+// Mobile only: tvOS / Android TV report Platform.OS "ios" / "android" too
+export const isResumeVerificationEnabled = (): boolean =>
+  (Platform.OS === "ios" || Platform.OS === "android") && !Platform.isTV;
+
+export const getResumeDecision = (
+  wasOnline: boolean,
+  isOnlineNow: boolean
+): ResumeDecision => {
+  if (wasOnline) {
+    return isOnlineNow ? "still_online" : "went_offline";
+  }
+
+  return isOnlineNow ? "back_online" : "still_offline";
+};
+
+// Log-safe summary: details holds ipAddress/subnet/carrier, never log it as is
+export const describeNetInfo = (info: ConnectionInfo | null) => {
+  const safeInfo = (info ?? {}) as ConnectionInfo;
+
+  return {
+    online: isOnline(safeInfo) === true,
+    isReady: !!isConnectionInfoReady(safeInfo),
+    type: safeInfo.type,
+    isConnected: safeInfo.isConnected,
+    isInternetReachable: safeInfo.isInternetReachable,
+    deviceOnline: safeInfo.deviceStatus?.online,
+    at: new Date().toISOString(),
+  };
+};

package/App/NetworkStatusProvider/useResumeVerifiedNetInfo.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import {
+  ConnectionInfo,
+  ResumeVerificationController,
+  ResumeVerifiedState,
+} from "./ResumeVerificationController";
+
+/**
+ * Network status verified after the app returns from background,
+ * see ResumeVerificationController.
+ * liveNetInfo must keep its reference until it really changes (memoize it),
+ * every new reference is treated as a network update.
+ */
+export function useResumeVerifiedNetInfo<T extends ConnectionInfo>(
+  liveNetInfo: T
+): ResumeVerifiedState<T> {
+  const [controller] = React.useState(
+    () => new ResumeVerificationController(liveNetInfo)
+  );
+
+  React.useLayoutEffect(() => {
+    controller.start();
+
+    return () => controller.stop();
+  }, [controller]);
+
+  React.useLayoutEffect(() => {
+    controller.setNetInfo(liveNetInfo);
+  }, [controller, liveNetInfo]);
+
+  return React.useSyncExternalStore(controller.subscribe, controller.getState);
+}

package/App/NotificationToastRenderer/NotificationToastManager.ts

@@ -0,0 +1,214 @@
+import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { subscriberFor } from "@applicaster/zapp-react-native-utils/reactHooks/useSubscriberFor";
+
+// events accepted on the shared cross-package event bus (see useSubscriberFor),
+// so packages that must not depend on quick-brick-core (e.g. OfflineHandler in
+// zapp-react-native-ui-components) can trigger a toast by event name alone,
+// without importing notificationToastManager directly.
+const unwrapEventPayload = (payload: unknown) =>
+  Array.isArray(payload) ? payload[0] : payload;
+
+export const NOTIFICATION_TOAST_EVENTS = {
+  SHOW_TOAST: "showToast", // in: request to enqueue a toast
+  DISMISS: "dismiss", // in: renderer/user dismissed the visible toast early
+  SHOW: "show", // out: renderer should display this toast
+  HIDE: "hide", // out: renderer should hide the current toast
+} as const;
+
+export interface ToastStyle {
+  backgroundColor?: string;
+  color?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  letterSpacing?: number;
+}
+
+export const DEFAULT_TOAST_TIMEOUT = 4000;
+
+export const CONFIRMATION_TOAST_SOURCE = "confirmation";
+
+export interface ToastPayload {
+  id?: string;
+  message: string;
+  extraMessage?: string; // secondary line; TV renderers show it as a subtitle, mobile ignores it
+  timeout?: number; // ms; defaults to DEFAULT_TOAST_TIMEOUT (4000) if omitted
+  style?: ToastStyle;
+  // stamped by the showToast action; Theme confirmation styles apply when
+  // source === CONFIRMATION_TOAST_SOURCE ("confirmation")
+  source?: string;
+  [key: string]: unknown;
+}
+
+class NotificationToastManager {
+  private static instance: NotificationToastManager;
+
+  private eventHandler = subscriber();
+  private queue: ToastPayload[] = [];
+  private hideTimer: ReturnType<typeof setTimeout> | null = null;
+  private isShowing = false;
+  private nextId = 0;
+
+  private constructor() {
+    // subscribe to the shared event bus so other packages can trigger toasts
+    subscriberFor(
+      NOTIFICATION_TOAST_EVENTS.SHOW_TOAST,
+      this.handleShowToastEvent
+    );
+
+    subscriberFor(NOTIFICATION_TOAST_EVENTS.DISMISS, this.handleDismiss);
+
+    this.getCurrentState = this.getCurrentState.bind(this);
+    this.subscribe = this.subscribe.bind(this);
+  }
+
+  static getInstance(): NotificationToastManager {
+    if (!NotificationToastManager.instance) {
+      NotificationToastManager.instance = new NotificationToastManager();
+    }
+
+    return NotificationToastManager.instance;
+  }
+
+  on(event: string, callback: (...args: any[]) => void) {
+    this.eventHandler.on(event, callback);
+  }
+
+  removeHandler(event: string, callback: (...args: any[]) => void) {
+    this.eventHandler.removeHandler(event, callback);
+  }
+
+  showToast(payload: ToastPayload) {
+    this.handleShowToast(payload);
+  }
+
+  dismiss() {
+    this.handleDismiss();
+  }
+
+  getCurrentState() {
+    return this.queue[0] ?? null;
+  }
+
+  subscribe(callback) {
+    this.eventHandler.on(NOTIFICATION_TOAST_EVENTS.SHOW, callback);
+
+    this.eventHandler.on(NOTIFICATION_TOAST_EVENTS.HIDE, callback);
+
+    return () => {
+      this.eventHandler.removeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, callback);
+
+      this.eventHandler.removeHandler(NOTIFICATION_TOAST_EVENTS.HIDE, callback);
+    };
+  }
+
+  // subscriberFor's shared bus can deliver the raw payload (component emitters,
+  // see useSubscriberFor) or an args array (postEvent-style callers) - accept both.
+  private handleShowToastEvent = (payload: unknown) => {
+    if (!payload) {
+      console.warn(
+        "NotificationToastManager: Invalid showToast payload:",
+        payload
+      );
+
+      return;
+    }
+
+    const unwrappedPayload = unwrapEventPayload(payload) as ToastPayload;
+
+    if (!unwrappedPayload || typeof unwrappedPayload.message !== "string") {
+      console.warn(
+        "NotificationToastManager: Invalid showToast payload:",
+        payload
+      );
+
+      return;
+    }
+
+    this.handleShowToast(unwrappedPayload);
+  };
+
+  private handleShowToast = (payload: ToastPayload) => {
+    const item = {
+      ...payload,
+      id: payload.id ?? String(this.nextId++),
+      timeout: payload.timeout ?? DEFAULT_TOAST_TIMEOUT,
+    };
+
+    const queuedIndex = this.queue.findIndex((queued) => queued.id === item.id);
+
+    if (queuedIndex === -1) {
+      this.queue.push(item);
+    } else if (queuedIndex === 0 && this.isShowing) {
+      // this id is the toast currently on screen - swap its content in place
+      // (new one appears in front of it) and dismiss the old timer/content
+      this.clearTimer();
+      this.queue[0] = item;
+      this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, item);
+
+      if (item.timeout) {
+        this.hideTimer = setTimeout(() => this.finishCurrent(), item.timeout);
+      }
+
+      return;
+    } else {
+      // still queued, not yet shown - update it in place instead of duplicating
+      this.queue[queuedIndex] = item;
+
+      return;
+    }
+
+    if (!this.isShowing) {
+      this.processNext();
+    }
+  };
+
+  private handleDismiss = () => {
+    if (!this.isShowing) {
+      return;
+    }
+
+    this.finishCurrent();
+  };
+
+  private processNext() {
+    const next = this.queue[0];
+
+    if (!next) {
+      this.isShowing = false;
+
+      return;
+    }
+
+    this.isShowing = true;
+    this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.SHOW, next);
+
+    if (next.timeout) {
+      this.hideTimer = setTimeout(() => this.finishCurrent(), next.timeout);
+    }
+  }
+
+  private finishCurrent() {
+    this.clearTimer();
+    this.queue.shift();
+    this.eventHandler.invokeHandler(NOTIFICATION_TOAST_EVENTS.HIDE);
+    this.isShowing = false;
+    this.processNext();
+  }
+
+  private clearTimer() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+  }
+
+  public reset(): void {
+    this.clearTimer();
+    this.queue = [];
+    this.isShowing = false;
+    this.nextId = 0;
+  }
+}
+
+export const notificationToastManager = NotificationToastManager.getInstance();

package/App/NotificationToastRenderer/NotificationToastRenderer.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, Animated, StyleSheet, ViewStyle } from "react-native";
+import {
+  Directions,
+  Gesture,
+  GestureDetector,
+} from "react-native-gesture-handler";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import {
+  CONFIRMATION_TOAST_SOURCE,
+  notificationToastManager,
+} from "./NotificationToastManager";
+import { useNotificationToastState } from "./useNotificationToastState";
+import { useNotificationHeight } from "./useNotificationHeight";
+import { resolveConfirmationToastStyle } from "./resolveConfirmationToastStyle";
+
+const DEFAULT_TOAST_BACKGROUND_COLOR = "#000";
+const DEFAULT_TOAST_MESSAGE_COLOR = "#fff";
+
+const styles = StyleSheet.create({
+  notificationView: {
+    flex: 1,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+type NumberBoolean = 0 | 1;
+
+export const NotificationToastRenderer = ({ children }) => {
+  const { statusHeight, notificationHeight } = useNotificationHeight();
+  const theme = useTheme<BaseThemePropertiesMobile>();
+
+  const toast = useNotificationToastState();
+
+  const [notificationOpacity, setNotificationOpacity] =
+    useState<NumberBoolean>(0);
+
+  const yPosition = useRef(new Animated.Value(0)).current;
+
+  const resolvedStyle =
+    toast?.source === CONFIRMATION_TOAST_SOURCE
+      ? resolveConfirmationToastStyle(theme, toast.style)
+      : toast?.style;
+
+  const backgroundColor =
+    resolvedStyle?.backgroundColor ?? DEFAULT_TOAST_BACKGROUND_COLOR;
+
+  const color = resolvedStyle?.color ?? DEFAULT_TOAST_MESSAGE_COLOR;
+
+  const textStyles = {
+    color,
+    fontFamily: resolvedStyle?.fontFamily,
+    fontSize: resolvedStyle?.fontSize,
+    lineHeight: resolvedStyle?.lineHeight,
+    letterSpacing: resolvedStyle?.letterSpacing,
+  };
+
+  const animatedViewStyles: ViewStyle = {
+    ...styles.notificationView,
+    transform: [
+      {
+        translateY: yPosition.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-notificationHeight, 0],
+        }),
+      },
+    ],
+    opacity: notificationOpacity,
+    height: notificationHeight,
+    width: "100%",
+
+    backgroundColor,
+  };
+
+  const flingGesture = useMemo(
+    () =>
+      Gesture.Fling()
+        .direction(Directions.UP)
+        .enabled(!!toast)
+        .runOnJS(true)
+        .onEnd((_event, success) => {
+          if (success) {
+            notificationToastManager.dismiss();
+          }
+        }),
+    [toast]
+  );
+
+  useEffect(() => {
+    if (toast) {
+      setNotificationOpacity(1);
+
+      Animated.timing(yPosition, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 300,
+      }).start();
+    } else {
+      Animated.timing(yPosition, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 300,
+      }).start(() => setNotificationOpacity(0));
+    }
+  }, [toast]);
+
+  return (
+    <View
+      testID="NotificationToastRenderer"
+      style={StyleSheet.absoluteFill}
+      pointerEvents="box-none"
+    >
+      {children}
+      <GestureDetector gesture={flingGesture}>
+        <Animated.View
+          testID="NotificationToastRenderer-fling"
+          pointerEvents={toast ? "auto" : "none"}
+          style={animatedViewStyles}
+        >
+          <View style={{ height: statusHeight, backgroundColor }} />
+          <Text testID="NotificationToastRenderer-message" style={textStyles}>
+            {toast?.message}
+          </Text>
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};

package/App/NotificationToastRenderer/NotificationToastRenderer.tv.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+/**
+ * NotificationToastRenderer for TV platforms.
+ * Currently, it does not render anything except for the children passed to it.
+ */
+
+export const NotificationToastRenderer = ({ children }) => {
+  return <>{children}</>;
+};

package/App/NotificationToastRenderer/NotificationToastRenderer.web.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+import { notificationToastManager } from "./NotificationToastManager";
+import { useNotificationToastState } from "./useNotificationToastState";
+
+const styles: Record<string, React.CSSProperties> = {
+  body: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: 1920,
+    height: 200,
+    background:
+      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    color: "#fff",
+    paddingBottom: 15,
+  },
+  title: {
+    fontSize: 28,
+    margin: 0,
+    padding: 0,
+  },
+  subtitle: {
+    fontSize: 20,
+    margin: 0,
+    padding: 0,
+  },
+};
+
+export const NotificationToastRenderer = ({ children }) => {
+  const toast = useNotificationToastState();
+
+  return (
+    <div
+      data-testid="NotificationToastRenderer"
+      onClick={() => notificationToastManager.dismiss()}
+    >
+      {children}
+      {toast ? (
+        <div
+          data-testid="NotificationToastRenderer-touchable"
+          style={styles.body}
+        >
+          <div style={styles.title}>
+            <h2 data-testid="NotificationToastRenderer-message">
+              {toast.message}
+            </h2>
+          </div>
+          {toast.extraMessage ? (
+            <h4 style={styles.subtitle}>{toast.extraMessage}</h4>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+};