@applicaster/zapp-react-native-ui-components 13.0.9-alpha.9185626032 → 13.0.9-rc.1

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -17,9 +17,11 @@ import {
 
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import { subscribeForKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 import { isVerticalListOrGrid } from "./utils";
-import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
+import { useFilter } from "./utils/useFilter";
 
 type Props = {
   component: ZappUIComponent;
@@ -204,7 +206,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { pathname, screenData } = useRoute();
     const { plugins } = usePickFromState(["plugins"]);
 
     const screenContextData = useScreenContext();
@@ -286,6 +288,8 @@ export function zappPipesDataConnector(
       componentIndex
     );
 
+    const screenStateStore = useScreenStateStore();
+
     useEffect(() => {
       if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
         const addListener = getListenerFromPlugin(dataSourceUrl, plugins);
@@ -294,9 +298,14 @@ export function zappPipesDataConnector(
           return addListener(reloadData);
         }
       } else {
-        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
+        return subscribeForKeyChanges({
+          url: dataSourceUrl,
+          pathname,
+          screenStateStore,
+          callback: reloadData,
+        });
       }
-    }, [dataSourceUrl, reloadData]);
+    }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
 
     useEffect(() => {
       if (type === FAVORITES_TYPE && reloadData) {
@@ -316,12 +325,17 @@ export function zappPipesDataConnector(
       [staticFeed?.loading, staticFeed?.data, data?.next, loading, data]
     );
 
+    const applyItemFilter = useFilter({ url, loading, data, error }, component);
+
     const zappPipesDataProps = useMemo(() => {
       const loadNextData =
         !isLast && isVerticalListOrGrid(component) ? undefined : loadNext;
 
       return {
-        zappPipesData: applyItemLimit(getZappPipesData(), component),
+        zappPipesData: applyItemLimit(
+          applyItemFilter(getZappPipesData()),
+          component
+        ),
         reloadData,
         loadNextData,
       };
@@ -335,6 +349,7 @@ export function zappPipesDataConnector(
       data,
       isLast,
       component,
+      applyItemFilter,
     ]);
 
     useFeedRefresh({

package/Decorators/ZappPipesDataConnector/utils/useFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import { filterObjects } from "./mongoFilter";
 import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
@@ -15,7 +15,7 @@ import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactH
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
-const { log_error } = createLogger({
+const { log_debug, log_error } = createLogger({
   subsystem: "General",
   category: "UseFilter",
 });
@@ -33,27 +33,35 @@ export const useFilter: (
   const [inflatedFilter, setInflatedFilter] = React.useState(null);
   const screenResolvers = useScreenResolvers();
 
-  const rebuildFilter = useCallback(() => {
+  useEffect(() => {
     if (!filter) {
       setInflatedFilter(null);
 
       return;
     }
 
-    resolveObjectValues(filter, screenResolvers)
-      .then((resolvedFilter) => {
-        setInflatedFilter(resolvedFilter);
-      })
-      .catch((error) => {
-        log_error(`Error resolving filter values: ${error.message}`);
-        setInflatedFilter(null);
-      });
+    const atValues = extractAtValues(filter);
 
-    rebuildFilter();
+    log_debug("Extracted @ values from filter", { atValues });
+
+    if (!atValues.length) {
+      // no dynamic values - can apply right now
+      setInflatedFilter(filter);
+    } else {
+      const rebuildFilter = () =>
+        resolveObjectValues(filter, screenResolvers)
+          .then((resolvedFilter) => {
+            log_debug("Resolved filter values", { resolvedFilter });
+            setInflatedFilter(resolvedFilter);
+          })
+          .catch((error) => {
+            log_error(`Error resolving filter values: ${error.message}`);
+            setInflatedFilter(null);
+          });
 
-    const atValues = extractAtValues(filter);
+      rebuildFilter(); // have dynamic values - need to resolve before applying
 
-    if (atValues.length) {
+      // subscribe for future changes of dynamic values
       const screenSubscriptions: (() => void)[] = atValues
         .filter((data) => data.startsWith("screen/"))
         .map((data: string) => {
@@ -66,6 +74,8 @@ export const useFilter: (
           );
 
           const subscription = provider.getObservable().subscribe((value) => {
+            log_debug("Screen context value changed", { keyName, value });
+
             if (value !== undefined) {
               rebuildFilter();
             }
@@ -96,6 +106,8 @@ export const useFilter: (
     (zappPipesData: ZappPipesData) => {
       const { data } = zappPipesData;
 
+      log_debug("Applying filter to data", { filter, inflatedFilter });
+
       if (!data || !data.entry) {
         return zappPipesData;
       }
@@ -103,8 +115,19 @@ export const useFilter: (
       const noResultBehavior =
         data?.extensions?.filter?.no_result_behavior || "show_nothing";
 
-      if (data.extensions?.filter?.expression) {
-        setFilter(data.extensions.filter.expression);
+      const filterExpression = data?.extensions?.filter?.expression;
+
+      if (filterExpression) {
+        setFilter(filterExpression);
+
+        // if there is a filter, but it is not inflated yet,
+        // and the behavior is "show_nothing" - return no results
+        if (noResultBehavior === "show_nothing" && !inflatedFilter) {
+          return {
+            ...zappPipesData,
+            data: { ...data, entry: [] },
+          } as ZappPipesData;
+        }
       }
 
       if (!inflatedFilter) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.9-alpha.9185626032",
+  "version": "13.0.9-rc.1",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.9-alpha.9185626032",
-    "@applicaster/zapp-react-native-bridge": "13.0.9-alpha.9185626032",
-    "@applicaster/zapp-react-native-redux": "13.0.9-alpha.9185626032",
-    "@applicaster/zapp-react-native-utils": "13.0.9-alpha.9185626032",
+    "@applicaster/applicaster-types": "13.0.9-rc.1",
+    "@applicaster/zapp-react-native-bridge": "13.0.9-rc.1",
+    "@applicaster/zapp-react-native-redux": "13.0.9-rc.1",
+    "@applicaster/zapp-react-native-utils": "13.0.9-rc.1",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",