From ff2fd2febdedfdfb5a3adf8be5dc1e33796fa58a Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 22:16:22 +0200
Subject: [PATCH] Add a ConfigChanger in the settings menu

---
 components/Config/ConfigChanger.tsx  | 31 ++++++++++++++++++++++++++++
 components/Settings/SettingsMenu.tsx |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 components/Config/ConfigChanger.tsx

diff --git a/components/Config/ConfigChanger.tsx b/components/Config/ConfigChanger.tsx
new file mode 100644
index 000000000..0fc531b05
--- /dev/null
+++ b/components/Config/ConfigChanger.tsx
@@ -0,0 +1,31 @@
+import { Loader, Select } from '@mantine/core';
+import { setCookies } from 'cookies-next';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export default function ConfigChanger() {
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const [configList, setConfigList] = useState([] as string[]);
+  useEffect(() => {
+    getConfigs().then((configs) => setConfigList(configs));
+    // setConfig(initialConfig);
+  }, [config]);
+  // If configlist is empty, return a loading indicator
+  if (configList.length === 0) {
+    return <Loader />;
+  }
+  return (
+    <Select
+      defaultValue={config.name}
+      label="Config loader"
+      onChange={(e) => {
+        loadConfig(e ?? 'default');
+        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+      }}
+      data={
+        // If config list is empty, return the current config
+        configList.length === 0 ? [config.name] : configList
+      }
+    />
+  );
+}
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index 431d70449..99afc8a98 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -16,6 +16,7 @@ import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
 import { CURRENT_VERSION, REPO_URL } from '../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
+import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
 
@@ -78,6 +79,7 @@ function SettingsMenu(props: any) {
       </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
+      <ConfigChanger />
       <SaveConfigComponent />
       <Text
         style={{