@applicaster/zapp-react-native-utils 14.0.1 → 14.0.2-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.1",
+  "version": "14.0.2-rc.0",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.1",
+    "@applicaster/applicaster-types": "14.0.2-rc.0",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/feed/__tests__/{useInflatedUrl.test.ts → useInflatedUrl.test.tsx}

@@ -1,3 +1,34 @@
+import React from "react";
+
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useGetUrlInflater,
+} from "../useInflatedUrl";
+
+import { reactHooksLogger } from "../../logger";
+
+jest.mock("../../navigation", () => ({
+  useRoute: () => ({ pathname: "/mock/path" }),
+}));
+
+// mock contexts hooks
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: {
+    useZappPipesContext: () => [
+      { id: "entry-1", extensions: { showId: "A123" } },
+    ],
+  },
+  ZappPipesSearchContext: {
+    useZappPipesContext: () => ["user%20query"],
+  },
+  ZappPipesScreenContext: {
+    useZappPipesContext: () => [{ id: "screen-1" }],
+  },
+}));
+
 jest.mock("../../logger", () => ({
   reactHooksLogger: {
     warning: jest.fn(),
@@ -5,13 +36,6 @@ jest.mock("../../logger", () => ({
   },
 }));
 
-const {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} = require("../useInflatedUrl");
-
-const { reactHooksLogger } = require("../../logger");
-
 let mockStore;
 
 describe("getInflatedDataSourceUrl", () => {
@@ -188,3 +212,34 @@ describe("getSearchContext", () => {
     expect(result).toHaveProperty(mapping.queryParam.property, searchContext);
   });
 });
+
+describe("useGetUrlInflater", () => {
+  const { renderHook } = require("@testing-library/react-hooks");
+
+  it("returns original url when mapping is not provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: WrappedWithProviders,
+    });
+
+    const src = "https://foo.com/feed";
+    expect(result.current(src)).toBe(src);
+  });
+
+  it("inflates url using entry/search/screen contexts when mapping provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders>{children}</WrappedWithProviders>
+      ),
+    });
+
+    const source = "https://foo.com/shows/{{showId}}?q={{q}}";
+
+    const mapping = {
+      showId: { source: "entry", property: "extensions.showId" },
+      q: { source: "search", property: "q" },
+    };
+
+    const url = result.current(source, mapping);
+    expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
+  });
+});

package/reactHooks/feed/useInflatedUrl.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import * as R from "ramda";
 
 import {
@@ -169,7 +169,7 @@ const encodeIfNeeded: (string) => string = R.tryCatch(
 
 export function getSearchContext(
   searchContext: string,
-  mapping: ZappTypeMapping
+  mapping: Nullable<ZappTypeMapping>
 ) {
   if (!mapping) {
     return {};
@@ -183,31 +183,57 @@ export function getSearchContext(
   return { [property]: encodeIfNeeded(searchContext) };
 }
 
-export function useInflatedUrl({
-  feedUrl,
-  mapping,
-}: {
-  feedUrl?: string;
-  mapping?: ZappTypeMapping;
-}) {
+/**
+ * Hook returns a function that replace placeholders with context values
+ * @returns function that inflates urls based on contexts
+ */
+export const useGetUrlInflater = () => {
   const { pathname } = useRoute();
 
   const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const url = useMemo(
-    () =>
-      getInflatedDataSourceUrl({
+  const entryContextRef = useRef(entryContext);
+  entryContextRef.current = entryContext;
+
+  const screenContextRef = useRef(screenContext);
+  screenContextRef.current = screenContext;
+
+  const searchContextRef = useRef(searchContext);
+  searchContextRef.current = searchContext;
+
+  return useCallback(
+    (
+      feedUrl: Nullable<string>,
+      mapping?: Nullable<ZappTypeMapping>
+    ): Nullable<string> => {
+      return getInflatedDataSourceUrl({
         source: feedUrl,
         contexts: {
-          entry: entryContext,
-          screen: screenContext,
-          search: getSearchContext(searchContext, mapping),
+          entry: entryContextRef.current,
+          screen: screenContextRef.current,
+          search: getSearchContext(searchContextRef.current, mapping),
         },
         mapping,
-      }),
-    [entryContext, feedUrl, mapping, screenContext, searchContext]
+      });
+    },
+    []
+  );
+};
+
+export function useInflatedUrl({
+  feedUrl,
+  mapping,
+}: {
+  feedUrl?: string;
+  mapping?: ZappTypeMapping;
+}) {
+  const urlInflater = useGetUrlInflater();
+
+  const url = useMemo(
+    () => urlInflater(feedUrl, mapping),
+    [urlInflater, feedUrl, mapping]
   );
 
   return url;

package/reactHooks/navigation/index.ts

@@ -86,6 +86,10 @@ export function isNavBarVisible(
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;
 
+    if (module === undefined) {
+      return showNavBar;
+    }
+
     if (module?.presentFullScreen) {
       return false;
     }