From db8d88affcf976fcb3dee3130be9f90ccd1b26d5 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Wed, 9 Aug 2023 21:41:57 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20deprecated=20zustand=20dep?= =?UTF-8?q?endencies?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/configs/default.json | 48 ------- .../Dashboard/Views/useEditModeStore.ts | 13 +- .../Dashboard/Wrappers/gridstack/store.tsx | 17 ++- src/config/store.ts | 129 +++++++++--------- .../zustands/usePackageAttributesStore.ts | 17 ++- 5 files changed, 94 insertions(+), 130 deletions(-) diff --git a/data/configs/default.json b/data/configs/default.json index a4941e684..a8770cd6c 100644 --- a/data/configs/default.json +++ b/data/configs/default.json @@ -360,54 +360,6 @@ } } } - }, - { - "id": "135b7adf-0616-481f-991e-a9035d66b924", - "type": "torrents-status", - "properties": { - "displayCompletedTorrents": true, - "displayStaleTorrents": true, - "labelFilterIsWhitelist": true, - "labelFilter": [] - }, - "area": { - "type": "wrapper", - "properties": { - "id": "default" - } - }, - "shape": { - "sm": { - "location": { - "x": 0, - "y": 0 - }, - "size": { - "width": 2, - "height": 2 - } - }, - "md": { - "location": { - "x": 0, - "y": 0 - }, - "size": { - "width": 2, - "height": 2 - } - }, - "lg": { - "location": { - "x": 0, - "y": 0 - }, - "size": { - "width": 2, - "height": 2 - } - } - } } ], "settings": { diff --git a/src/components/Dashboard/Views/useEditModeStore.ts b/src/components/Dashboard/Views/useEditModeStore.ts index 121c07e4c..c079b2464 100644 --- a/src/components/Dashboard/Views/useEditModeStore.ts +++ b/src/components/Dashboard/Views/useEditModeStore.ts @@ -1,11 +1,14 @@ -import { create } from 'zustand'; +import { createWithEqualityFn } from 'zustand/traditional'; interface EditModeState { enabled: boolean; toggleEditMode: () => void; } -export const useEditModeStore = create((set) => ({ - enabled: false, - toggleEditMode: () => set((state) => ({ enabled: !state.enabled })), -})); +export const useEditModeStore = createWithEqualityFn( + (set) => ({ + enabled: false, + toggleEditMode: () => set((state) => ({ enabled: !state.enabled })), + }), + Object.is +); diff --git a/src/components/Dashboard/Wrappers/gridstack/store.tsx b/src/components/Dashboard/Wrappers/gridstack/store.tsx index 583b579b4..4d6e041df 100644 --- a/src/components/Dashboard/Wrappers/gridstack/store.tsx +++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx @@ -1,14 +1,17 @@ -import { create } from 'zustand'; +import { createWithEqualityFn } from 'zustand/traditional'; import { useConfigContext } from '../../../../config/provider'; import { GridstackBreakpoints } from '../../../../constants/gridstack-breakpoints'; -export const useGridstackStore = create((set, get) => ({ - mainAreaWidth: null, - currentShapeSize: null, - setMainAreaWidth: (w: number) => - set((v) => ({ ...v, mainAreaWidth: w, currentShapeSize: getCurrentShapeSize(w) })), -})); +export const useGridstackStore = createWithEqualityFn( + (set, get) => ({ + mainAreaWidth: null, + currentShapeSize: null, + setMainAreaWidth: (w: number) => + set((v) => ({ ...v, mainAreaWidth: w, currentShapeSize: getCurrentShapeSize(w) })), + }), + Object.is +); interface GridstackStoreType { mainAreaWidth: null | number; diff --git a/src/config/store.ts b/src/config/store.ts index 6fa0611af..9267dbae2 100644 --- a/src/config/store.ts +++ b/src/config/store.ts @@ -1,74 +1,77 @@ -import { create } from 'zustand'; +import { createWithEqualityFn } from 'zustand/traditional'; import { trcpProxyClient } from '~/utils/api'; import { ConfigType } from '../types/config'; -export const useConfigStore = create((set, get) => ({ - configs: [], - initConfig: (name, config, increaseVersion) => { - set((old) => ({ - ...old, - configs: [ - ...old.configs.filter((x) => x.value.configProperties?.name !== name), - { increaseVersion, value: config }, - ], - })); - }, - addConfig: async (name: string, config: ConfigType) => { - set((old) => ({ - ...old, - configs: [ - ...old.configs.filter((x) => x.value.configProperties.name !== name), - { value: config, increaseVersion: () => {} }, - ], - })); - }, - removeConfig: (name: string) => { - set((old) => ({ - ...old, - configs: old.configs.filter((x) => x.value.configProperties.name !== name), - })); - }, - updateConfig: async ( - name, - updateCallback: (previous: ConfigType) => ConfigType, - shouldRegenerateGridstack = false, - shouldSaveConfigToFileSystem = false - ) => { - const { configs } = get(); - const currentConfig = configs.find((x) => x.value.configProperties.name === name); - if (!currentConfig) { - return; - } - // copies the value of currentConfig and creates a non reference object named previousConfig - const previousConfig: ConfigType = JSON.parse(JSON.stringify(currentConfig.value)); +export const useConfigStore = createWithEqualityFn( + (set, get) => ({ + configs: [], + initConfig: (name, config, increaseVersion) => { + set((old) => ({ + ...old, + configs: [ + ...old.configs.filter((x) => x.value.configProperties?.name !== name), + { increaseVersion, value: config }, + ], + })); + }, + addConfig: async (name: string, config: ConfigType) => { + set((old) => ({ + ...old, + configs: [ + ...old.configs.filter((x) => x.value.configProperties.name !== name), + { value: config, increaseVersion: () => {} }, + ], + })); + }, + removeConfig: (name: string) => { + set((old) => ({ + ...old, + configs: old.configs.filter((x) => x.value.configProperties.name !== name), + })); + }, + updateConfig: async ( + name, + updateCallback: (previous: ConfigType) => ConfigType, + shouldRegenerateGridstack = false, + shouldSaveConfigToFileSystem = false + ) => { + const { configs } = get(); + const currentConfig = configs.find((x) => x.value.configProperties.name === name); + if (!currentConfig) { + return; + } + // copies the value of currentConfig and creates a non reference object named previousConfig + const previousConfig: ConfigType = JSON.parse(JSON.stringify(currentConfig.value)); - const updatedConfig = updateCallback(currentConfig.value); + const updatedConfig = updateCallback(currentConfig.value); - set((old) => ({ - ...old, - configs: [ - ...old.configs.filter((x) => x.value.configProperties.name !== name), - { value: updatedConfig, increaseVersion: currentConfig.increaseVersion }, - ], - })); + set((old) => ({ + ...old, + configs: [ + ...old.configs.filter((x) => x.value.configProperties.name !== name), + { value: updatedConfig, increaseVersion: currentConfig.increaseVersion }, + ], + })); - if ( - (typeof shouldRegenerateGridstack === 'boolean' && shouldRegenerateGridstack) || - (typeof shouldRegenerateGridstack === 'function' && - shouldRegenerateGridstack(previousConfig, updatedConfig)) - ) { - currentConfig.increaseVersion(); - } + if ( + (typeof shouldRegenerateGridstack === 'boolean' && shouldRegenerateGridstack) || + (typeof shouldRegenerateGridstack === 'function' && + shouldRegenerateGridstack(previousConfig, updatedConfig)) + ) { + currentConfig.increaseVersion(); + } - if (shouldSaveConfigToFileSystem) { - trcpProxyClient.config.save.mutate({ - name, - config: updatedConfig, - }); - } - }, -})); + if (shouldSaveConfigToFileSystem) { + trcpProxyClient.config.save.mutate({ + name, + config: updatedConfig, + }); + } + }, + }), + Object.is +); interface UseConfigStoreType { configs: { increaseVersion: () => void; value: ConfigType }[]; diff --git a/src/tools/client/zustands/usePackageAttributesStore.ts b/src/tools/client/zustands/usePackageAttributesStore.ts index da8ff398d..cf1f0b17c 100644 --- a/src/tools/client/zustands/usePackageAttributesStore.ts +++ b/src/tools/client/zustands/usePackageAttributesStore.ts @@ -1,4 +1,4 @@ -import { create } from 'zustand'; +import { createWithEqualityFn } from 'zustand/traditional'; import { ServerSidePackageAttributesType } from '../../server/getPackageVersion'; @@ -7,9 +7,12 @@ interface PackageAttributesState { setInitialPackageAttributes: (attributes: ServerSidePackageAttributesType) => void; } -export const usePackageAttributesStore = create((set) => ({ - attributes: { packageVersion: undefined, environment: 'test', dependencies: {} }, - setInitialPackageAttributes(attributes) { - set((state) => ({ ...state, attributes })); - }, -})); +export const usePackageAttributesStore = createWithEqualityFn( + (set) => ({ + attributes: { packageVersion: undefined, environment: 'test', dependencies: {} }, + setInitialPackageAttributes(attributes) { + set((state) => ({ ...state, attributes })); + }, + }), + Object.is +);