@applicaster/quick-brick-core 15.0.0-rc.48 → 15.0.0-rc.49

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/__tests__/useOpenSchemeHandler.test.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable max-len */
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import * as feedLoader from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { waitFor, cleanup, renderHook } from "@testing-library/react-native";
 import nock from "nock";
-import * as R from "ramda";
 import React from "react";
-import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
+import { mergeDeepRight } from "ramda";
 import * as helpers from "../../../helpers";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
 import {
   noTargetScreenError,
   resolveError,
@@ -24,6 +23,7 @@ const rivers: Record<string, Partial<ZappRiver>> = {
     home: true,
   },
   B0987: {
+    type: "any",
     id: "B0987",
   },
   C5678: {
@@ -42,7 +42,7 @@ const contentTypes: ZappContentTypes = {
 const endpoint = "http://feed.com";
 
 const pipesEndpoints: ZappPipesEndpoints = {
-  [`${endpoint}`]: {
+  [endpoint]: {
     context_keys: [],
     context_obj: [],
   },
@@ -55,7 +55,6 @@ const navigator = {
   goHome: jest.fn(),
 } as any;
 
-const mockStore = configureStore();
 jest.spyOn(useNavigationHooks, "useNavigation").mockReturnValue(navigator);
 
 const helperSpy = jest.spyOn(helpers, "handlePresentNavigation");
@@ -80,31 +79,17 @@ jest.mock("../../../logger", () => ({
 // to use import instead of require it's required to use jest.mock above
 const { useOpenSchemeHandler } = require("../useOpenSchemeHandler");
 
-const getWrapper = (storeProps = {}) => {
-  const store = mockStore(
-    R.mergeDeepRight(
-      { rivers, contentTypes, pipesEndpoints, appData },
-      storeProps
-    )
-  );
-
-  appStore.set(store);
-
-  const Wrapper = ({ children }: { children: React.ReactChild }) => (
-    /* @ts-ignore */
-    <Provider store={store}>{children}</Provider>
-  );
-
-  return Wrapper;
-};
-
-const testHook = async ({ url, query, storeProps = {}, tests }) => {
-  const wrapper = getWrapper(storeProps);
+const mockStoreObj = { rivers, contentTypes, pipesEndpoints, appData };
 
+const testHook = async ({ url, query, storeProps = {}, tests }: any) => {
   const callback = jest.fn((fn) => fn(tests));
 
   renderHook(() => useOpenSchemeHandler({ url, query, onFinish: callback }), {
-    wrapper,
+    wrapper: ({ children }) => (
+      <WrappedWithProviders store={mergeDeepRight(mockStoreObj, storeProps)}>
+        {children}
+      </WrappedWithProviders>
+    ),
   });
 
   await waitFor(() => expect(callback).toHaveBeenCalled());

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/__tests__/useUrlSchemeHandler.test.tsx

@@ -6,6 +6,30 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
 import { log_warning } from "../../../logger";
+import { handleActionSchemeUrl } from "../useUrlSchemeHandler";
+import { appStore } from "../../../../../../zapp-react-native-redux/AppStore";
+
+type UrlSchemeHandlerArgs = {
+  query: Record<string, unknown>;
+  url: string;
+  onFinish?: (callback: () => void) => void;
+};
+
+type PluginType = "general" | "player";
+
+interface ZappPlugin {
+  urlScheme?: {
+    host: string;
+    handler: (args: UrlSchemeHandlerArgs) => void;
+  };
+}
+
+interface QuickBrickPlugin {
+  module: ZappPlugin;
+  name: string;
+  identifier: string;
+  type: PluginType;
+}
 
 const mockStore = configureStore();
 
@@ -14,153 +38,222 @@ jest.mock("../../../logger", () => ({
   log_warning: jest.fn(),
 }));
 
-const lambdaPlugin = {
-  module: jest.fn() as ZappPlugin,
+const mockHandler = jest.fn(({ onFinish }) => {
+  onFinish?.(() => {});
+});
+
+const mockComplexHandler = jest.fn(({ onFinish }) => {
+  onFinish?.(() => {});
+});
+
+const lambdaPlugin: QuickBrickPlugin = {
+  module: {} as ZappPlugin,
   name: "Lambda plugin",
   identifier: "someplugin",
-  type: "general" as PluginType,
+  type: "general",
 };
 
-const pluginWithHandler = {
+const pluginWithHandler: QuickBrickPlugin = {
   name: "Plugin handling scheme",
   identifier: "plugin-with-handler",
-  type: "general" as PluginType,
+  type: "general",
   module: {
     urlScheme: {
       host: "foo",
-      handler: jest.fn(({ onFinish }) => {
-        onFinish(() => {});
-      }),
+      handler: mockHandler,
+    },
+  },
+};
+
+const pluginWithComplexHandler: QuickBrickPlugin = {
+  name: "Plugin with nested handler",
+  identifier: "plugin-with-nested-handler",
+  type: "general",
+  module: {
+    urlScheme: {
+      host: "complex",
+      handler: mockComplexHandler,
     },
-  } as ZappPlugin,
+  },
 };
 
-const plugins: QuickBrickPlugin[] = [lambdaPlugin, pluginWithHandler];
+const plugins = [lambdaPlugin, pluginWithHandler, pluginWithComplexHandler];
 
 const { useUrlSchemeHandler } = require("../useUrlSchemeHandler");
 
 describe("useUrlSchemeHandler", () => {
-  // beforeEach(() => {
-  //   log_warning.mockClear();
-  // });
+  const store = mockStore({ plugins });
 
-  const store = mockStore({ test: "test", plugins });
+  appStore.set(store);
 
-  const wrapper: React.FC<any> = ({ children }) => (
+  const wrapper: React.FC = ({ children }) => (
     <Provider store={store}>{children}</Provider>
   );
 
-  it("calls correct urlScheme handler with query params", () => {
-    const presentSpy = jest.fn();
-    const onFinish = jest.fn();
-    const url = "test://present?foo=bar";
+  beforeEach(() => {
+    jest.clearAllMocks();
 
-    URLHandlersMap.schemeHandlerHooks.present = presentSpy;
-
-    renderHook(
-      () =>
-        useUrlSchemeHandler({
-          url,
-          onFinish,
-        }),
-      { wrapper }
-    );
-
-    expect(presentSpy).toBeCalledWith({ query: { foo: "bar" }, url, onFinish });
+    Object.keys(URLHandlersMap.schemeHandlerHooks).forEach((key) => {
+      delete (URLHandlersMap.schemeHandlerHooks as any)[key];
+    });
   });
 
-  it("not throws an error and calls onFinish if correct url scheme handler can not be found", () => {
-    const url = "test://nonExistingHost?foo=bar";
-
-    const onFinish = jest.fn((cb) => {
-      cb();
+  describe("Basic URL scheme handling", () => {
+    it("handles query params correctly", () => {
+      const testHandler = jest.fn();
+      (URLHandlersMap.schemeHandlerHooks as any).test = testHandler;
+      const testUrl = "test://test?foo=bar";
+
+      renderHook(
+        () =>
+          useUrlSchemeHandler({
+            url: testUrl,
+            onFinish: jest.fn(),
+          }),
+        { wrapper }
+      );
+
+      expect(testHandler).toBeCalledWith({
+        query: { foo: "bar" },
+        url: testUrl,
+        onFinish: expect.any(Function),
+      });
     });
 
-    renderHook(
-      () =>
-        useUrlSchemeHandler({
-          url,
-          onFinish,
-        }),
-      { wrapper }
-    );
+    it("handles missing scheme handlers gracefully", () => {
+      const testUrl = "test://unknown?foo=bar";
+      const finishCallback = jest.fn();
 
-    expect(onFinish).toBeCalled();
+      const onFinish = jest.fn((cb) => {
+        cb();
+        finishCallback();
+      });
 
-    expect(log_warning).toHaveBeenCalledWith(
-      `unable to resolve ${url}: Non of the installed plugins knows how to handle this urlScheme ${url}`
-    );
-  });
+      renderHook(
+        () =>
+          useUrlSchemeHandler({
+            url: testUrl,
+            onFinish,
+          }),
+        { wrapper }
+      );
 
-  it("calls onFinish when the handler does", () => {
-    const url = "test://present?foo=bar";
-    const onFinish = jest.fn();
+      expect(finishCallback).toBeCalled();
 
-    const presentSpy = jest.fn(() => {
-      onFinish();
+      expect(log_warning).toBeCalledWith(expect.stringContaining(testUrl));
     });
-
-    URLHandlersMap.schemeHandlerHooks.present = presentSpy;
-
-    renderHook(
-      () =>
-        useUrlSchemeHandler({
-          url,
-          onFinish,
-        }),
-      { wrapper }
-    );
-
-    expect(onFinish).toBeCalled();
   });
 
-  it("calls onFinish if handler returns an error", () => {
-    const url = "test://present?foo=bar";
-
-    const onFinish = jest.fn((cb) => {
-      cb();
+  describe("Plugin-based scheme handling", () => {
+    it("resolves and calls plugin handlers", () => {
+      const testUrl = "test://foo?param=test";
+      const onFinish = jest.fn();
+
+      renderHook(
+        () =>
+          useUrlSchemeHandler({
+            url: testUrl,
+            onFinish,
+          }),
+        { wrapper }
+      );
+
+      expect(mockHandler).toBeCalledWith({
+        query: { param: "test" },
+        url: testUrl,
+        onFinish,
+      });
     });
 
-    const presentSpy = jest.fn(() => {
-      throw new Error("error");
+    it("handles complex plugin configurations", () => {
+      const testUrl = "test://complex?param=nested";
+      const onFinish = jest.fn();
+
+      renderHook(
+        () =>
+          useUrlSchemeHandler({
+            url: testUrl,
+            onFinish,
+          }),
+        { wrapper }
+      );
+
+      expect(mockComplexHandler).toBeCalledWith({
+        query: { param: "nested" },
+        url: testUrl,
+        onFinish,
+      });
     });
 
-    URLHandlersMap.schemeHandlerHooks.present = presentSpy;
+    it("ignores plugins without urlScheme", () => {
+      const testUrl = "test://nonexistent?param=value";
+      const finishCallback = jest.fn();
+
+      const onFinish = jest.fn((cb) => {
+        cb();
+        finishCallback();
+      });
+
+      renderHook(
+        () =>
+          useUrlSchemeHandler({
+            url: testUrl,
+            onFinish,
+          }),
+        { wrapper }
+      );
+
+      expect(lambdaPlugin.module).not.toHaveProperty("urlScheme");
+      expect(finishCallback).toBeCalled();
+    });
+  });
 
-    renderHook(
-      () =>
-        useUrlSchemeHandler({
-          url,
-          onFinish,
-        }),
-      { wrapper }
-    );
+  describe("Action scheme handling", () => {
+    it("handles action schemes using plugins", () => {
+      const testUrl = "test://foo?action=test";
 
-    expect(onFinish).toBeCalled();
+      handleActionSchemeUrl({
+        url: testUrl,
+        plugins,
+      } as any);
 
-    expect(log_warning).toHaveBeenCalledWith(`unable to resolve ${url}: error`);
-  });
+      expect(mockHandler).toBeCalledWith({
+        query: { action: "test" },
+        url: testUrl,
+      });
+    });
 
-  it("finds the plugin for the host", () => {
-    const url = "scheme://foo?whatever=bar";
+    it("throws for unknown action schemes", () => {
+      const testUrl = "test://unknown?action=test";
 
-    const onFinish = jest.fn((cb) => {
-      cb();
+      expect(() => {
+        handleActionSchemeUrl({
+          url: testUrl,
+          plugins,
+        } as any);
+      }).toThrow(/Non of the installed plugins/);
     });
 
-    renderHook(
-      () => {
-        useUrlSchemeHandler({ url, onFinish });
-      },
-      { wrapper }
-    );
-
-    expect(pluginWithHandler.module.urlScheme.handler).toBeCalledWith({
-      url,
-      onFinish,
-      query: { whatever: "bar" },
+    it("handles malformed URLs gracefully", () => {
+      const testUrl = "invalid-url";
+      const finishCallback = jest.fn();
+
+      const onFinish = jest.fn((cb) => {
+        cb();
+        finishCallback();
+      });
+
+      renderHook(
+        () =>
+          useUrlSchemeHandler({
+            url: testUrl,
+            onFinish,
+          }),
+        { wrapper }
+      );
+
+      expect(log_warning).toBeCalled();
+      expect(finishCallback).toBeCalled();
     });
-
-    expect(onFinish).toBeCalled();
   });
 });

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useOpenSchemeHandler/index.ts

@@ -1,8 +1,4 @@
-import {
-  useAppSelector,
-  selectContentTypes,
-  selectRivers,
-} from "@applicaster/zapp-react-native-redux";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useEffect } from "react";
@@ -24,6 +20,7 @@ import {
   withInitialPlayerState,
 } from "./utils";
 import { log_warning } from "../../../logger";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 async function handleQuery({
   query,
@@ -101,8 +98,8 @@ async function handleQuery({
 }
 
 export function useOpenSchemeHandler({ query, url, onFinish }) {
-  const rivers = useAppSelector(selectRivers);
-  const contentTypes = useAppSelector(selectContentTypes);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
   const navigator = useNavigation();
   const homeId = getHomeScreenId(rivers);
   const homeRoute = `/river/${homeId}`;

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler.ts

@@ -1,55 +1,59 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import * as R from "ramda";
+import {
+  selectUrlSchemePlugins,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
 
 import { schemeHandlerHooks } from ".";
 import { parseUrl } from "../../helpers";
-
 import { log_warning } from "../../logger";
+import { getPluginModuleUrlScheme } from "@applicaster/zapp-react-native-utils/pluginUtils";
 
 type useUrlSchemeHandlerArgs = {
   url: string;
   onFinish: (callback: (done: () => void) => void) => void;
 };
 
-function resolveSchemeHandler(host, plugins) {
+function resolveSchemeHandler(
+  host: string,
+  eligiblePlugins: QuickBrickPlugin[]
+) {
+  // First check built-in scheme handlers
   if (schemeHandlerHooks?.[host]) return schemeHandlerHooks?.[host];
 
-  const elligiblePlugins = R.filter(
-    R.hasPath(["module", "urlScheme"]),
-    plugins
-  );
-
-  if (elligiblePlugins?.length > 0) {
-    const match = R.compose(
-      R.prop("handler"),
-      R.head,
-      R.filter(R.propEq("host", host)),
-      R.map(R.path(["module", "urlScheme"]))
-    )(elligiblePlugins);
+  if (eligiblePlugins?.length > 0) {
+    // Find the first plugin with matching host
+    const matchingPlugin = eligiblePlugins.find(
+      (plugin) => getPluginModuleUrlScheme(plugin)?.host === host
+    );
 
-    return match;
+    return getPluginModuleUrlScheme(matchingPlugin)?.handler || null;
   }
-}
 
-const skipSchemeHandle = ({ url }) => {
-  throw new Error(
-    `Non of the installed plugins knows how to handle this urlScheme ${url}`
-  );
-};
+  return null;
+}
 
 export function useUrlSchemeHandler({
   url,
   onFinish,
 }: useUrlSchemeHandlerArgs) {
   const { host, query } = parseUrl(url);
-  const { plugins } = usePickFromState(["plugins"]);
+  const pluginsWithUrlScheme = useAppSelector(selectUrlSchemePlugins) || [];
 
-  const useSchemeHandler =
-    resolveSchemeHandler(host, plugins) || skipSchemeHandle;
+  const schemeHandler = resolveSchemeHandler(host, pluginsWithUrlScheme);
 
   try {
-    useSchemeHandler({ query, url, onFinish });
+    if (schemeHandler) {
+      schemeHandler({ query, url, onFinish });
+    } else {
+      onFinish((done) => {
+        log_warning(
+          `unable to resolve ${url}: No handler found for scheme ${host}`
+        );
+
+        done?.();
+      });
+    }
   } catch (e) {
     onFinish((done) => {
       log_warning(`unable to resolve ${url}: ${e.message}`);
@@ -58,11 +62,19 @@ export function useUrlSchemeHandler({
   }
 }
 
-export function handleActionSchemeUrl({ url }) {
+export function handleActionSchemeUrl({
+  url,
+  availablePlugins = appStore.get("plugins"),
+}) {
   const { host, query } = parseUrl(url);
-  const plugins = appStore.get("plugins");
 
-  const actionScheme = resolveSchemeHandler(host, plugins) || skipSchemeHandle;
+  const actionScheme = resolveSchemeHandler(host, availablePlugins);
+
+  if (!actionScheme) {
+    throw new Error(
+      `Non of the installed plugins knows how to handle this urlScheme ${url}`
+    );
+  }
 
   actionScheme({ query, url });
 }

package/App/DeepLinking/URLSchemeHandler/URLSchemeHandler.tsx

@@ -30,7 +30,10 @@ export function URLSchemeHandler({ url, onFinish }: Props) {
   useUrlSchemeHandler({ url, onFinish });
 
   return (
-    <View style={[viewStyles.container, { width, height, backgroundColor }]}>
+    <View
+      testID="URLSchemeHandler"
+      style={[viewStyles.container, { width, height, backgroundColor }]}
+    >
       <Spinner size="large" />
     </View>
   );

package/App/DeepLinking/URLSchemeHandler/__tests__/URLSchemeHandler.test.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { cleanup, render, waitFor } from "@testing-library/react-native";
+import { StyleSheet } from "react-native";
+import { cleanup } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const theme = {
   screen_margin_top: 0,
@@ -10,14 +12,6 @@ jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
 );
 
-jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
-  useTheme: jest.fn(() => theme),
-}));
-
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({})),
-}));
-
 const { URLSchemeHandler } = require("../URLSchemeHandler");
 const schemeHooks = require("../SchemeHandlerHooks/useUrlSchemeHandler");
 
@@ -36,12 +30,25 @@ describe("URLSchemeHandler", () => {
 
   afterEach(cleanup);
 
-  it("renders correctly and invokes the hook", async () => {
-    const wrapper = await waitFor(() =>
-      render(<URLSchemeHandler url={url} onFinish={onFinish} />)
+  it("renders correctly and invokes the hook", () => {
+    const wrapper = renderWithProviders(
+      <URLSchemeHandler url={url} onFinish={onFinish} />,
+      {},
+      theme
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByTestId("URLSchemeHandler")).toBeTruthy();
+
+    expect(
+      StyleSheet.flatten(wrapper.getByTestId("URLSchemeHandler").props.style)
+    ).toMatchObject({
+      alignItems: "center",
+      backgroundColor: "white",
+      flex: 1,
+      height: 1334,
+      justifyContent: "center",
+      width: 750,
+    });
 
     expect(hookSpy).toHaveBeenCalledWith(
       expect.objectContaining({ url, onFinish })

package/App/DeepLinking/URLSchemeListener/index.tsx

@@ -3,16 +3,15 @@ import React, { useCallback, useContext } from "react";
 import { URLSchemeHandler } from "../URLSchemeHandler";
 import { URLSchemeContext } from "./URLSchemeContextProvider";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 export function URLSchemeListener({ children }: { children: React.ReactNode }) {
   const { url, done } = useContext(URLSchemeContext);
 
   const navigator = useNavigation();
 
-  const { appState } = usePickFromState(["appState"]);
-
-  const appReady = appState?.appReady;
+  const appReady = useAppSelector(selectAppReady);
 
   const onFinish = useCallback(
     (callback) => {

package/App/NavigationProvider/Loader.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 
 import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { selectAppLaunched } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
   children: React.ReactChild;
@@ -21,9 +22,7 @@ const styles = StyleSheet.create({
 });
 
 export function Loader({ children }: Props) {
-  const {
-    appState: { appLaunched },
-  } = usePickFromState(["appState"]);
+  const appLaunched = useAppSelector(selectAppLaunched);
 
   const { currentRoute } = useNavigation();