@livelike/react-native/lib/module/hooks/useWidgetInteractiveTimeout.js

LiveLike React Native package

import { getMilliseconds, SINGLE_INTERACTION_WIDGET_KINDS } from '@livelike/javascript';
import { useCallback, useMemo } from 'react';
import { widgetStore } from '../store';
import { WidgetUIPhase } from '../types';
import { useSelectedFieldStore } from './useSelectedFieldStore';
import { useWidgetActions } from './useWidgetActions';
import { useWidgetInteractions } from './useWidgetInteractions';
import { useWidgetKind } from './useWidgetKind';
import { useWidgetUIPhase } from './useWidgetUIPhase';
import { useIsTimelineWidget } from './useIsTimelineWidget';
/**
 * @description useWidgetInteractiveTimeout hook is to derive resulted interactiveTimeout based on
 * the passed interactiveTimeout value that in turns drives widget UI phases.
 * For example, once the widget timeouts, widget UI phase would transition from INTERACTIVE to TIMED_OUT
 * which would turn the widget into a non interact-able widget.
 * Resulted interactiveTimeout value is used by `LLWidgetHeader` component.
 * @since 0.1.0
 */
export const useWidgetInteractiveTimeout = _ref => {
  let {
    widgetId,
    interactiveTimeout: interactiveTimeoutProp,
    onInteractiveTimeout: onInteractiveTimeoutProp
  } = _ref;
  const {
    updateWidgetUIPhaseAction
  } = useWidgetActions({
    widgetId
  });
  const widgetUIPhase = useWidgetUIPhase({
    widgetId
  });
  const isTimelineWidget = useIsTimelineWidget({
    widgetId
  });
  const widgetInteractiveDuration = useSelectedFieldStore(widgetStore, () => {
    var _widgetStore$get$widg;
    return (_widgetStore$get$widg = widgetStore.get()[widgetId]) === null || _widgetStore$get$widg === void 0 || (_widgetStore$get$widg = _widgetStore$get$widg.widgetPayload) === null || _widgetStore$get$widg === void 0 ? void 0 : _widgetStore$get$widg.timeout;
  });
  const widgetKind = useWidgetKind({
    widgetId
  });
  const widgetInteractions = useWidgetInteractions({
    widgetId
  });
  const onInteractiveTimeout = useCallback(() => {
    updateWidgetUIPhaseAction({
      widgetId,
      widgetUIPhase: WidgetUIPhase.INTERACTIVE_TIMED_OUT
    });
    onInteractiveTimeoutProp === null || onInteractiveTimeoutProp === void 0 || onInteractiveTimeoutProp();
  }, [widgetId, onInteractiveTimeoutProp]);
  const interactiveTimeout = useMemo(() => {
    const isExpired = widgetUIPhase === WidgetUIPhase.EXPIRED;
    const isSubmitted = widgetUIPhase === WidgetUIPhase.SUBMITTED;
    const isFollowUpPublished = widgetUIPhase === WidgetUIPhase.FOLLOW_UP_PUBLISHED;
    const isInteractiveTimedOut = widgetUIPhase === WidgetUIPhase.INTERACTIVE_TIMED_OUT;
    if (isExpired || isInteractiveTimedOut) {
      return null;
    }
    if (isFollowUpPublished && !isTimelineWidget) {
      return null;
    }
    // set interactive timeout to null if widget interaction is already submitted
    // for single interaction widgets
    if (SINGLE_INTERACTION_WIDGET_KINDS.includes(widgetKind) && isSubmitted && !isTimelineWidget) {
      return null;
    }
    if (interactiveTimeoutProp !== undefined) {
      return interactiveTimeoutProp;
    }
    return widgetInteractiveDuration ? getMilliseconds(widgetInteractiveDuration) : null;
  }, [widgetUIPhase, interactiveTimeoutProp, widgetInteractiveDuration, widgetInteractions, isTimelineWidget]);
  return {
    interactiveTimeout,
    onInteractiveTimeout
  };
};
//# sourceMappingURL=useWidgetInteractiveTimeout.js.map