✨ 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[];

src/components/Config/SaveConfig.tsx

@@ -1,99 +0,0 @@
-import { Button, Group, Modal, TextInput } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { showNotification } from '@mantine/notifications';
-import axios from 'axios';
-import fileDownload from 'js-file-download';
-import { useState } from 'react';
-import { useTranslation } from 'next-i18next';
-import {
-  IconCheck as Check,
-  IconDownload as Download,
-  IconPlus as Plus,
-  IconTrash as Trash,
-  IconX as X,
-} from '@tabler/icons';
-import { useConfig } from '../../tools/state';
-
-export default function SaveConfigComponent(props: any) {
-  const [opened, setOpened] = useState(false);
-  const { config, setConfig } = useConfig();
-  const { t } = useTranslation('settings/general/config-changer');
-  const form = useForm({
-    initialValues: {
-      configName: config.name,
-    },
-  });
-  function onClick(e: any) {
-    if (config) {
-      fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
-    }
-  }
-  return (
-    <Group spacing="xs">
-      <Modal radius="md" opened={opened} onClose={() => setOpened(false)} title={t('modal.title')}>
-        <form
-          onSubmit={form.onSubmit((values) => {
-            setConfig({ ...config, name: values.configName });
-            setOpened(false);
-            showNotification({
-              title: t('modal.events.configSaved.title'),
-              icon: <Check />,
-              color: 'green',
-              autoClose: 1500,
-              radius: 'md',
-              message: t('modal.events.configSaved.message', { configName: values.configName }),
-            });
-          })}
-        >
-          <TextInput
-            required
-            label={t('modal.form.configName.label')}
-            placeholder={t('modal.form.configName.placeholder')}
-            {...form.getInputProps('configName')}
-          />
-          <Group position="right" mt="md">
-            <Button type="submit">{t('modal.form.submitButton')}</Button>
-          </Group>
-        </form>
-      </Modal>
-      <Button size="xs" leftIcon={<Download />} variant="outline" onClick={onClick}>
-        {t('buttons.download')}
-      </Button>
-      <Button
-        size="xs"
-        leftIcon={<Trash />}
-        variant="outline"
-        onClick={() => {
-          axios
-            .delete(`/api/configs/${config.name}`)
-            .then(() => {
-              showNotification({
-                title: t('buttons.delete.notifications.deleted.title'),
-                icon: <Check />,
-                color: 'green',
-                autoClose: 1500,
-                radius: 'md',
-                message: t('buttons.delete.notifications.deleted.message'),
-              });
-            })
-            .catch(() => {
-              showNotification({
-                title: t('buttons.delete.notifications.deleteFailed.title'),
-                icon: <X />,
-                color: 'red',
-                autoClose: 1500,
-                radius: 'md',
-                message: t('buttons.delete.notifications.deleteFailed.message'),
-              });
-            });
-          setConfig({ ...config, name: 'default' });
-        }}
-      >
-        {t('buttons.delete.text')}
-      </Button>
-      <Button size="xs" leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
-        {t('buttons.saveCopy')}
-      </Button>
-    </Group>
-  );
-}