@applicaster/zapp-react-native-ui-components 14.0.0-alpha.4517121861 → 14.0.0-alpha.4520122433

package/Decorators/ZappPipesDataConnector/utils/useFilter.tsx

@@ -0,0 +1,157 @@
+import React, { useCallback, useEffect } from "react";
+
+import { filterObjects } from "./mongoFilter";
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+
+import {
+  extractAtValues,
+  resolveObjectValues,
+} from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/contextResolver";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { ScreenSingleValueProvider } from "@applicaster/zapp-react-native-utils/storage/ScreenSingleValueProvider";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
+
+const { log_debug, log_error } = createLogger({
+  subsystem: "General",
+  category: "UseFilter",
+});
+
+export const useFilter: (
+  zappPipesData: ZappPipesData,
+  _component // In future filter will come from the component
+) => (zappPipesData: ZappPipesData) => ZappPipesData = (
+  zappPipesData: ZappPipesData,
+  _component
+) => {
+  const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
+  const [filter, setFilter] = React.useState(null);
+  const [inflatedFilter, setInflatedFilter] = React.useState(null);
+  const screenResolvers = useScreenResolvers();
+
+  useEffect(() => {
+    if (!filter) {
+      setInflatedFilter(null);
+
+      return;
+    }
+
+    const atValues = extractAtValues(filter);
+
+    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);
+          });
+
+      rebuildFilter(); // have dynamic values - need to resolve before applying
+
+      // subscribe for future changes of dynamic values
+      const screenSubscriptions: (() => void)[] = atValues
+        .filter((data) => data.startsWith("screen/"))
+        .map((data: string) => {
+          const keyName = data.replace("screen/", "");
+
+          const provider = ScreenSingleValueProvider.getProvider(
+            keyName,
+            pathname,
+            screenStateStore
+          );
+
+          const subscription = provider.getObservable().subscribe((value) => {
+            if (value !== undefined) {
+              rebuildFilter();
+            }
+          });
+
+          return () => subscription.unsubscribe();
+        });
+
+      const storageSubscriptions: (() => void)[] = atValues
+        .filter((data) => !data.startsWith("screen/"))
+        .flatMap((data: string) => {
+          const keyName = data.replace("ctx/", "");
+          const { namespace, key } = getNamespaceAndKey(keyName);
+
+          return [
+            localStorage.addListener({ key, namespace }, rebuildFilter),
+            sessionStorage.addListener({ key, namespace }, rebuildFilter),
+          ];
+        });
+
+      const subscriptions = [...screenSubscriptions, ...storageSubscriptions];
+
+      return () => subscriptions.forEach((listener) => listener());
+    }
+  }, [filter]);
+
+  const filterFunc = useCallback(
+    (zappPipesData: ZappPipesData) => {
+      const { data } = zappPipesData;
+
+      if (!data || !data.entry) {
+        return zappPipesData;
+      }
+
+      const noResultBehavior =
+        data?.extensions?.filter?.no_result_behavior || "show_nothing";
+
+      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) {
+        return zappPipesData;
+      }
+
+      log_debug("Applying filter to data", { filter, inflatedFilter });
+
+      const filteredEntries = filterObjects(data.entry, inflatedFilter);
+
+      if (!filteredEntries.length && noResultBehavior === "show_all") {
+        return zappPipesData;
+      }
+
+      return {
+        ...zappPipesData,
+        data: {
+          ...data,
+          entry: filteredEntries,
+        },
+      } as ZappPipesData;
+    },
+    [inflatedFilter, setFilter]
+  );
+
+  if (!zappPipesData || !zappPipesData.data) {
+    return (zappPipesData) => zappPipesData;
+  }
+
+  return filterFunc;
+};

package/events/index.ts

@@ -2,4 +2,7 @@ export enum QBUIComponentEvents {
   toggleGradient = "toggleGradient",
   topMenuBarTV_onFocus = "topMenuBarTV_onFocus",
   navigatorReplaceItem = "navigatorReplaceItem",
+  scrollVerticallyToInitialOffset = "scrollVerticallyToInitialOffset",
+  focusOnSelectedTab = "focusOnSelectedTab",
+  focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.4517121861",
+  "version": "14.0.0-alpha.4520122433",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,14 +27,11 @@
     "url": "https://github.com/applicaster/quickbrick/issues"
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
-  "devDependencies": {
-    "redux-mock-store": "^1.5.3"
-  },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.4517121861",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4517121861",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4517121861",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4517121861",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4520122433",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4520122433",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4520122433",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4520122433",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
@@ -42,10 +39,8 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "immer": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",
     "validate-color": "*",

package/Components/River/__tests__/__snapshots__/river.test.js.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`When River has a general_content type renders River component correctly 1`] = `
-<View
-  onLayout={[Function]}
-  style={
-    {
-      "flex": 1,
-    }
-  }
-  testID="on-layout-view"
->
-  <View
-    style={
-      {
-        "display": "none",
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      screenId="A1234"
-      testID="general-content-screen"
-    />
-  </View>
-</View>
-`;

package/Components/VideoModal/hooks/useBackgroundColor.ts

@@ -1,10 +0,0 @@
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useConfiguration } from "../utils";
-
-export const useBackgroundColor = (): string => {
-  const { modal_background_color: modalBackgroundColor } = useConfiguration();
-
-  const theme = useTheme<BaseThemePropertiesMobile>();
-
-  return modalBackgroundColor || theme?.status_background_color;
-};