virtual devices list - via API trial

Author: amanchopra1905

docs/emulator-simulator-avaiable-devices.md

@@ -0,0 +1,45 @@
+---
+id: emulator-simulator-avaiable-devices
+title: Emulator and Simulator Devices
+hide_title: false
+sidebar_label: Devices List - Emulator/Simulator
+description: List of devices available on Emulator and Simulator
+keywords:
+  - lambdatest
+  - emulator
+  - simulator
+  - devices
+url: https://www.lambdatest.com/support/docs/emulator-simulator-avaiable-devices/
+site_name: LambdaTest
+slug: emulator-simulator-avaiable-devices/
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import DeviceList from '@site/src/component/DeviceList'
+
+<script type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify({
+       "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [{
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://www.lambdatest.com"
+        },{
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Appium",
+          "item": "https://www.lambdatest.com/support/docs/"
+        },{
+          "@type": "ListItem",
+          "position": 3,
+          "name": "Virtual Devices List",
+          "item": "https://www.lambdatest.com/support/docs/emulator-simulator-avaiable-devices/"
+        }]
+      })
+    }}
+></script>
+
+<DeviceList />

sidebars.js

@@ -2413,16 +2413,9 @@ module.exports = {
       },
     },
     [
-      {
-        type: "doc",
-        label: "Emulator / Simulator",
-        id: "app-automation-app-sim",
-      },
-      {
-        type: "doc",
-        label: "Flutter",
-        id: "virtual-device-flutter-apps",
-      },
+      "app-automation-app-sim",
+      "virtual-device-flutter-apps",
+      "emulator-simulator-avaiable-devices"
     ],
   ],
 

src/component/DeviceList.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+
+const DeviceList = () => {
+    const [devices, setDevices] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const API_URL = 'https://mobile-api.lambdatest.com/mobile-automation/api/v1/capability/generator?isVirtualDevice=true';
+
+        fetch(API_URL)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to fetch devices');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Full API Response:', data);
+
+                // Extract Virtual Devices
+                const virtualDevices = data?.virtual?.brands || {};
+                console.log('Virtual Devices:', virtualDevices);
+
+                // Flatten the device arrays
+                const allVirtualDevices = Object.values(virtualDevices).flat();
+                console.log('All Virtual Devices:', allVirtualDevices);
+
+                // Set the devices state
+                setDevices(allVirtualDevices);
+                setLoading(false);
+            })
+            .catch(err => {
+                setError(err.message);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) {
+        return <p>Loading devices...</p>;
+    }
+
+    if (error) {
+        return <p>Error: {error}</p>;
+    }
+
+    if (!Array.isArray(devices) || devices.length === 0) {
+        return <p>No Virtual devices found. Please try again later.</p>;
+    }
+
+    return (
+        <div>
+            <h2>Compatible Android Devices</h2>
+            <ul>
+                {devices.map((device, index) => (
+                    <li key={index}>
+                        {device.name} - {device.version}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default DeviceList;