@applicaster/zapp-react-native-ui-components 16.0.0-rc.72 → 16.0.0-rc.73

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,22 +2,10 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import {
-  observeEntryState,
-  RegisteredActionValue,
-} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
-
-import { masterCellLogger } from "../logger";
 
 import Image from "./Image";
 type Props = {
   item: ZappEntry | ZappFeed;
-  /**
-   * Already resolved action value. Pass it when the caller took the action out
-   * of `uiActionsRegistry` (entry actions have no plugin context to look up),
-   * and this skips the `useActions` lookup entirely.
-   */
-  actionContext?: RegisteredActionValue;
   flavour?: "flavour_1" | "flavour_2";
   asset?: {
     props: {};
@@ -44,19 +32,6 @@ function isStringAsset(asset) {
   return typeof asset === "string" || Array.isArray(asset);
 }
 
-/**
- * `CellActionEntryState["asset"]` is either something `Image` can take (a URI,
- * or a per-flavour array) or a component to render. A plain object is neither -
- * a locale/state map reaches us that way - and handing one to JSX throws
- * "Element type is invalid", so it has to be recognised rather than assumed.
- */
-function isComponentAsset(asset): boolean {
-  return (
-    typeof asset === "function" ||
-    (typeof asset === "object" && asset !== null && "$$typeof" in asset)
-  );
-}
-
 function getAssetValue(asset, flavour, fallbackAsset = null) {
   if (!asset) {
     return null;
@@ -80,52 +55,26 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
 export const ActionButton = React.memo(function ActionButtonComponent(
   props: Props
 ) {
-  const {
-    item,
-    action,
-    asset,
-    flavour = "flavour_1",
-    cellUUID,
-    actionContext: providedActionContext,
-  } = props;
-
-  // Passing `undefined` makes `useActions` a no-op lookup instead of warning
-  // about a plugin that was never meant to be there. Callers are expected to
-  // either always or never provide the context for a given mounted button -
-  // `useActions` already branches on plugin presence internally, so a value
-  // that appears mid-life would change the hook count either way.
-  const lookedUpActionContext = useActions(
-    providedActionContext ? undefined : action?.identifier
-  );
-
-  const actionContext = providedActionContext ?? lookedUpActionContext;
+  const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
+  const actionContext = useActions(action?.identifier);
 
   // TODO: add subscription API for action availability
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
 
-  const [actionState, setActionState] = React.useState(() =>
-    actionDisabled ? null : actionContext?.initialEntryState?.(item)
+  // Note: in theory initialization is not needed anymore, we are using useEffect
+  const [actionState, setActionState] = React.useState(
+    actionDisabled || !actionContext
+      ? null
+      : actionContext.initialEntryState(item)
   );
 
-  // `observeEntryState` is the one way to follow an action's state: it uses the
-  // action's own stream when it has one, and otherwise builds an equivalent one
-  // from `initialEntryState` + `addListener`. Reading only the latter pair
-  // leaves stream-backed actions - playback speed, sleep timer - frozen at the
-  // value they had when the button mounted.
   useEffect(() => {
-    if (actionDisabled || !actionContext) {
-      return undefined;
+    if (!((actionDisabled || !actionContext) && actionState !== null)) {
+      setActionState(actionContext.initialEntryState(item));
     }
-
-    const subscription = observeEntryState(actionContext, item).subscribe(
-      setActionState
-    );
-
-    return () => subscription.unsubscribe();
-    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
-  }, [actionDisabled, item?.id, actionContext]);
+  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
@@ -133,30 +82,15 @@ export const ActionButton = React.memo(function ActionButtonComponent(
         setActionState(state);
       },
     });
-  }, [actionContext, item]);
-
-  // An asset that is present but of a shape nothing can render (a locale or
-  // state map, say) drops the button for good - unlike a missing asset, which
-  // is usually just state that has not loaded yet. Reported from an effect so
-  // it is said once per action/entry rather than on every render.
-  const unrenderableAsset =
-    Boolean(actionState?.asset) &&
-    !isStringAsset(actionState?.asset) &&
-    !isComponentAsset(actionState?.asset);
+  }, [actionState, actionContext?.state, item?.id]);
 
   useEffect(() => {
-    if (unrenderableAsset) {
-      masterCellLogger.warning({
-        message: `ActionButton: the asset of action "${action?.identifier}" is neither an image source nor a component - the button is not rendered`,
-        data: {
-          identifier: action?.identifier,
-          entryId: item?.id,
-          assetType: typeof actionState?.asset,
-        },
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext?.addListener(String(item.id), (state) => {
+        setActionState(state);
       });
     }
-    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
-  }, [unrenderableAsset, action?.identifier, item?.id]);
+  }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
   const AssetComponent = actionState?.asset;
@@ -164,22 +98,12 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   // Default state is not yet ready
   if (!AssetComponent) return null;
 
-  // Neither an image source nor a component - nothing renderable.
-  if (!isStringAsset(AssetComponent) && !isComponentAsset(AssetComponent)) {
-    return null;
-  }
-
   return (
     <TouchableOpacity
       activeOpacity={1}
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
-      accessibilityRole="button"
-      accessibilityLabel={
-        props?.accessibilityLabel ||
-        (typeof actionState?.label === "string" ? actionState.label : null) ||
-        `${item?.id}`
-      }
+      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}

package/Hooks/useEntryActionsExpander.ts

@@ -13,8 +13,6 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
 
-import { ZappPipesEntryContext } from "../Contexts";
-
 /**
  * Expands `entry.extensions.entry_action` into invokable actions, against the
  * screen this hook is called from.
@@ -33,12 +31,9 @@ export function useEntryActionsExpander(): (
 ) => RegisteredAction[] {
   const { pathname } = useRoute();
 
-  const { context: screenEntryContext } = React.useContext(
-    ZappPipesEntryContext.Context
-  );
-
+  const screenContext = useScreenContext();
   const screenData = useCurrentScreenData();
-  const screenState = useScreenContext()?.options;
+  const screenState = screenContext?.options;
   const screenStateStore = useScreenStateStore();
   const actionExecutor = React.useContext(ActionExecutorContext);
 
@@ -54,7 +49,10 @@ export function useEntryActionsExpander(): (
       screenState,
       screenRoute: pathname,
       screenStateStore,
-      screenEntry: screenEntryContext?.data,
+      // From the screen context, the way `useCellClick` builds the same bag.
+      // The ZappPipes entry context is a route-keyed map, so reading `.data`
+      // off it was always undefined.
+      screenEntry: screenContext?.entry,
     },
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.72",
+  "version": "16.0.0-rc.73",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.72",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.72",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.72",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.72",
+    "@applicaster/applicaster-types": "16.0.0-rc.73",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.73",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.73",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.73",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",