🐛 Fix config appearance on initial load

This commit is contained in:
Meier Lukas
2023-07-27 20:25:12 +02:00
parent ef0ac587a1
commit 48b2e951cd
3 changed files with 15 additions and 9 deletions

View File

@@ -155,7 +155,9 @@
"^[./]"
],
"importOrderSeparation": true,
"plugins": ["@trivago/prettier-plugin-sort-imports"],
"plugins": [
"@trivago/prettier-plugin-sort-imports"
],
"importOrderSortSpecifiers": true
},
"eslintConfig": {
@@ -217,4 +219,4 @@
]
}
}
}
}

View File

@@ -21,8 +21,9 @@ const ConfigContext = createContext<ConfigContextType>({
setConfigName: () => {},
});
export const ConfigProvider = ({ children }: { children: ReactNode }) => {
const [configName, setConfigName] = useState<string>();
export const ConfigProvider = ({ children, config: fallbackConfig, configName: initialConfigName }: { children: ReactNode, config?: ConfigType, configName?: string }) => {
console.log(initialConfigName);
const [configName, setConfigName] = useState<string>(initialConfigName || 'default');
const [configVersion, setConfigVersion] = useState(0);
const { configs } = useConfigStore((s) => ({ configs: s.configs }), shallow);
const { setPrimaryColor, setSecondaryColor, setPrimaryShade } = useColorTheme();
@@ -39,7 +40,7 @@ export const ConfigProvider = ({ children }: { children: ReactNode }) => {
<ConfigContext.Provider
value={{
name: configName,
config: currentConfig,
config: currentConfig ?? fallbackConfig,
configVersion,
increaseVersion: () => setConfigVersion((v) => v + 1),
setConfigName: (name: string) => setConfigName(name),

View File

@@ -35,6 +35,7 @@ import {
getServiceSidePackageAttributes,
} from '../tools/server/getPackageVersion';
import { theme } from '../tools/server/theme/theme';
import { ConfigType } from '~/types/config';
function App(
this: any,
@@ -43,13 +44,15 @@ function App(
packageAttributes: ServerSidePackageAttributesType;
editModeEnabled: boolean;
defaultColorScheme: ColorScheme;
config?: ConfigType;
configName?: string;
}>
) {
const { Component, pageProps } = props;
const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.primary || 'red');
const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>(props.pageProps.config?.settings.customization.colors.secondary || 'orange');
const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(props.pageProps.config?.settings.customization.colors.shade || 6);
const colorTheme = {
primaryColor,
secondaryColor,
@@ -123,7 +126,7 @@ function App(
withGlobalStyles
withNormalizeCSS
>
<ConfigProvider>
<ConfigProvider {...props.pageProps}>
<Notifications limit={4} position="bottom-left" />
<ModalsProvider
modals={{