@livelike/react-native/lib/commonjs/hooks/useLoadTimelineWidgetEffect.js

LiveLike React Native package

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useLoadTimelineWidgetEffect = useLoadTimelineWidgetEffect;
var _javascript = require("@livelike/javascript");
var _react = require("react");
var _store = require("../store");
var _useApi = require("./useApi");
var _types = require("../types");
function useLoadTimelineWidgetEffect(_ref) {
  let {
    programId,
    mode
  } = _ref;
  const [moreWidgets, setMoreWidgets] = (0, _react.useState)(false);
  const nextIteratorRef = (0, _react.useRef)();
  const {
    onApi,
    isLoading,
    error,
    data
  } = (0, _useApi.useApi)(() => (0, _javascript.getPostedWidgets)({
    programId
  }).then(widgetsPayload => {
    if (!widgetsPayload.done) {
      setMoreWidgets(true);
      nextIteratorRef.current = widgetsPayload.next;
    }
    return widgetsPayload;
  }).then(getWidgetsDetails));
  (0, _react.useEffect)(() => {
    if (mode === _types.WidgetMode.POPUP) {
      _store.timelineWidgetStoreActions.updateTimelineWidgetStateAction({
        programId,
        widgetTimelineState: {
          widgets: []
        }
      });
      return;
    }
    onApi().then(apiData => updateWidgetsState(apiData, programId));
  }, [programId, mode]);
  (0, _react.useEffect)(() => {
    if (!data && mode === _types.WidgetMode.INTERACTIVE_TIMELINE) {
      return;
    }
    function onProgramListener(_ref2) {
      let {
        event,
        message
      } = _ref2;
      if (Object.values(_javascript.WidgetCreatedEvent).includes(event)) {
        const {
          id: widgetId,
          kind: widgetKind
        } = message;
        const widgetPayload = message;
        (_javascript.PREDICTION_FOLLOW_UP_WIDGET_KIND.includes(widgetKind) ? (0, _javascript.getWidgetInteractions)({
          widgetId,
          widgetKind,
          interactionUrl: widgetPayload.widget_interactions_url_template
        }) : Promise.resolve([])).then(widgetInteractions => {
          _store.widgetStoreActions.updateWidgetStateAction({
            widgetId,
            widgetState: {
              widgetPayload,
              widgetInteractions,
              widgetResultState: (0, _store.getWidgetResultState)({
                widgetPayload,
                widgetInteractions
              }),
              widgetUIPhase: (0, _store.getWidgeUIPhase)({
                widgetPayload,
                widgetInteractions
              }),
              selectedOptionIndex: (0, _store.getSelectedOptionIndex)({
                widgetPayload,
                widgetInteractions
              }),
              isTimelineWidget: true
            }
          });
          _store.timelineWidgetStoreActions.updateTimelineWidgetsAction({
            programId,
            widgets: [{
              widgetId,
              widgetKind
            }],
            prepend: true
          });
        });
      }
    }
    (0, _javascript.addProgramListener)({
      programId
    }, onProgramListener);
    return () => {
      (0, _javascript.removeProgramListener)({
        programId
      }, onProgramListener);
    };
  }, [data, programId, mode]);
  const onLoadMore = (0, _react.useCallback)(() => {
    if (nextIteratorRef.current) {
      return nextIteratorRef.current().then(res => {
        if (res.done) {
          setMoreWidgets(false);
          nextIteratorRef.current = null;
        }
        return res.value;
      }).then(getWidgetsDetails).then(widgetsData => updateWidgetsState(widgetsData, programId));
    }
  }, [nextIteratorRef.current, programId]);
  return {
    onApi,
    isLoading,
    error,
    data,
    onLoadMore: moreWidgets ? onLoadMore : null
  };
}
const getWidgetsDetails = widgetsPayload => {
  return Promise.all([(0, _javascript.getWidgetsInteractions)({
    interactionUrl: widgetsPayload.widget_interactions_url_template
  }), Promise.all(widgetsPayload.widgets.map(widget => (0, _javascript.getTargetedWidgetIdAndKind)({
    widget
  }))).then(widgetIdsAndKinds => getAllRewardTransasctions(widgetIdsAndKinds.map(_ref3 => {
    let {
      widgetId
    } = _ref3;
    return widgetId;
  })))]).then(_ref4 => {
    let [widgetInteractions, widgetRewards] = _ref4;
    return [widgetsPayload.widgets, widgetInteractions, widgetRewards];
  });
};
const updateWidgetsState = (_ref5, programId) => {
  let [widgets, widgetInteractions, widgetRewards] = _ref5;
  const {
    widgetRecords: widgetsPayloadRecord,
    followUpWidgetRecords
  } = getWidgetPayloadRecord(widgets);
  const widgetsInteractionsRecord = getWidgetsInteractionsRecord(widgetInteractions, followUpWidgetRecords);
  const widgetsRewardsRecord = getWidgetsRewardsRecord(widgetRewards, followUpWidgetRecords);
  // set individual widget state so that widget details are not reloaded
  // This is done to avoid sending multiple widget details request for every widget rendered
  // that would give same response.
  Object.keys(widgetsPayloadRecord).forEach(widgetId => {
    const widgetPayload = widgetsPayloadRecord[widgetId];
    const widgetInteractions = widgetsInteractionsRecord[widgetId] ?? [];
    _store.widgetStoreActions.updateWidgetStateAction({
      widgetId,
      widgetState: {
        widgetPayload,
        widgetInteractions,
        widgetRewards: widgetsRewardsRecord[widgetId],
        widgetResultState: (0, _store.getWidgetResultState)({
          widgetPayload,
          widgetInteractions
        }),
        widgetUIPhase: (0, _store.getWidgeUIPhase)({
          widgetPayload,
          widgetInteractions
        }),
        selectedOptionIndex: (0, _store.getSelectedOptionIndex)({
          widgetPayload,
          widgetInteractions
        }),
        isTimelineWidget: true
      }
    });
  });
  _store.timelineWidgetStoreActions.updateTimelineWidgetsAction({
    programId,
    widgets: widgets.map(_ref6 => {
      let {
        id: widgetId,
        kind: widgetKind
      } = _ref6;
      return {
        widgetId,
        widgetKind
      };
    })
  });
};

