@applicaster/zapp-react-native-ui-components 14.0.0-rc.8 → 15.0.0-rc.1

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -1,25 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
-import React, { useEffect, useMemo } from "react";
-
-import * as R from "ramda";
-import { Platform } from "react-native";
-import Url from "url";
-import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import React from "react";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-  useFeedLoader,
-  useFeedRefresh,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
-
-import { isVerticalListOrGrid } from "./utils";
-import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
+import { ResolverSelector } from "./ResolverSelector";
+import { ComponentDataSourceContext } from "./types";
 
 type Props = {
   component: ZappUIComponent;
@@ -27,186 +14,16 @@ type Props = {
   riverId: string;
   getStaticComponentFeed?: GeneralContentScreenProps["getStaticComponentFeed"];
   componentIndex?: number;
-
   isScreenWrappedInContainer?: boolean;
   isLast?: boolean;
 };
 
-const FAVORITES_TYPE = "FAVOURITES";
-
-function getDataSourceUrl({
-  component,
-  feedUrl,
-  screenData,
-  entryContext,
-  searchContext,
-  screenContext,
-}): { dataSourceUrl: string | null; type: string | null } {
-  if (feedUrl) {
-    return { dataSourceUrl: feedUrl, type: null };
-  }
-
-  if (component.data) {
-    const {
-      data: { source, type, mapping },
-    } = component;
-
-    if (type === FAVORITES_TYPE) {
-      return { dataSourceUrl: source || FAVORITES_TYPE, type };
-    }
-
-    if (source) {
-      if (type === "APPLICASTER_COLLECTION" && !R.includes("://", source)) {
-        return {
-          dataSourceUrl: `applicaster://fetchData?type=${type}&collectionId=${source}`,
-          type,
-        };
-      }
-
-      if (type === "APPLICASTER_CATEGORY" && !R.includes("://", source)) {
-        return {
-          dataSourceUrl: `applicaster://fetchData?type=${type}&categoryId=${source}&platform=${Platform.OS}`,
-          type,
-        };
-      }
-
-      if (mapping) {
-        const contexts = {
-          entry: entryContext,
-          screen: screenContext || screenData,
-          search: getSearchContext(searchContext, mapping),
-        };
-
-        const dataSourceUrl = getInflatedDataSourceUrl({
-          source,
-          mapping,
-          contexts,
-        });
-
-        if (!dataSourceUrl) {
-          return { dataSourceUrl: null, type: null };
-        }
-
-        return { dataSourceUrl, type };
-      }
-
-      return { dataSourceUrl: source, type };
-    }
-  }
-
-  return { dataSourceUrl: null, type: null };
-}
-
-function applyItemLimit(zappPipesData, component) {
-  if (!zappPipesData || !zappPipesData.data) {
-    return zappPipesData;
-  }
-
-  const { data } = zappPipesData;
-
-  const {
-    rules: { item_limit },
-  } = component;
-
-  if (item_limit && data.entry && data.entry.length) {
-    return {
-      ...zappPipesData,
-      data: {
-        ...data,
-        entry: R.slice(
-          0,
-          Math.min(Number(item_limit), R.length(data.entry)),
-          data.entry
-        ),
-      },
-    };
-  }
-
-  return zappPipesData;
-}
-
-function getListenerFromPlugin(
-  dataSourceUrl: string,
-  plugins: QuickBrickPlugin[]
-): AddDataSourceListener | void {
-  const url = Url.parse(dataSourceUrl, false);
-
-  const addListener = R.compose(
-    R.path(["module", "addDataSourceListener"]),
-    R.find(R.propEq("identifier", url.host))
-  )(plugins);
-
-  return addListener;
-}
-
-const getMethodAndParams = (component) => {
-  const method: "get" | "post" = R.pathOr("get", ["data", "method"], component);
-
-  const bodyParams: Record<string, unknown> = R.pathOr(
-    {},
-    ["data", "bodyParams"],
-    component
-  );
-
-  return {
-    method,
-    bodyParams,
-  };
-};
-
-const generateStaticUrl = (component: ZappUIComponent) => {
-  const { id, position } = component || {};
-
-  return `static://component?id=${id}&position=${position}`;
-};
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case "SET_DATA":
-      return { ...state, data: action.payload, loading: false };
-    case "SET_ERROR":
-      return { ...state, error: action.payload, loading: false };
-    default:
-      return state;
-  }
-};
-
-const useGetStaticFeed = (getter, component, index) => {
-  const url = generateStaticUrl(component);
-
-  // refactor above 3 states to use reducer
-
-  const [{ loading, data, error }, dispatch] = React.useReducer(reducer, {
-    loading: true,
-    data: null,
-    error: null,
-  });
-
-  React.useEffect(() => {
-    const getData = async () => {
-      try {
-        const res = await getter({ index, component });
-        dispatch({ type: "SET_DATA", payload: res });
-      } catch (err) {
-        dispatch({ type: "SET_ERROR", payload: err });
-      }
-    };
-
-    if (getter) {
-      getData();
-    }
-  }, [getter, component, index]);
-
-  return { url, loading, data, error };
-};
-
 export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
     const { screenData } = useRoute();
     const { plugins } = usePickFromState(["plugins"]);
