Config Migrator

src/store/migrate.ts

@@ -0,0 +1,45 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export interface MigrationState {
+  [key: string]: any
+}
+
+interface Migrations {
+  [version: number]: (state: MigrationState) => MigrationState
+}
+
+export const migrations: Migrations = {
+  // Removes an existing function (deprecatedFunction)
+  13: (state) => {
+    const { deprecatedFunction, ...rest } = state
+    return {
+      ...rest
+      // Remove a deprecated function
+    }
+  },
+
+  // Removes an existing value (deprecatedValue) and repositions an existing value (existingValue) based on another value (anotherValue)
+  14: (state) => {
+    const { deprecatedValue, ...rest } = state
+    return {
+      ...rest,
+      existingValue: state.anotherValue + 1 // Change position of an existing value
+      // Remove a deprecated value
+    }
+  },
+
+  // Adds a new value (newValue) based on an existing value (existingValue). Also adds a new function (newFunction)
+  15: (state) => ({
+    ...state,
+    // Transformations for version 15
+    newValue: state.existingValue + 1, // Add new value based on existing value
+    // Add a new function
+    newFunction: () => console.log('New Function')
+  }),
+
+  16: (state) => ({ ...state }),
+  17: (state) => ({
+    ...state
+    // Add new state properties or transform existing ones
+  })
+}

src/store/useStore.ts

@@ -30,6 +30,8 @@ import storeVideo from './ui/storeVideo'
 import storeUIPersist from './ui-persist/storeUIpersist'
 import storeUIPersistActions from './ui-persist/storeUIpersistActions'
 import storeSongDectector from './ui/storeSongDectector'
+import { frontendConfig } from '../utils/helpers'
+import { migrations, MigrationState } from './migrate'
 
 const useStore = create(
   devtools(
@@ -73,6 +75,13 @@ const useStore = create(
       ),
       {
         name: 'ledfx-storage',
+        version: frontendConfig,
+        migrate: (persistedState, version) => {
+          if (version < frontendConfig) {
+            return migrations[frontendConfig](persistedState as MigrationState)
+          }
+          return persistedState
+        },
         partialize: (state) =>
           Object.fromEntries(
             Object.entries(state).filter(

src/utils/helpers.ts

@@ -3,7 +3,7 @@
 import { IMCell } from '../pages/Devices/EditVirtuals/EditMatrix/M.utils'
 
 export const drawerWidth = 240
-export const frontendConfig = 16
+export const frontendConfig = 17
 
 export const formatTime = (dura: number) => {
   let seconds: string | number
@@ -83,13 +83,11 @@ export const deleteFrontendConfig = (skipReload?: boolean) => {
 }
 
 export const initFrontendConfig = () => {
-  if (
-    parseInt(window.localStorage.getItem('ledfx-frontend') || '0', 10) >=
-    frontendConfig
-  ) {
+  const currentVersion = parseInt(window.localStorage.getItem('ledfx-frontend') || '0', 10)
+  if (currentVersion === frontendConfig) {
     return
   }
-  deleteFrontendConfig()
+
   window.localStorage.setItem('ledfx-frontend', `${frontendConfig}`)
 }