diff --git a/public/locales/en/settings/general/config-changer.json b/public/locales/en/settings/general/config-changer.json index 2ca62d86f..927547d02 100644 --- a/public/locales/en/settings/general/config-changer.json +++ b/public/locales/en/settings/general/config-changer.json @@ -1,6 +1,8 @@ { "configSelect": { - "label": "Config loader" + "label": "Config loader", + "loadingNew": "Loading your config...", + "pleaseWait": "Please wait until your new config is loaded" }, "modal": { "title": "Choose the name of your new config", diff --git a/src/components/Config/ConfigChanger.tsx b/src/components/Config/ConfigChanger.tsx index c9f1d204f..7d5c43c33 100644 --- a/src/components/Config/ConfigChanger.tsx +++ b/src/components/Config/ConfigChanger.tsx @@ -1,5 +1,7 @@ -import { Center, Loader, Select, Tooltip } from '@mantine/core'; +import { Center, Dialog, Loader, Notification, Select, Tooltip } from '@mantine/core'; +import { useToggle } from '@mantine/hooks'; import { useQuery } from '@tanstack/react-query'; +import { setCookie } from 'cookies-next'; import { useTranslation } from 'next-i18next'; import { useState } from 'react'; import { useConfigContext } from '../../config/provider'; @@ -7,23 +9,26 @@ import { useConfigContext } from '../../config/provider'; export default function ConfigChanger() { const { t } = useTranslation('settings/general/config-changer'); const { name: configName } = useConfigContext(); - //const loadConfig = useConfigStore((x) => x.loadConfig); + // const loadConfig = useConfigStore((x) => x.loadConfig); const { data: configs, isLoading, isError } = useConfigsQuery(); const [activeConfig, setActiveConfig] = useState(configName); + const [isRefreshing, toggle] = useToggle(); const onConfigChange = (value: string) => { // TODO: check what should happen here with @manuel-rw // Wheter it should check for the current url and then load the new config only on index // Or it should always load the selected config and open index or ? --> change url to page + setCookie('config-name', value ?? 'default', { + maxAge: 60 * 60 * 24 * 30, + sameSite: 'strict', + }); setActiveConfig(value); - /* - loadConfig(e ?? 'default'); - setCookie('config-name', e ?? 'default', { - maxAge: 60 * 60 * 24 * 30, - sameSite: 'strict', - }); - */ + toggle(); + // Use timeout to wait for the cookie to be set + setTimeout(() => { + window.location.reload(); + }, 1000); }; // If configlist is empty, return a loading indicator @@ -38,12 +43,26 @@ export default function ConfigChanger() { } return ( - + toggle()} + size="lg" + radius="md" + > + + {t('configSelect.pleaseWait')} + + + ); }