-
     const screenContextData = useScreenContext();
 
     const {
@@ -219,12 +36,8 @@ export function zappPipesDataConnector(
       isLast = false,
     } = props;
 
-    /**
-     * TODO: HACK for the tabs screen which needs to use 2 types of context.
-     * ui_components rendered above tabs selector need to use entryContext
-     * Screens rendered inside tabs selector need to use nested context.
-     * This hack works because ui_components are rendered using ComponentsMap which doesn't have riverId prop
-     **/
+    // Handle context determination
+    // HACK for the tabs screen which needs to use 2 types of context.
     const shouldUseNestedContext = isScreenWrappedInContainer && riverId;
 
     const entryContext =
@@ -240,108 +53,28 @@ export function zappPipesDataConnector(
 
     const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
 
-    const { dataSourceUrl, type } = useMemo(
-      () =>
-        getDataSourceUrl({
-          component,
-          feedUrl,
-          screenData,
-          entryContext,
-          searchContext,
-          screenContext,
-        }),
-      [
-        component.id,
-        feedUrl,
-        entryContext,
-        searchContext,
-        screenContext,
-        screenData.id,
-      ]
-    );
-
-    const shouldClearCache = useMemo(
-      () => Boolean(component?.rules?.clear_cache_on_reload),
-      [component?.id]
-    );
-
-    const pipesOptions = useMemo(
-      () => ({
-        clearCache: type === FAVORITES_TYPE,
-        loadLocalFavorites: type === FAVORITES_TYPE,
-        silentRefresh: !shouldClearCache,
-        ...getMethodAndParams(component),
-      }),
-      [type, shouldClearCache, component]
-    );
-
-    const { reloadData, loadNext, error, loading, url, data } = useFeedLoader({
-      feedUrl: dataSourceUrl ?? "",
-      pipesOptions,
-    });
-
-    const staticFeed = useGetStaticFeed(
-      getStaticComponentFeed,
+    // Prepare context for resolvers
+    const resolverProps: ComponentDataSourceContext = {
       component,
-      componentIndex
-    );
-
-    useEffect(() => {
-      if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
-        const addListener = getListenerFromPlugin(dataSourceUrl, plugins);
-
-        if (addListener) {
-          return addListener(reloadData);
-        }
-      } else {
-        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
-      }
-    }, [dataSourceUrl, reloadData]);
-
-    useEffect(() => {
-      if (type === FAVORITES_TYPE && reloadData) {
-        favoritesListener.on("FAVORITES_CHANGED", reloadData);
-
-        return () => {
-          favoritesListener.removeHandler("FAVORITES_CHANGED", reloadData);
-        };
-      }
-    }, [type]);
-
-    const getZappPipesData = React.useCallback(
-      () =>
-        getStaticComponentFeed && !url
-          ? staticFeed
-          : { error, loading, url, data },
-      [staticFeed?.loading, staticFeed?.data, data?.next, loading, data]
-    );
-
-    const zappPipesDataProps = useMemo(() => {
-      const loadNextData =
-        !isLast && isVerticalListOrGrid(component) ? undefined : loadNext;
-
-      return {
-        zappPipesData: applyItemLimit(getZappPipesData(), component),
-        reloadData,
-        loadNextData,
-      };
-    }, [
-      dataSourceUrl,
-      data?.next,
-      loading,
-      reloadData,
-      loadNext,
-      getZappPipesData,
-      data,
+      feedUrl,
+      getStaticComponentFeed,
+      componentIndex,
+      isScreenWrappedInContainer,
+      riverId,
       isLast,
-      component,
-    ]);
-
-    useFeedRefresh({
-      reloadData,
-      component,
-    });
+      entryContext,
+      screenContext,
+      searchContext,
+      screenData,
+      plugins,
+    };
 
-    return <Component {...props} {...zappPipesDataProps} />;
+    return (
+      <ResolverSelector {...resolverProps}>
+        {(zappPipesDataProps) => (
+          <Component {...props} {...zappPipesDataProps} />
+        )}
+      </ResolverSelector>
+    );
   };
 }

