Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-12 16:35:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix config appearance on initial load

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

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

7
src/config/provider.tsx
View File

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

11
src/pages/_app.tsx
View File

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