feat: add ID to presets

package-lock.json

@@ -25,6 +25,7 @@
         "react-hotkeys-hook": "3.2.1",
         "react-icons": "4.11.0",
         "react-wrap-balancer": "1.1.0",
+        "uuid": "10.0.0",
         "zustand": "4.4.3"
       },
       "devDependencies": {
@@ -4676,6 +4677,19 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/addon-actions/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@storybook/addon-backgrounds": {
       "version": "8.0.9",
       "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.0.9.tgz",
@@ -24725,10 +24739,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
+      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
-      "dev": true,
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"

package.json

@@ -40,6 +40,7 @@
     "react-hotkeys-hook": "3.2.1",
     "react-icons": "4.11.0",
     "react-wrap-balancer": "1.1.0",
+    "uuid": "10.0.0",
     "zustand": "4.4.3"
   },
   "devDependencies": {

src/stores/preset/index.ts

@@ -1,12 +1,14 @@
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import merge from 'deepmerge';
+import { v4 as uuid } from 'uuid';
 
 interface PresetStore {
   addPreset: (label: string, sounds: Record<string, number>) => void;
   changeName: (index: number, newName: string) => void;
   deletePreset: (index: number) => void;
   presets: Array<{
+    id: string;
     label: string;
     sounds: Record<string, number>;
   }>;
@@ -16,7 +18,7 @@ export const usePresetStore = create<PresetStore>()(
   persist(
     (set, get) => ({
       addPreset(label: string, sounds: Record<string, number>) {
-        set({ presets: [{ label, sounds }, ...get().presets] });
+        set({ presets: [{ id: uuid(), label, sounds }, ...get().presets] });
       },
 
       changeName(index: number, newName: string) {
@@ -37,16 +39,32 @@ export const usePresetStore = create<PresetStore>()(
     }),
     {
       merge: (persisted, current) =>
-        merge(
+        merge(current, persisted as Partial<PresetStore>),
-          current,
+
-          // @ts-ignore
+      migrate: (persistedState, version) => {
-          persisted,
+        const persisted = persistedState as Partial<PresetStore>;
-        ),
+
+        /**
+         * In version 0, presets didn't have an ID
+         */
+        if (version === 0) {
+          return {
+            ...persisted,
+            presets: (persisted.presets || []).map(preset => {
+              if (preset.id) return preset;
+              return { ...preset, id: uuid() };
+            }),
+          } as PresetStore;
+        }
+
+        return persisted as PresetStore;
+      },
+
       name: 'moodist-presets',
       partialize: state => ({ presets: state.presets }),
       skipHydration: true,
       storage: createJSONStorage(() => localStorage),
-      version: 0,
+      version: 1,
     },
   ),
 );