package/Decorators/ZappPipesDataConnector/resolvers/NullFeedResolver.tsx

@@ -0,0 +1,25 @@
+// NullFeedResolver.tsx
+import React, { useMemo } from "react";
+import { ZappPipesDataProps } from "../types";
+
+type NullFeedResolverProps = {
+  children: (dataProps: ZappPipesDataProps) => React.ReactNode;
+};
+
+export function NullFeedResolver({ children }: NullFeedResolverProps) {
+  const zappPipesDataProps = useMemo(
+    () => ({
+      zappPipesData: {
+        url: "",
+        loading: false,
+        data: null,
+        error: null,
+      },
+      reloadData: () => null,
+      loadNextData: undefined,
+    }),
+    []
+  );
+
+  return <>{children(zappPipesDataProps)}</>;
+}

package/Decorators/ZappPipesDataConnector/resolvers/StaticFeedResolver.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useMemo, useReducer } from "react";
+import { ComponentDataSourceContext, ZappPipesDataProps } from "../types";
+
+const generateStaticUrl = (component: ZappUIComponent) => {
+  const { id, position } = component || {};
+
+  return `static://component?id=${id}&position=${position}`;
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "SET_DATA":
+      return { ...state, data: action.payload, loading: false };
+    case "SET_ERROR":
+      return { ...state, error: action.payload, loading: false };
+    default:
+      return state;
+  }
+};
+
+type StaticFeedResolverProps = ComponentDataSourceContext & {
+  children: (dataProps: ZappPipesDataProps) => React.ReactNode;
+};
+
+export function StaticFeedResolver({
+  children,
+  getStaticComponentFeed,
+  component,
+  componentIndex,
+}: StaticFeedResolverProps) {
+  const url = generateStaticUrl(component);
+
+  const [{ loading, data, error }, dispatch] = useReducer(reducer, {
+    loading: true,
+    data: null,
+    error: null,
+  });
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const res = await getStaticComponentFeed({
+          index: componentIndex,
+          component,
+        });
+
+        dispatch({ type: "SET_DATA", payload: res });
+      } catch (err) {
+        dispatch({ type: "SET_ERROR", payload: err });
+      }
+    };
+
+    if (getStaticComponentFeed) {
+      getData();
+    }
+  }, [getStaticComponentFeed, component, componentIndex]);
+
+  const reloadData = async () => {
+    if (!getStaticComponentFeed) return Promise.resolve();
+
+    try {
+      const res = await getStaticComponentFeed({
+        index: componentIndex,
+        component,
+      });
+
+      dispatch({ type: "SET_DATA", payload: res });
+
+      return res;
+    } catch (err) {
+      dispatch({ type: "SET_ERROR", payload: err });
+
+      return Promise.reject(err);
+    }
+  };
+
+  const zappPipesDataProps = useMemo(
+    () => ({
+      zappPipesData: { url, loading, data, error },
+      reloadData,
+      loadNextData: undefined, // Static resolver doesn't support pagination
+    }),
+    [url, loading, data, error]
+  );
+
+  return <>{children(zappPipesDataProps)}</>;
+}