varnitgoyal95/super-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

TP-63936 | Bundle size reduction (#10476)

Browse Source
This commit is contained in:
Kshitij Pramod Ghongadi
2024-04-22 16:13:14 +05:30
committed by GitHub
parent 23ed524626
commit 596d0bd268
13 changed files with 31 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
App.tsx
View File

@@ -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,
});

5
App/Container/Navi-Insurance/index.ts
View File

@@ -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,
};

147
App/Container/Navi-Insurance/screen/InsuranceLandingPageScreen.tsx
View File

@@ -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<NativeScrollEvent>) => {
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 (
<View style={[styles.container, screenData?.screenStyle]}>
<Animated.View
style={[styles.header, { backgroundColor: headerBackgroundColor }]}
>
{getWidgetViews(
screenData?.screenWidgets?.headerWidgets,
handleActions,
handleClick
)}
</Animated.View>
<ScrollView
contentContainerStyle={styles.content}
scrollEventThrottle={16}
onScroll={handleScroll}
>
{getWidgetViews(
screenData?.screenWidgets?.contentWidgets,
handleActions,
handleClick
)}
</ScrollView>
<View style={styles.footer}>
{getWidgetViews(
screenData?.screenWidgets?.footerWidgets,
handleActions,
handleClick
)}
</View>
</View>
);
};
function getWidgetViews(
widgetList: Widget[] | undefined,
handleActions: (screenActionPayload?: GenericActionPayload) => void,
handleClick?: (ctaData: CtaData) => void
): React.JSX.Element {
return (
<View>
{widgetList?.map((widget, index) => {
return (
<BaseWidget
widget={widget}
handleScreenActions={handleActions}
widgetIndex={index}
key={index}
handleClick={handleClick}
/>
);
})}
</View>
);
}
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;

21
App/Container/Navi-Insurance/screen/IntroScreen.tsx
View File

@@ -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 (
<View>
<Text>hello</Text>
</View>
);
};
export default IntroScreen;

274
App/Container/Navi-Insurance/screen/MemberDetailsScreen.tsx
View File

@@ -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 (
<View style={styles.container}>
<InsuranceHeaderSection
cardList={null}
setCardList={null}
itemRemovedCount={null}
setItemRemovedCount={null}
db={null}
/>
{/* Content */}
<ScrollView
style={styles.content}
contentContainerStyle={{
flexGrow: 1,
}}
keyboardShouldPersistTaps="handled"
>
{screenData?.currentScreenDefinition?.screenData?.screenStructure?.content?.widgets.map(
(widget: Widget, index: number) => {
//setDataFromChild((prevData) => [...prevData, {}])
return GetWidgetView.getWidget(
widget,
handleDataFromChild,
index - 1
);
}
)}
</ScrollView>
{/* Footer */}
{/* Green Tag */}
<View style={styles.greenTag}>
<Text style={styles.greenTagText}>
{
screenData?.currentScreenDefinition?.screenData?.screenStructure
?.footer?.widgetData?.banner?.text
}
</Text>
</View>
<View style={styles.footer}>
<View style={styles.infoContainer}>
<Text style={styles.infoTopText}>
{
screenData?.currentScreenDefinition?.screenData?.screenStructure
?.footer?.widgetData?.leftTopUnstrikedText?.text
}{" "}
<Text style={styles.strikeOffText}>
{
screenData?.currentScreenDefinition?.screenData
?.screenStructure?.footer?.widgetData?.leftTopStrikedText
?.text
}
</Text>
<Text style={styles.strikeOffSubText}></Text>
</Text>
<Text style={styles.infoBottomText}>
{
screenData?.currentScreenDefinition?.screenData?.screenStructure
?.footer?.widgetData?.leftBottomText?.text
}{" "}
&gt;
</Text>
</View>
<Pressable
android_ripple={{ color: "gray", borderless: false }}
style={styles.buttonContainer}
onPress={() => sendDataToBackend()}
>
<Text style={styles.buttonText}>
{
screenData?.currentScreenDefinition?.screenData?.screenStructure
?.footer?.widgetData?.rightCta?.title?.text
}
</Text>
</Pressable>
</View>
</View>
);
};
return <View style={styles.container}>{getScreenContent()}</View>;
};
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;

