From ca4862c080bea337aecdc61bbc88b8fa96d95bc6 Mon Sep 17 00:00:00 2001
From: Filip Andrzej Kaminski <filip@Filips-MacBook-Pro.local>
Date: Fri, 5 Apr 2024 20:16:12 +0200
Subject: [PATCH] take the first avilable device

---
 .../src/webview/utilities/consts.ts           | 18 +++++++++------
 .../src/webview/views/CreateDeviceView.tsx    | 22 +++++++++---------
 .../src/webview/views/DevicesNotFoundView.tsx | 23 ++++++++++++++++---
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/packages/vscode-extension/src/webview/utilities/consts.ts b/packages/vscode-extension/src/webview/utilities/consts.ts
index bedccab05..551844ac8 100644
--- a/packages/vscode-extension/src/webview/utilities/consts.ts
+++ b/packages/vscode-extension/src/webview/utilities/consts.ts
@@ -8,11 +8,12 @@ import iphoneSE from "../../assets/iphone_SE/skin.webp";
 import iphoneSEmask from "../../assets/iphone_SE/mask.png";
 import { Platform } from "../../common/DeviceManager";
 
-export type SupportedDeviceName = keyof typeof SupportedDevices;
+export type SupportedDeviceName = typeof SupportedDevices[number]["name"];
 
 // iOS devices names should match supportedDeviceTypes inside the runtime
-export const SupportedDevices = {
-  "iPhone 15 Pro": {
+export const SupportedDevices = [
+  {
+    name: "iPhone 15 Pro",
     platform: Platform.IOS,
     screenWidth: 1179,
     screenHeight: 2556,
@@ -23,7 +24,8 @@ export const SupportedDevices = {
     frameImage: iphone15pro,
     maskImage: iphone15promask,
   },
-  "iPhone SE (3rd generation)": {
+  {
+    name: "iPhone SE (3rd generation)",
     platform: Platform.IOS,
     screenWidth: 750,
     screenHeight: 1334,
@@ -34,7 +36,8 @@ export const SupportedDevices = {
     frameImage: iphoneSE,
     maskImage: iphoneSEmask,
   },
-  "Google Pixel 7": {
+  {
+    name: "Google Pixel 7",
     platform: Platform.Android,
     screenWidth: 1080,
     screenHeight: 2400,
@@ -45,7 +48,8 @@ export const SupportedDevices = {
     frameImage: pixel7,
     maskImage: pixel7mask,
   },
-  "Google Pixel 6a": {
+  {
+    name: "Google Pixel 6a",
     platform: Platform.Android,
     screenWidth: 1080,
     screenHeight: 2400,
@@ -56,7 +60,7 @@ export const SupportedDevices = {
     frameImage: pixel6a,
     maskImage: pixel6amask,
   },
-};
+] as const;
 
 export type DeviceProperties = {
   name: string;
diff --git a/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx b/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx
index e71a22dbb..61261c5b4 100644
--- a/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx
+++ b/packages/vscode-extension/src/webview/views/CreateDeviceView.tsx
@@ -8,24 +8,24 @@ import { SupportedDeviceName, SupportedDevices } from "../utilities/consts";
 import { Platform } from "../../common/DeviceManager";
 
 function isSupportedIOSDevice(device: SupportedDeviceName): boolean {
-  return SupportedDevices[device].platform === Platform.IOS;
+  return (
+    SupportedDevices.find((sd) => {
+      return sd.name === device;
+    })?.platform === Platform.IOS
+  );
 }
 
 const SUPPORTED_DEVICES = [
   {
-    items: Object.entries(SupportedDevices)
-      .filter((item) => {
-        return item[1].platform === Platform.IOS;
-      })
-      .map((item) => ({ value: item[0], label: item[0] })),
+    items: SupportedDevices.filter((item) => {
+      return item.platform === Platform.IOS;
+    }).map((item) => ({ value: item.name, label: item.name })),
     label: "iOS",
   },
   {
-    items: Object.entries(SupportedDevices)
-      .filter((item) => {
-        return item[1].platform === Platform.Android;
-      })
-      .map((item) => ({ value: item[0], label: item[0] })),
+    items: SupportedDevices.filter((item) => {
+      return item.platform === Platform.Android;
+    }).map((item) => ({ value: item.name, label: item.name })),
     label: "Android",
   },
 ];
diff --git a/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx b/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx
index 548ba1138..7056918c0 100644
--- a/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx
+++ b/packages/vscode-extension/src/webview/views/DevicesNotFoundView.tsx
@@ -6,6 +6,8 @@ import CreateDeviceView from "./CreateDeviceView";
 import { useDevices } from "../providers/DevicesProvider";
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
 import { useState } from "react";
+import { SupportedDevices } from "../utilities/consts";
+import { Platform } from "../../common/DeviceManager";
 
 function DevicesNotFoundView() {
   const { openModal, closeModal } = useModal();
@@ -33,7 +35,12 @@ function DevicesNotFoundView() {
           newestAPIImage = image;
         }
       }
-      await deviceManager.createAndroidDevice("Google Pixel 7", newestAPIImage);
+      await deviceManager.createAndroidDevice(
+        SupportedDevices.find((sd) => {
+          return sd.platform === Platform.Android;
+        })!.name,
+        newestAPIImage
+      );
     } finally {
       setAndroidCreating(false);
     }
@@ -46,7 +53,13 @@ function DevicesNotFoundView() {
       for (const runtime of iOSRuntimes) {
         if (
           (newestRuntime === undefined || runtime.version > newestRuntime.version) &&
-          runtime.supportedDeviceTypes.find((dt) => dt.name === "iPhone 15 Pro")
+          runtime.supportedDeviceTypes.find(
+            (dt) =>
+              dt.name ===
+              SupportedDevices.find((sd) => {
+                return sd.platform === Platform.IOS;
+              })?.name
+          )
         ) {
           newestRuntime = runtime;
         }
@@ -56,7 +69,11 @@ function DevicesNotFoundView() {
         return;
       }
       const iOSDeviceType = newestRuntime.supportedDeviceTypes.find(
-        (dt) => dt.name === "iPhone 15 Pro"
+        (dt) =>
+          dt.name ===
+          SupportedDevices.find((sd) => {
+            return sd.platform === Platform.IOS;
+          })?.name
       );
       await deviceManager.createIOSDevice(iOSDeviceType!, newestRuntime);
     } finally {