✨ Add new config format

src/components/Config/ConfigChanger.tsx

@@ -1,20 +1,33 @@
 import { Center, Loader, Select, Tooltip } from '@mantine/core';
-import { setCookie } from 'cookies-next';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useState } from 'react';
-import { useConfig } from '../../tools/state';
+import { useState } from 'react';
+import { useConfigContext } from '../../config/provider';
 
 export default function ConfigChanger() {
-  const { config, loadConfig, setConfig, getConfigs } = useConfig();
-  const [configList, setConfigList] = useState<string[]>([]);
-  const [value, setValue] = useState(config.name);
   const { t } = useTranslation('settings/general/config-changer');
+  const { name: configName } = useConfigContext();
+  //const loadConfig = useConfigStore((x) => x.loadConfig);
+
+  const { data: configs, isLoading, isError } = useConfigsQuery();
+  const [activeConfig, setActiveConfig] = useState(configName);
+
+  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 ?
+    setActiveConfig(value);
+    /*
+        loadConfig(e ?? 'default');
+        setCookie('config-name', e ?? 'default', {
+          maxAge: 60 * 60 * 24 * 30,
+          sameSite: 'strict',
+        });
+    */
+  };
 
-  useEffect(() => {
-    getConfigs().then((configs) => setConfigList(configs));
-  }, [config]);
   // If configlist is empty, return a loading indicator
-  if (configList.length === 0) {
+  if (isLoading || !configs || configs?.length === 0 || !configName) {
     return (
       <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
         <Center>
@@ -23,23 +36,22 @@ export default function ConfigChanger() {
       </Tooltip>
     );
   }
-  // return <Select data={[{ value: '1', label: '1' },]} onChange={(e) => console.log(e)} value="1" />;
+
   return (
     <Select
       label={t('configSelect.label')}
-      value={value}
-      defaultValue={config.name}
-      onChange={(e) => {
-        loadConfig(e ?? 'default');
-        setCookie('config-name', e ?? 'default', {
-          maxAge: 60 * 60 * 24 * 30,
-          sameSite: 'strict',
-        });
-      }}
-      data={
-        // If config list is empty, return the current config
-        configList.length === 0 ? [config.name] : configList
-      }
+      value={activeConfig}
+      onChange={onConfigChange}
+      data={configs}
     />
   );
 }
+
+const useConfigsQuery = () => {
+  return useQuery({
+    queryKey: ['config/get-all'],
+    queryFn: fetchConfigs,
+  });
+};
+
+const fetchConfigs = async () => (await (await fetch('/api/configs')).json()) as string[];