4
App/common/hooks/useSentryLogging.ts
View File

@@ -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));
};

19
App/common/navigator/RnAppCreator.tsx
View File

@@ -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,
}}
>
<Stack.Screen
name={INTRO_SCREEN}
component={IntroScreen}
initialParams={{ ctaData: ctaData }}
/>
<Stack.Screen
name={BASE_SCREEN}
component={BaseScreen}

2
App/common/screen/BaseScreen.tsx
View File

@@ -1,4 +1,4 @@
import { isEqual } from "lodash";
import isEqual from "lodash/isEqual";
import React, { useEffect, useMemo, useState } from "react";
import { View } from "react-native";
import { useDispatch, useSelector } from "react-redux";

36
App/common/screen/screen-mappers/GIScreenMapper.tsx
View File

@@ -1,22 +1,18 @@
import { View } from "react-native";
import {
IntroScreen,
InsuranceLandingPageScreen,
QuoteOfferScreen,
} from "../../../Container/Navi-Insurance";
import { getScreenNameFromCtaData } from "../../utilities/MiscUtils";
import QuoteApologyScreen from "../../../Container/Navi-Insurance/screen/quote-apology-screen/QuoteApologyScreen";
import { GenericActionPayload } from "../../actions/GenericAction";
import { CtaData } from "../../interface";
import { ScreenData } from "../../interface/widgets/screenData/ScreenData";
import {
INSURANCE_LANDING_PAGE_SCREEN,
INTRO_SCREEN,
QUOTE_OFFER_SCREEN,
BUY_INSURANCE_SCREEN,
QUOTE_APOLOGY_SCREEN,
QUOTE_OFFER_SCREEN
} from "../../constants/ScreenNameConstants";
import QuoteApologyScreen from "../../../Container/Navi-Insurance/screen/quote-apology-screen/QuoteApologyScreen";
import { logToSentry } from "../../hooks/useSentryLogging";
import { CtaData } from "../../interface";
import { ScreenData } from "../../interface/widgets/screenData/ScreenData";
import { getScreenNameFromCtaData } from "../../utilities/MiscUtils";
export const GIScreenMapper = {
getScreen(
@@ -27,8 +23,6 @@ export const GIScreenMapper = {
if (!!ctaData) {
const thirdIdentifier = getScreenNameFromCtaData(ctaData);
switch (thirdIdentifier) {
case INTRO_SCREEN:
return <IntroScreen ctaData={ctaData} />;
case QUOTE_OFFER_SCREEN:
case BUY_INSURANCE_SCREEN:
return (
@@ -46,26 +40,8 @@ export const GIScreenMapper = {
handleActions={handleActions}
/>
);
case INSURANCE_LANDING_PAGE_SCREEN:
return (
<InsuranceLandingPageScreen
ctaData={ctaData}
screenData={screenData}
handleActions={handleActions}
/>
);
default: {
let ctaDataa: CtaData = {
url: "react/insurance_landing_page",
screenKey: "insurance_lp_1",
};
return (
<InsuranceLandingPageScreen
ctaData={ctaDataa}
screenData={screenData}
handleActions={handleActions}
/>
);
return <View />;
}
//default will be changed to cta handler through bridge
}

5
components/widgets/footer-with-card-widget/FooterWithCardWidget.tsx
View File

@@ -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,

4
components/widgets/sum-insured-carousel-widget/SumInsuredWidget.tsx
View File

@@ -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]
);

8
components/widgets/title-subtitle-with-asset-widget/TitleSubtitleWithAssetWidget.tsx
View File

@@ -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,
}),

4
package.json
View File

@@ -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"
}
}