From 48b2e951cd09fb26e3542b3109382e42f9f6ee9a Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Thu, 27 Jul 2023 20:25:12 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20config=20appearance=20on?=
 =?UTF-8?q?=20initial=20load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json            |  6 ++++--
 src/config/provider.tsx |  7 ++++---
 src/pages/_app.tsx      | 11 +++++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 49f0b7b82..0230cf27e 100644
--- a/package.json
+++ b/package.json
@@ -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 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/config/provider.tsx b/src/config/provider.tsx
index 1d6803b17..6d2228373 100644
--- a/src/config/provider.tsx
+++ b/src/config/provider.tsx
@@ -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),
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 37ed1a412..88d63c532 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -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={{