chore: add different request types to APM -> NetworkScreen.tsx

Author: AndrewAminInstabug

examples/default/src/screens/apm/NetworkScreen.tsx

@@ -12,14 +12,17 @@ import axios from 'axios';
 export const NetworkScreen: React.FC = () => {
   const [endpointUrl, setEndpointUrl] = useState('');
   const { width, height } = useWindowDimensions();
-  const defaultRequestUrl = 'https://jsonplaceholder.typicode.com/posts/1';
+  const defaultRequestBaseUrl = 'https://jsonplaceholder.typicode.com/posts/';
+  const shortenLink = 'https://shorturl.at/3Ufj3';
+  const defaultRequestUrl = `${defaultRequestBaseUrl}1`;
+
   const imageUrls = [
     'https://fastly.picsum.photos/id/57/200/300.jpg?hmac=l908G1qVr4r7dP947-tak2mY8Vvic_vEYzCXUCKKskY',
     'https://fastly.picsum.photos/id/619/200/300.jpg?hmac=WqBGwlGjuY9RCdpzRaG9G-rc9Fi7TGUINX_-klAL2kA',
   ];
 
   async function sendRequestToUrl() {
-    let urlToSend = '';
+    let urlToSend: string;
 
     if (endpointUrl.trim() !== '') {
       urlToSend = endpointUrl;
@@ -47,7 +50,7 @@ export const NetworkScreen: React.FC = () => {
   }
 
   async function sendRequestToUrlUsingAxios() {
-    let urlToSend = '';
+    let urlToSend: string;
 
     if (endpointUrl.trim() !== '') {
       urlToSend = endpointUrl;
@@ -72,6 +75,26 @@ export const NetworkScreen: React.FC = () => {
     }
   }
 
+  async function sendRedirectRequestToUrl() {
+    try {
+      console.log('Sending request to: ', shortenLink);
+      const response = await fetch(shortenLink);
+      console.log('Received from: ', response.url);
+
+      // Format the JSON response for better logging
+      const data = await response.json();
+
+      // Format the JSON response for better logging
+      const formattedData = JSON.stringify(data, null, 2);
+
+      // Log the formatted response
+      console.log('Response:', formattedData);
+    } catch (error) {
+      // Handle errors appropriately
+      console.error('Error:', error);
+    }
+  }
+
   const fetchGraphQlData = async () => {
     const document = gql`
       query {
@@ -90,6 +113,40 @@ export const NetworkScreen: React.FC = () => {
 
   const { data, isError, isSuccess, isLoading, refetch } = useQuery('helloQuery', fetchGraphQlData);
 
+  function generateUrls(count: number = 10) {
+    const urls = [];
+    for (let i = 1; i <= count; i++) {
+      urls.push(defaultRequestBaseUrl + i);
+    }
+    return urls;
+  }
+
+  async function makeSequentialApiCalls(urls: string[]): Promise<any[]> {
+    // const fetchPromises = urls.map((url) => fetch(url).then((response) => response.json()));
+    const results: any[] = [];
+
+    try {
+      for (let i = 0; i < urls.length; i++) {
+        await fetch(urls[i]);
+        results.push(results[i]);
+      }
+      return results;
+    } catch (error) {
+      console.error('Error making parallel API calls:', error);
+      throw error;
+    }
+  }
+  async function makeParallelApiCalls(urls: string[]): Promise<any[]> {
+    const fetchPromises = urls.map((url) => fetch(url).then((response) => response.json()));
+
+    try {
+      return await Promise.all(fetchPromises);
+    } catch (error) {
+      console.error('Error making parallel API calls:', error);
+      throw error;
+    }
+  }
+
   return (
     <ScrollView>
       <Screen>
@@ -102,11 +159,29 @@ export const NetworkScreen: React.FC = () => {
               value={endpointUrl}
             />
             <CustomButton onPress={sendRequestToUrl} title="Send Request To Url" />
+            <CustomButton
+              onPress={sendRedirectRequestToUrl}
+              title="Send Redirection Request To Url"
+            />
             <CustomButton
               onPress={sendRequestToUrlUsingAxios}
               title="Send Request To Url Using Axios"
             />
 
+            <CustomButton
+              onPress={() => makeParallelApiCalls(generateUrls())}
+              title="Send Parallel Requests"
+            />
+            <CustomButton
+              onPress={() => makeSequentialApiCalls(generateUrls())}
+              title="Send Sequantail Requests"
+            />
+
+            <CustomButton
+              onPress={() => makeSequentialApiCalls(generateUrls())}
+              title="Send Sequantail Requests"
+            />
+
             <CustomButton onPress={() => refetch} title="Reload GraphQL" />
             <View>
               {isLoading && <Text>Loading...</Text>}