From 596d0bd268591628d21871b036d5b2388dd271ae Mon Sep 17 00:00:00 2001 From: Kshitij Pramod Ghongadi Date: Mon, 22 Apr 2024 16:13:14 +0530 Subject: [PATCH] TP-63936 | Bundle size reduction (#10476) --- App.tsx | 5 +- App/Container/Navi-Insurance/index.ts | 5 +- .../screen/InsuranceLandingPageScreen.tsx | 147 ---------- .../Navi-Insurance/screen/IntroScreen.tsx | 21 -- .../screen/MemberDetailsScreen.tsx | 274 ------------------ App/common/hooks/useSentryLogging.ts | 4 +- App/common/navigator/RnAppCreator.tsx | 19 +- App/common/screen/BaseScreen.tsx | 2 +- .../screen/screen-mappers/GIScreenMapper.tsx | 36 +-- .../FooterWithCardWidget.tsx | 5 +- .../SumInsuredWidget.tsx | 4 +- .../TitleSubtitleWithAssetWidget.tsx | 8 +- package.json | 4 +- 13 files changed, 31 insertions(+), 503 deletions(-) delete mode 100644 App/Container/Navi-Insurance/screen/InsuranceLandingPageScreen.tsx delete mode 100644 App/Container/Navi-Insurance/screen/IntroScreen.tsx delete mode 100644 App/Container/Navi-Insurance/screen/MemberDetailsScreen.tsx diff --git a/App.tsx b/App.tsx index bfb3d4d3f3..2a438ef8d7 100644 --- a/App.tsx +++ b/App.tsx @@ -1,4 +1,5 @@ -import * as Sentry from "@sentry/react-native"; + +import { init } from "@sentry/react-native"; import { Component } from "react"; import codePush from "react-native-code-push"; import { SentryConstants } from "./App/common/constants/SentryConstants"; @@ -10,7 +11,7 @@ import { setBuildConfigDetails, } from "./App/common/utilities/CacheUtils"; -Sentry.init({ +init({ dsn: SentryConstants.SENTRY_DSN, environment: SentryConstants.SENTRY_ENVIRONMENT_PRODUCTION, }); diff --git a/App/Container/Navi-Insurance/index.ts b/App/Container/Navi-Insurance/index.ts index c24465403c..0314258901 100644 --- a/App/Container/Navi-Insurance/index.ts +++ b/App/Container/Navi-Insurance/index.ts @@ -1,9 +1,6 @@ -import IntroScreen from "./screen/IntroScreen"; -import InsuranceLandingPageScreen from "./screen/InsuranceLandingPageScreen"; + import QuoteOfferScreen from "./screen/quote-offer-screen/QuoteOfferScreen"; export { - IntroScreen, - InsuranceLandingPageScreen, QuoteOfferScreen, }; diff --git a/App/Container/Navi-Insurance/screen/InsuranceLandingPageScreen.tsx b/App/Container/Navi-Insurance/screen/InsuranceLandingPageScreen.tsx deleted file mode 100644 index 134bc32db6..0000000000 --- a/App/Container/Navi-Insurance/screen/InsuranceLandingPageScreen.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { - Animated, - NativeScrollEvent, - NativeSyntheticEvent, - ScrollView, - View, - StyleSheet -} from "react-native"; -import { - BaseActionTypes, - GenericActionPayload, -} from "../../../common/actions/GenericAction"; -import { CtaData, CtaType } from "../../../common/interface"; -import { Widget } from "../../../common/interface/widgets/Widget"; -import { ScreenData } from "../../../common/interface/widgets/screenData/ScreenData"; -import { NativeDeeplinkNavigatorModule } from "../../../common/native-module/NativeModules"; -import Colors from "../../../../assets/colors/colors"; -import BaseWidget from "../../../../components/widgets/BaseWidget"; -import { ScreenActionTypes } from "../../../common/screen/ScreenActionTypes"; - -const InsuranceLandingPageScreen = ({ - ctaData, - screenData, - handleActions, -}: { - ctaData: CtaData; - screenData: ScreenData | null; - handleActions: (screenPayload?: GenericActionPayload) => void; -}) => { - const [scrollY, setScrollY] = useState(0); - - const handleScroll = (event: NativeSyntheticEvent) => { - setScrollY(event.nativeEvent.contentOffset.y); - }; - - const headerBackgroundColor = - scrollY > 84 ? Colors.aliceBlue : Colors.transparent; - - const handleClick = (cta?: CtaData) => { - if (!cta) return; // Handle case when cta is undefined or null - - try { - switch (cta.type) { - case CtaType.DEEP_LINK: - case CtaType.USE_ROOT_DEEPLINK_NAVIGATOR: - NativeDeeplinkNavigatorModule.navigateToNaviInsuranceDeeplinkNavigator( - JSON.stringify(cta) - ); - break; - default: - NativeDeeplinkNavigatorModule.navigateToNaviDeeplinkNavigator( - JSON.stringify(cta) - ); - break; - } - } catch (error) { - // #TODO: Handle the error gracefully using Sentry. - console.error("Error while navigating to deep link:", error); - } - }; - - useEffect(() => { - handleActions({ - baseActionType: BaseActionTypes.SCREEN_ACTION, - metaData: [ - { - actionType: ScreenActionTypes.FETCH_INSURANCE_QUOTE_PAGE_FROM_BACKEND, - }, - ], - }); - }, []); - - return ( - - - {getWidgetViews( - screenData?.screenWidgets?.headerWidgets, - handleActions, - handleClick - )} - - - {getWidgetViews( - screenData?.screenWidgets?.contentWidgets, - handleActions, - handleClick - )} - - - {getWidgetViews( - screenData?.screenWidgets?.footerWidgets, - handleActions, - handleClick - )} - - - ); -}; - -function getWidgetViews( - widgetList: Widget[] | undefined, - handleActions: (screenActionPayload?: GenericActionPayload) => void, - handleClick?: (ctaData: CtaData) => void -): React.JSX.Element { - return ( - - {widgetList?.map((widget, index) => { - return ( - - ); - })} - - ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: "column", - }, - header: { - alignItems: "stretch", - position: "absolute", - zIndex: 1, - }, - content: { - flexGrow: 1 - }, - footer: { - alignItems: "stretch" - }, -}); - -export default InsuranceLandingPageScreen; diff --git a/App/Container/Navi-Insurance/screen/IntroScreen.tsx b/App/Container/Navi-Insurance/screen/IntroScreen.tsx deleted file mode 100644 index 06c5cff9ed..0000000000 --- a/App/Container/Navi-Insurance/screen/IntroScreen.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useEffect } from "react"; -import { Text, View } from "react-native"; -import { getApplicationId } from "../../../../network/repo/GiApplicationRepo"; -import { CtaData } from "../../../common/interface"; - -const IntroScreen: React.FC<{ ctaData: CtaData }> = ({ ctaData }) => { - useEffect(() => { - getApplicationId().then( - (result) => - result.data - ); - }, []); - - return ( - - hello - - ); -}; - -export default IntroScreen; diff --git a/App/Container/Navi-Insurance/screen/MemberDetailsScreen.tsx b/App/Container/Navi-Insurance/screen/MemberDetailsScreen.tsx deleted file mode 100644 index 45a036432f..0000000000 --- a/App/Container/Navi-Insurance/screen/MemberDetailsScreen.tsx +++ /dev/null @@ -1,274 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { - View, - Text, - StyleSheet, - Dimensions, - ScrollView, - Pressable, - ToastAndroid, -} from "react-native"; -import { CtaData } from "../../../common/interface"; -import { - fillApplication, - getApplicationId, -} from "../../../../network/repo/GiApplicationRepo"; -import { GetWidgetView } from "../../../common/widgets/widgetResolver"; -import { CtaNavigator } from "../../../common/navigator/NavigationRouter"; -import { MemberDetailsRootObject } from "../../../common/interface/MemberDetailsResponse"; - -const { width } = Dimensions.get("window"); - -const MemberDetailScreen: React.FC<{ ctaData: CtaData }> = ({ ctaData }) => { - const [screenData, setScreenData] = useState< - MemberDetailsRootObject | undefined - >(); - const [dataFromChild, setDataFromChild] = useState([]); - const [isDataValid, setIsDataValid] = useState(true); - - useEffect(() => { - getApplicationId().then((result) => { - setScreenData(result.data); - }); - }, []); - - const sendDataToBackend = () => { - const widgetList = - screenData?.currentScreenDefinition?.screenData?.screenStructure?.content - ?.widgets; - if ( - isDataValid === true && - widgetList && - dataFromChild.length == (widgetList.length - 1) * 2 - ) { - fillApplication( - screenData?.applicationResponse?.applicationId || "", - dataFromChild - ).then((fillApplicationResponse) => { - const cta: CtaData = { - url: "react/member_selection", - }; - CtaNavigator.navigate(cta); - }); - } else { - ToastAndroid.show("Please fill all data", ToastAndroid.SHORT); - } - }; - - const checkValidity = (updatedData: any[]) => { - let isValid = true; - updatedData.map((item) => { - if ( - item.value === undefined || - item.value === null || - item.value === "" - ) { - isValid = false; - } - }); - setIsDataValid(isValid); - }; - - // Callback function to receive data from the child component - const handleDataFromChild = (index: number, data: any) => { - let updatedData: any[] = [...dataFromChild]; - let isPresent = false; - updatedData.map((oldData) => { - // if the key is present replace existing. - if (oldData.key === data.key) { - isPresent = true; - oldData.value = data.value; - if ( - oldData.value === undefined || - oldData.value === null || - oldData.value === "" - ) { - setIsDataValid(false); - } else { - checkValidity(updatedData); - } - } - }); - - if (!isPresent) { - updatedData = [...updatedData, data]; - } - - console.log(updatedData); - - // updatedData[index] = data; - setDataFromChild(updatedData); - console.log(); - }; - - useEffect(() => { - console.log("HLOGS", screenData); - }, [screenData]); - - const getScreenContent = () => { - return ( - - - {/* Content */} - - {screenData?.currentScreenDefinition?.screenData?.screenStructure?.content?.widgets.map( - (widget: Widget, index: number) => { - //setDataFromChild((prevData) => [...prevData, {}]) - return GetWidgetView.getWidget( - widget, - handleDataFromChild, - index - 1 - ); - } - )} - - - {/* Footer */} - {/* Green Tag */} - - - { - screenData?.currentScreenDefinition?.screenData?.screenStructure - ?.footer?.widgetData?.banner?.text - } - - - - - - { - screenData?.currentScreenDefinition?.screenData?.screenStructure - ?.footer?.widgetData?.leftTopUnstrikedText?.text - }{" "} - - { - screenData?.currentScreenDefinition?.screenData - ?.screenStructure?.footer?.widgetData?.leftTopStrikedText - ?.text - } - - - - - { - screenData?.currentScreenDefinition?.screenData?.screenStructure - ?.footer?.widgetData?.leftBottomText?.text - }{" "} - > - - - sendDataToBackend()} - > - - { - screenData?.currentScreenDefinition?.screenData?.screenStructure - ?.footer?.widgetData?.rightCta?.title?.text - } - - - - - ); - }; - - return {getScreenContent()}; -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: "#FAFAFA", - }, - content: { - flex: 1, - paddingVertical: 20, - }, - footer: { - elevation: 10, - backgroundColor: "#FFFFFF", - paddingHorizontal: 16, - paddingBottom: 32, - paddingTop: 20, - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", - }, - infoContainer: { - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - }, - infoTopText: { - fontSize: 18, - fontWeight: "500", - color: "#191919", - alignSelf: "flex-start", - }, - strikeOffText: { - fontSize: 14, - fontWeight: "500", - color: "#6B6B6B", - alignSelf: "flex-start", - textDecorationLine: "line-through", - }, - strikeOffSubText: { - fontSize: 14, - fontWeight: "500", - color: "#6B6B6B", - alignSelf: "flex-start", - textDecorationLine: "line-through", - }, - infoBottomText: { - fontSize: 12, - fontWeight: "bold", - color: "#1f002a", - marginTop: 4, - }, - buttonContainer: { - backgroundColor: "#1F002A", - height: 48, - width: 148, - borderRadius: 4, - justifyContent: "center", - alignItems: "center", - }, - buttonText: { - color: "white", - fontWeight: "bold", - }, - greenTag: { - elevation: 10, - backgroundColor: "#E7F8EE", - width: width, - height: 32, - justifyContent: "center", - paddingLeft: 16, - borderTopLeftRadius: 16, - borderTopRightRadius: 16, - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - }, - greenTagText: { - fontSize: 12, - color: "#22A940", - textAlign: "center", - fontWeight: "bold", - }, -}); - -export default MemberDetailScreen; diff --git a/App/common/hooks/useSentryLogging.ts b/App/common/hooks/useSentryLogging.ts index 891425df1f..f9651ac0e1 100644 --- a/App/common/hooks/useSentryLogging.ts +++ b/App/common/hooks/useSentryLogging.ts @@ -1,5 +1,5 @@ -import * as Sentry from "@sentry/react"; +import { captureException } from "@sentry/react-native"; export const logToSentry = (message: string) => { - Sentry.captureException(new Error(message)); + captureException(new Error(message)); }; \ No newline at end of file diff --git a/App/common/navigator/RnAppCreator.tsx b/App/common/navigator/RnAppCreator.tsx index 35368392dd..2022cb3ec0 100644 --- a/App/common/navigator/RnAppCreator.tsx +++ b/App/common/navigator/RnAppCreator.tsx @@ -1,21 +1,19 @@ -import IntroScreen from "../../Container/Navi-Insurance/screen/IntroScreen"; + +import { LogBox, StatusBar } from "react-native"; +import { ThemeProvider } from "../../../components/ThemeContext"; import { - BASE_SCREEN, - INSURANCE_LANDING_PAGE_SCREEN, - INTRO_SCREEN, + BASE_SCREEN } from "../constants/ScreenNameConstants"; import { CtaData } from "../interface"; -import { ThemeProvider } from "../../../components/ThemeContext"; -import { LogBox, StatusBar } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import { Provider } from "react-redux"; -import reduxStore from "../redux/store"; import { PersistGate } from "redux-persist/integration/react"; +import Colors from "../../../assets/colors/colors"; +import reduxStore from "../redux/store"; import BaseScreen from "../screen/BaseScreen"; import { navigationRef } from "./NavigationRouter"; -import Colors from "../../../assets/colors/colors"; LogBox.ignoreLogs(["Warning: ..."]); // Ignore log notification by message LogBox.ignoreAllLogs(); //Ignore all log notifications @@ -49,11 +47,6 @@ function getScreenStack(ctaData: CtaData) { gestureEnabled: false, }} > - ; case QUOTE_OFFER_SCREEN: case BUY_INSURANCE_SCREEN: return ( @@ -46,26 +40,8 @@ export const GIScreenMapper = { handleActions={handleActions} /> ); - case INSURANCE_LANDING_PAGE_SCREEN: - return ( - - ); default: { - let ctaDataa: CtaData = { - url: "react/insurance_landing_page", - screenKey: "insurance_lp_1", - }; - return ( - - ); + return ; } //default will be changed to cta handler through bridge } diff --git a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx index 115848463c..6f0684297c 100644 --- a/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx +++ b/components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx @@ -1,4 +1,5 @@ -import _ from "lodash"; + +import throttle from "lodash/throttle"; import React, { useCallback } from "react"; import { View, ViewStyle } from "react-native"; import { @@ -72,7 +73,7 @@ const FooterWithCardWidget = ({ }; const throttledHandleActions = useCallback( - _.throttle( + throttle( ({ action, actionEvent, diff --git a/components/widgets/sum-insured-carousel-widget/SumInsuredWidget.tsx b/components/widgets/sum-insured-carousel-widget/SumInsuredWidget.tsx index a0b3fcbf60..83d5f7989a 100644 --- a/components/widgets/sum-insured-carousel-widget/SumInsuredWidget.tsx +++ b/components/widgets/sum-insured-carousel-widget/SumInsuredWidget.tsx @@ -1,4 +1,4 @@ -import _ from "lodash"; +import debounce from "lodash/debounce"; import { useCallback, useEffect, useRef } from "react"; import { View, ViewStyle, useWindowDimensions } from "react-native"; import Animated, { @@ -121,7 +121,7 @@ const SumInsuredWidget = ({ // We can use this debounced function to make api calls on scroll const debouncedHandleActions = useCallback( - _.debounce((index: number) => handleActionApiCall(index), 1000), + debounce((index: number) => handleActionApiCall(index), 1000), [handleActions, handleActionApiCall] ); diff --git a/components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget.tsx b/components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget.tsx index 1d337a3970..a71925a694 100644 --- a/components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget.tsx +++ b/components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget.tsx @@ -1,6 +1,5 @@ -import _ from "lodash"; -import AnimatedLottieView from "lottie-react-native"; -import { useCallback, useEffect, useMemo, useRef } from "react"; + +import { useCallback, useMemo } from "react"; import { View, ViewStyle } from "react-native"; import { TouchableWithoutFeedback } from "react-native-gesture-handler"; import { GenericActionPayload } from "../../../App/common/actions/GenericAction"; @@ -10,6 +9,7 @@ import { StyledImage } from "../../StyledImage"; import { StyledLottie } from "../styled-lottie/StyledLottie"; import { StyledText } from "../styled-text/StyledText"; import styles from "./TitleSubtitleWithAssetWidgetStyle"; +import throttle from "lodash/throttle"; const TitleSubtitleWithAssetWidget = ({ widgetData, @@ -40,7 +40,7 @@ const TitleSubtitleWithAssetWidget = ({ }, [widgetData?.backgroundImage, widgetData?.backgroundLottie]); }; const throttledHandleActions = useCallback( - _.throttle(() => handleActions(null, widgetData?.action), 700, { + throttle(() => handleActions(null, widgetData?.action), 700, { leading: true, trailing: false, }), diff --git a/package.json b/package.json index b833d41810..abd50c51ce 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.2", "private": true, "scripts": { - "start": "yarn react-native start" + "start": "yarn react-native start", + "bundle-size": "yarn run react-native-bundle-visualizer --entry-file ./index.android.js" }, "dependencies": { "@babel/core": "^7.23.7", @@ -44,6 +45,7 @@ "@types/react": "^18.2.16", "@types/react-native": "^0.72.2", "@types/react-test-renderer": "^18.0.0", + "react-native-bundle-visualizer": "^2.2.0", "typescript": "^5.1.6" } }