Migrated device manager to work with device id instead of name

desktop-app/package.json

@@ -285,7 +285,8 @@
     "patterns": [
       "!**/**",
       "src/main/**/*",
-      "src/store/**/*"
+      "src/store/**/*",
+      "src/common/**/*"
     ],
     "logLevel": "quiet"
   }

desktop-app/src/renderer/components/DeviceManager/index.tsx

@@ -8,7 +8,7 @@ import {
   setDevices,
 } from 'renderer/store/features/device-manager';
 import { APP_VIEWS, setAppView } from 'renderer/store/features/ui';
-import defaultDevices, { Device } from 'common/deviceList';
+import { defaultDevices, Device } from 'common/deviceList';
 
 import Button from '../Button';
 import DeviceLabel, { DND_TYPE } from './DeviceLabel';

desktop-app/src/renderer/store/features/device-manager/index.ts

@@ -2,12 +2,12 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { getDevicesMap, Device } from 'common/deviceList';
 import type { RootState } from '../..';
 
-const activeDeviceNames: string[] = window.electron.store.get(
+const activeDeviceIds: string[] = window.electron.store.get(
   'deviceManager.activeDevices'
 );
 
-const DEFAULT_DEVICES: Device[] = activeDeviceNames.map(
-  (name) => getDevicesMap()[name]
+const DEFAULT_DEVICES: Device[] = activeDeviceIds.map(
+  (id) => getDevicesMap()[id]
 );
 
 export interface DeviceManagerState {
@@ -26,7 +26,7 @@ export const deviceManagerSlice = createSlice({
       state.devices = action.payload;
       window.electron.store.set(
         'deviceManager.activeDevices',
-        action.payload.map((device) => device.name)
+        action.payload.map((device) => device.id)
       );
     },
   },

desktop-app/src/store/index.ts

@@ -1,4 +1,5 @@
 import { DOCK_POSITION, PREVIEW_LAYOUTS } from '../common/constants';
+import { migrations } from './migrations';
 
 const Store = require('electron-store');
 
@@ -44,13 +45,16 @@ const schema = {
         items: {
           type: 'string',
         },
-        default: ['iPhone 12 Pro', 'iPad', 'Macbook Pro'],
+        default: ['10008', '10013', '10015'],
       },
       customDevices: {
         type: 'array',
         items: {
           type: 'object',
           properties: {
+            id: {
+              type: 'string',
+            },
             name: {
               type: 'string',
             },
@@ -158,8 +162,8 @@ const schema = {
     },
     default: [],
   },
-};
+} as const;
 
-const store = new Store({ schema, watch: true });
+const store = new Store({ schema, watch: true, migrations });
 
 export default store;

desktop-app/src/store/migrations.ts

@@ -0,0 +1,41 @@
+import Store from 'electron-store';
+import { randomUUID } from 'crypto';
+
+import { defaultDevices, Device } from '../common/deviceList';
+
+export const migrations = {
+  '1.2.0': (store: Store) => {
+    try {
+      // eslint-disable-next-line no-console
+      console.log('Migrating from 1.0.1', store.get('deviceManager'));
+      const previousActiveDevices: string[] = store.get(
+        'deviceManager.activeDevices'
+      ) as string[];
+      const previousCustomDevices: Device[] = store.get(
+        'deviceManager.customDevices'
+      ) as Device[];
+      const newActiveDevices = previousActiveDevices
+        .map((name) => {
+          return defaultDevices.find((device) => device.name === name)?.id;
+        })
+        .filter(Boolean);
+
+      const newCustomDevices: Device[] = previousCustomDevices.map((device) => {
+        const newDevice = {
+          ...device,
+          id: randomUUID(),
+        };
+        return newDevice;
+      });
+
+      store.set('deviceManager.activeDevices', newActiveDevices);
+      store.set('deviceManager.customDevices', newCustomDevices);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('Migration failed', e);
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.log('Migration successful', store.get('deviceManager'));
+  },
+};