From e3795dc74ea10b8c0e34038a3bbcb3971528c9ea Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Fri, 17 Nov 2023 18:06:36 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=97=91=EF=B8=8F=20Remove=20most=20of=20co?= =?UTF-8?q?nfig=20context=20and=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config/init.ts | 20 ---------- src/config/provider.tsx | 43 +------------------- src/config/store.ts | 88 ----------------------------------------- src/pages/_app.tsx | 11 ++---- 4 files changed, 5 insertions(+), 157 deletions(-) delete mode 100644 src/config/init.ts delete mode 100644 src/config/store.ts diff --git a/src/config/init.ts b/src/config/init.ts deleted file mode 100644 index b7df29bee..000000000 --- a/src/config/init.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useEffect } from 'react'; -import { ConfigType } from '~/types/config'; - -import { useConfigContext } from './provider'; -import { useConfigStore } from './store'; - -export const useInitConfig = (initialConfig: ConfigType) => { - const { setConfigName, increaseVersion } = useConfigContext(); - const configName = initialConfig.configProperties?.name ?? 'default'; - const initConfig = useConfigStore((x) => x.initConfig); - const removeConfig = useConfigStore((x) => x.removeConfig); - - useEffect(() => { - setConfigName(configName); - initConfig(configName, initialConfig, increaseVersion); - return () => { - removeConfig(configName); - }; - }, [configName]); -}; diff --git a/src/config/provider.tsx b/src/config/provider.tsx index 746e4c79d..1f5a6f191 100644 --- a/src/config/provider.tsx +++ b/src/config/provider.tsx @@ -1,10 +1,6 @@ -import { ReactNode, createContext, useContext, useEffect, useState } from 'react'; -import { shallow } from 'zustand/shallow'; -import { useColorTheme } from '~/tools/color'; +import { createContext, useContext } from 'react'; import { ConfigType } from '~/types/config'; -import { useConfigStore } from './store'; - export type ConfigContextType = { config: ConfigType | undefined; name: string | undefined; @@ -21,41 +17,4 @@ const ConfigContext = createContext({ setConfigName: () => {}, }); -export const ConfigProvider = ({ - children, - config: fallbackConfig, -}: { - children: ReactNode; - config?: ConfigType; -}) => { - const [configName, setConfigName] = useState( - fallbackConfig?.configProperties.name || 'unknown' - ); - const [configVersion, setConfigVersion] = useState(0); - const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow); - - const currentConfig = configs.find((c) => c.value.configProperties.name === configName)?.value; - const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme(); - - useEffect(() => { - setPrimaryColor(currentConfig?.settings.customization.colors.primary || 'red'); - setSecondaryColor(currentConfig?.settings.customization.colors.secondary || 'orange'); - setPrimaryShade(currentConfig?.settings.customization.colors.shade || 6); - }, [currentConfig]); - - return ( - setConfigVersion((v) => v + 1), - setConfigName: (name: string) => setConfigName(name), - }} - > - {children} - - ); -}; - export const useConfigContext = () => useContext(ConfigContext); diff --git a/src/config/store.ts b/src/config/store.ts deleted file mode 100644 index 9abc1c955..000000000 --- a/src/config/store.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { createWithEqualityFn } from 'zustand/traditional'; -import { ConfigType } from '~/types/config'; -import { trcpProxyClient } from '~/utils/api'; - -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); - - 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 (shouldSaveConfigToFileSystem) { - trcpProxyClient.config.save.mutate({ - name, - config: updatedConfig, - }); - } - }, - }), - Object.is -); - -interface UseConfigStoreType { - configs: { increaseVersion: () => void; value: ConfigType }[]; - initConfig: (name: string, config: ConfigType, increaseVersion: () => void) => void; - addConfig: (name: string, config: ConfigType) => Promise; - removeConfig: (name: string) => void; - updateConfig: ( - name: string, - updateCallback: (previous: ConfigType) => ConfigType, - shouldRegenerateGridstack?: - | boolean - | ((previousConfig: ConfigType, currentConfig: ConfigType) => boolean), - shouldSaveConfigToFileSystem?: boolean - ) => Promise; -} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 092965998..ab7fd3feb 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -21,7 +21,6 @@ import Script from 'next/script'; import { useEffect, useState } from 'react'; import 'video.js/dist/video-js.css'; import { CommonHead } from '~/components/layout/Meta/CommonHead'; -import { ConfigProvider } from '~/config/provider'; import { env } from '~/env.js'; import { ColorSchemeProvider } from '~/hooks/use-colorscheme'; import { modals } from '~/modals'; @@ -148,12 +147,10 @@ function App( withNormalizeCSS withCSSVariables > - - - - - - + + + + )}