// get all reward transactions incase there are multiple pages of
// reward transactions
const getAllRewardTransasctions = async widgetIds => {
  const response = await (0, _javascript.getRewardTransactions)({
    widgetIds
  });
  let results = response.results;
  let done = response.done;
  while (!done) {
    const res = await response.next();
    results = results.concat(res.value.results);
    done = res.done;
  }
  return results;
};

// create a record of widgetId vs widgetpayload
function getWidgetPayloadRecord(widgets) {
  const followUpWidgetRecords = {};
  const widgetRecords = widgets.reduce((record, widgetPayload) => {
    record[widgetPayload.id] = widgetPayload;
    if (_javascript.PREDICTION_FOLLOW_UP_WIDGET_KIND.includes(widgetPayload.kind)) {
      followUpWidgetRecords[widgetPayload.id] = widgetPayload;
    }
    return record;
  }, {});
  return {
    widgetRecords,
    followUpWidgetRecords
  };
}

// create a record of widgetId vs widgetInteractions
function getWidgetsInteractionsRecord(widgetsInteractions, followUpWidgetRecords) {
  const record = {};
  for (const interactions of Object.values(widgetsInteractions)) {
    for (const interaction of interactions) {
      record[interaction.widget_id] = [...(record[interaction.widget_id] ?? []), interaction];
    }
  }

  // set followup widget interaction using its corresponding prediction widget id
  for (const predictionWidget of Object.values(followUpWidgetRecords)) {
    const widgetId = predictionWidget[_javascript.PREDICTION_WIDGET_ID_PROP[predictionWidget.kind]];
    if (widgetId && record[widgetId]) {
      record[predictionWidget.id] = record[widgetId];
    }
  }
  return record;
}

// create a record of widgetId vs widgetRewards
function getWidgetsRewardsRecord(widgetsRewards, followUpWidgetRecords) {
  const record = {};
  for (const reward of widgetsRewards) {
    record[reward.widget_id] = [...(record[reward.widget_id] ?? []), ...(0, _store.getWidgetRewardsFromRewardTransactions)([reward])];
  }

  // set followup widget rewards using its corresponding prediction widget id
  for (const predictionWidget of Object.values(followUpWidgetRecords)) {
    const widgetId = predictionWidget[_javascript.PREDICTION_WIDGET_ID_PROP[predictionWidget.kind]];
    if (widgetId && record[widgetId]) {
      record[predictionWidget.id] = record[widgetId];
    }
  }
  return record;
}
//# sourceMappingURL=useLoadTimelineWidgetEffect.js.map