feat(example): add features and buttons implementation (#1280)

YoussefFouadd · web-flow · commit e4c8a60ac2f4 · 2024-10-16T15:36:39.000+03:00
Jira ID: RL-224
diff --git a/examples/default/src/navigation/HomeStack.tsx b/examples/default/src/navigation/HomeStack.tsx
@@ -26,6 +26,8 @@ import { TracesScreen } from '../screens/apm/TracesScreen';
 import { NetworkScreen } from '../screens/apm/NetworkScreen';
 import { FlowsScreen } from '../screens/apm/FlowsScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
+import { LegacyModeScreen } from '../screens/LegacyModeScreen';
+import { HttpScreen } from '../screens/apm/HttpScreen';
 
 export type HomeStackParamList = {
   Home: undefined;
@@ -45,6 +47,8 @@ export type HomeStackParamList = {
   LargeImageList: undefined;
   SessionReplay: undefined;
   BackAndForthScreen: BackAndForthScreenProp;
+  LegacyMode: undefined;
+  HttpScreen: undefined;
 
   // APM //
   APM: undefined;
@@ -132,6 +136,12 @@ export const HomeStackNavigator: React.FC = () => {
       <HomeStack.Screen name="NetworkTraces" component={NetworkScreen} />
       <HomeStack.Screen name="ExecutionTraces" component={TracesScreen} />
       <HomeStack.Screen name="AppFlows" component={FlowsScreen} />
+      <HomeStack.Screen
+        name="LegacyMode"
+        component={LegacyModeScreen}
+        options={{ title: 'LegacyMode' }}
+      />
+      <HomeStack.Screen name="HttpScreen" component={HttpScreen} options={{ title: 'HTTP' }} />
     </HomeStack.Navigator>
   );
 };
diff --git a/examples/default/src/screens/CrashReportingScreen.tsx b/examples/default/src/screens/CrashReportingScreen.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Alert, Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Alert, Platform, ScrollView, StyleSheet, Text, View, Switch } from 'react-native';
 
 import { CrashReporting, NonFatalErrorLevel } from 'instabug-reactnative';
 
@@ -12,6 +12,7 @@ import { VerticalListTile } from '../components/VerticalListTile';
 import { Button, VStack } from 'native-base';
 import { InputField } from '../components/InputField';
 import { Select } from '../components/Select';
+import { showNotification } from '../utils/showNotification';
 
 const styles = StyleSheet.create({
   inputWrapper: {
@@ -61,6 +62,7 @@ export const CrashReportingScreen: React.FC = () => {
       throw error;
     }
   }
+  const [isEnabled, setIsEnabled] = useState(false);
 
   const [userAttributeKey, setUserAttributeKey] = useState('');
   const [userAttributeValue, setUserAttributeValue] = useState('');
@@ -70,6 +72,12 @@ export const CrashReportingScreen: React.FC = () => {
     NonFatalErrorLevel.error,
   );
 
+  const toggleSwitch = (value: boolean) => {
+    setIsEnabled(value);
+    CrashReporting.setEnabled(value);
+    showNotification('Crash Reporting status', 'Crash Reporting enabled set to ' + value);
+  };
+
   function sendCrash() {
     try {
       const error = new Error(crashNameValue);
@@ -99,6 +107,8 @@ export const CrashReportingScreen: React.FC = () => {
 
   return (
     <Screen>
+      <Text>Crash Reporting Enabled:</Text>
+      <Switch onValueChange={toggleSwitch} value={isEnabled} />
       <ScrollView>
         <Section title="Non-Fatals">
           <ListTile
diff --git a/examples/default/src/screens/FeatureRequestsScreen.tsx b/examples/default/src/screens/FeatureRequestsScreen.tsx
@@ -1,13 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import { FeatureRequests } from 'instabug-reactnative';
+import { FeatureRequests, ActionType } from 'instabug-reactnative';
 
 import { ListTile } from '../components/ListTile';
+import { Text, Switch } from 'react-native';
+
 import { Screen } from '../components/Screen';
+import { showNotification } from '../utils/showNotification';
 
 export const FeatureRequestsScreen: React.FC = () => {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const toggleSwitch = (value: boolean) => {
+    setIsEnabled(value);
+
+    FeatureRequests.setEmailFieldRequired(value, ActionType.requestNewFeature);
+    showNotification('Email status', 'Email field required set to ' + value);
+  };
   return (
     <Screen>
+      <Text>Email field Required:</Text>
+      <Switch onValueChange={toggleSwitch} value={isEnabled} />
       <ListTile title="Show" onPress={() => FeatureRequests.show()} />
     </Screen>
   );
diff --git a/examples/default/src/screens/HomeScreen.tsx b/examples/default/src/screens/HomeScreen.tsx
@@ -19,6 +19,7 @@ export const HomeScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'Ho
       <ListTile title="User Steps" onPress={() => navigation.navigate('UserSteps')} />
       <ListTile title="APM" onPress={() => navigation.navigate('APM')} />
       <ListTile title="Session Replay" onPress={() => navigation.navigate('SessionReplay')} />
+      <ListTile title="Legacy Mode" onPress={() => navigation.navigate('LegacyMode')} />
     </Screen>
   );
 };
diff --git a/examples/default/src/screens/LegacyModeScreen.tsx b/examples/default/src/screens/LegacyModeScreen.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { ActivityIndicator } from 'react-native';
+import Instabug from 'instabug-reactnative';
+import { ListTile } from '../components/ListTile';
+import { Screen } from '../components/Screen';
+import { showNotification } from '../utils/showNotification';
+
+export const LegacyModeScreen: React.FC = () => {
+  const [loading, setLoading] = useState(false);
+
+  const addMultipleInstabugLogs = async (numberOfLogs: number) => {
+    setLoading(true);
+    try {
+      for (let i = 0; i < numberOfLogs; i++) {
+        Instabug.logDebug(`log ${i}`);
+      }
+      showNotification('Success', 'Succeeded');
+    } catch (error) {
+      showNotification('Error', 'Failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addMultipleUserEvents = async (numberOfLogs: number) => {
+    setLoading(true);
+    try {
+      for (let i = 0; i < numberOfLogs; i++) {
+        Instabug.logUserEvent(`test user event ${i}`);
+      }
+      showNotification('Success', 'Succeeded');
+    } catch (error) {
+      showNotification('Error', 'Failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addMultipleTags = async (numberOfLogs: number) => {
+    setLoading(true);
+    try {
+      for (let i = 0; i < numberOfLogs; i++) {
+        Instabug.appendTags([`test tag ${i}`]);
+      }
+      showNotification('Success', 'Succeeded');
+    } catch (error) {
+      showNotification('Error', 'Failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const addMultipleUserAttributes = async (numberOfLogs: number) => {
+    setLoading(true);
+    try {
+      for (let i = 0; i < numberOfLogs; i++) {
+        Instabug.setUserAttribute(`user${i}`, `user${i} value`);
+      }
+      showNotification('Success', 'Succeeded');
+    } catch (error) {
+      showNotification('Error', 'Failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Screen>
+      {loading && <ActivityIndicator size="large" color="#0000ff" />}
+
+      <ListTile
+        title="Attach 10 InstabugLogs at a time"
+        onPress={() => addMultipleInstabugLogs(10)}
+      />
+      <ListTile title="Attach 10 events at a time" onPress={() => addMultipleUserEvents(10)} />
+      <ListTile title="Attach 10 tags at a time" onPress={() => addMultipleTags(10)} />
+      <ListTile
+        title="Attach 10 user attributes at a time"
+        onPress={() => addMultipleUserAttributes(10)}
+      />
+    </Screen>
+  );
+};
diff --git a/examples/default/src/screens/SettingsScreen.tsx b/examples/default/src/screens/SettingsScreen.tsx
@@ -1,6 +1,12 @@
 import React, { useState } from 'react';
 
-import Instabug, { BugReporting, ColorTheme, InvocationEvent } from 'instabug-reactnative';
+import Instabug, {
+  BugReporting,
+  ColorTheme,
+  InvocationEvent,
+  Locale,
+  ReproStepsMode,
+} from 'instabug-reactnative';
 import { InputGroup, InputLeftAddon, useToast, VStack, Button } from 'native-base';
 
 import { ListTile } from '../components/ListTile';
@@ -193,6 +199,32 @@ export const SettingsScreen: React.FC = () => {
             onValueChange={Instabug.setColorTheme}
           />
         </ListTile>
+        <ListTile
+          title="Change Locale to Arabic"
+          onPress={() => {
+            Instabug.setLocale(Locale.arabic);
+          }}
+        />
+        <ListTile
+          title="Disable Repro Steps"
+          onPress={() => {
+            Instabug.setReproStepsConfig({
+              all: ReproStepsMode.disabled,
+            });
+          }}
+        />
+        <ListTile
+          title="Add Experiments"
+          onPress={() => {
+            Instabug.addExperiments(['exp1', 'exp2']);
+          }}
+        />
+        <ListTile
+          title="Remove Experiments"
+          onPress={() => {
+            Instabug.removeExperiments(['exp1', 'exp2']);
+          }}
+        />
 
         <VerticalListTile title="User Identification">
           <VStack>
diff --git a/examples/default/src/screens/apm/APMScreen.tsx b/examples/default/src/screens/apm/APMScreen.tsx
@@ -1,14 +1,28 @@
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { HomeStackParamList } from '../../navigation/HomeStack';
-import React from 'react';
+import React, { useState } from 'react';
 import { ListTile } from '../../components/ListTile';
 import { Screen } from '../../components/Screen';
+import { Text, Switch } from 'react-native';
+import { APM } from 'instabug-reactnative';
+import { showNotification } from '../../utils/showNotification';
 
 export const APMScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'APM'>> = ({
   navigation,
 }) => {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  const toggleSwitch = (value: boolean) => {
+    setIsEnabled(value);
+    APM.setEnabled(value);
+    showNotification('APM status', 'APM enabled set to ' + value);
+  };
+
   return (
     <Screen>
+      <Text>Enable APM:</Text>
+      <Switch onValueChange={toggleSwitch} value={isEnabled} />
+      <ListTile title="End App launch" onPress={() => APM.endAppLaunch()} />
       <ListTile title="Network Screen" onPress={() => navigation.navigate('NetworkTraces')} />
       <ListTile title="Traces" onPress={() => navigation.navigate('ExecutionTraces')} />
       <ListTile title="Flows" onPress={() => navigation.navigate('AppFlows')} />
diff --git a/examples/default/src/screens/apm/HttpScreen.tsx b/examples/default/src/screens/apm/HttpScreen.tsx
diff --git a/examples/default/src/screens/apm/NetworkScreen.tsx b/examples/default/src/screens/apm/NetworkScreen.tsx
diff --git a/examples/default/src/utils/showNotification.ts b/examples/default/src/utils/showNotification.ts
