super-app/App/common/screen/BaseScreen.tsx

import isEqual from "lodash/isEqual";
import React, { useEffect, useMemo, useState } from "react";
import { View } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { commonStyles } from "../../Container/Navi-Insurance/Styles";
import { ActionMetaData, GenericActionPayload } from "../actions/GenericAction";
import {
  AnalyticsEventNameConstants,
  BASE_SCREEN,
  EVENT_NAMES,
} from "../constants";
import { sendAsAnalyticsEvent } from "../hooks/useAnalyticsEvent";
import { useBottomSheet } from "../hooks/useBottomSheet";
import useScreenLoadTime from "../hooks/useScreenLoadTime";
import { CtaData } from "../interface";
import { ModalView } from "../interface/modals/ModalView";
import { ScreenData } from "../interface/widgets/screenData/ScreenData";
import { Router } from "../navigator/NavigationRouter";
import { updateCtaData } from "../redux/screens/screenActionCreators";
import { setCurrentScreenName } from "../utilities/AlfredUtils";
import {
  getScreenMapperNameFromCtaData,
  getScreenNameFromCtaData,
} from "../utilities/MiscUtils";
import { WidgetActionTypes } from "../widgets/widget-actions/WidgetActionTypes";
import { ScreenMapper } from "./screen-mappers/ScreenMapper";

const BaseScreen: React.FC<{ navigation: any; route: any }> = ({
  navigation,
  route,
}) => {
  const [screenData, setScreenData] = useState<ScreenData | null>(null);
  const [screenName, setScreenName] = useState<string | null>(null);
  const [moduleName, setModuleName] = useState<string | null>(null);
  const [screenState, setScreenState] = useState<ScreenState | null>(
    ScreenState.LOADING,
  );
  const [errorMetaData, setErrorMetaData] = useState<ActionMetaData[] | null>(
    null,
  );

  useEffect(() => {
    if (!screenData) {
      const screenInitialData: ScreenData = {
        screenState: ScreenState.LOADING,
      };
      setScreenData(screenInitialData);
    }
  }, [screenData]);

  useEffect(() => {
    if (!!getScreenNameFromCtaData(route.params?.ctaData)) {
      setScreenName(getScreenNameFromCtaData(route.params?.ctaData)!!);
      setModuleName(getScreenMapperNameFromCtaData(route.params?.ctaData)!!);
    }
  }, []);

  const { cta } = useSelector((state: any) => {
    const savedCta = state.screenReducer.ctaData;
    if (isEqual(savedCta, route.params.ctaData)) {
      return { cta: state.screenReducer.ctaData };
    }
    return { cta: route.params.ctaData };
  });

  const dispatch = useDispatch();
  useEffect(() => {
    const ctaData: CtaData = route.params.ctaData;
    if (!isEqual(cta, ctaData)) {
      dispatch(updateCtaData({ cta: ctaData, setScreenState: screenState }));
    }
  }, [route.params.ctaData, screenState]);

  useScreenLoadTime(screenName, moduleName, screenData?.screenState);

  const handleActions = (actionPayload?: GenericActionPayload) => {
    actionPayload?.metaData?.forEach(ActionMetaData => {
      if (!!ActionMetaData.analyticsEventProperties) {
        sendAsAnalyticsEvent(ActionMetaData.analyticsEventProperties);
      }
      if (ActionMetaData.actionType === WidgetActionTypes.OPEN_BOTTOM_SHEET) {
        addBottomSheet(ActionMetaData.data as ModalView);
      }
      if (
        ActionMetaData.actionType === WidgetActionTypes.REPLACE_BOTTOM_SHEET
      ) {
        replaceBottomSheet(ActionMetaData.data as ModalView);
      }
    });
    const updatedActionPayload: GenericActionPayload = {
      ...(actionPayload as GenericActionPayload),
      setScreenData,
      setScreenState,
      setErrorMetaData,
      ctaData: cta,
      screenData: { ...screenData },
    };
    if (!!actionPayload) {
      Router.handleAction(updatedActionPayload, navigation);
    } else {
      sendAsAnalyticsEvent({
        name: AnalyticsEventNameConstants.HI_RN_PAYLOAD_ERROR,
        properties: {
          screenName: BASE_SCREEN,
          errorType: EVENT_NAMES.ACTION_PAYLOAD_MISSING_ERROR,
          error: `${actionPayload}`,
          methodName: "handleActions",
        },
      });
    }
  };

  const { bottomsheet, addBottomSheet, replaceBottomSheet } =
    useBottomSheet(handleActions);

  const MemoizedScreenMapper = useMemo(() => {
    const secondIdentifier = getScreenMapperNameFromCtaData(cta);
    setCurrentScreenName(
      "RN_" + secondIdentifier?.toUpperCase() + "_" + screenName,
    );

    return (
      <View style={commonStyles.flex_1}>
        {ScreenMapper.getScreenMapper(cta, screenData, handleActions)}
      </View>
    );
  }, [cta, screenData]);

  return (
    <View style={commonStyles.flex_1}>
      {MemoizedScreenMapper}
      {bottomsheet.map((sheet, index) => (
        <React.Fragment key={`bottomSheet-${index}`}>{sheet}</React.Fragment>
      ))}
    </View>
  );
};

export enum ScreenState {
  LOADING,
  LOADED,
  ERROR,
  OVERLAY,
}

export default BaseScreen;