From 91f636ca9775c3288c283f49f18b40e7584c8a83 Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 19:28:10 +0200
Subject: [PATCH 1/7] Basic backend support and config loading from file

---
 components/Config/SelectConfig.tsx | 16 ++++++
 data/configs/default.json          | 16 ++++++
 package.json                       |  1 +
 pages/_app.tsx                     |  4 +-
 pages/api/configs/[slug].ts        | 61 +++++++++++++++++++++++
 pages/api/configs/index.ts         | 28 +++++++++++
 pages/tryconfig.tsx                | 52 +++++++++++++++++++
 tools/state.tsx                    | 80 ++++++++++++++----------------
 tools/types.ts                     |  1 +
 yarn.lock                          | 22 ++++++++
 10 files changed, 235 insertions(+), 46 deletions(-)
 create mode 100644 components/Config/SelectConfig.tsx
 create mode 100644 data/configs/default.json
 create mode 100644 pages/api/configs/[slug].ts
 create mode 100644 pages/api/configs/index.ts
 create mode 100644 pages/tryconfig.tsx

diff --git a/components/Config/SelectConfig.tsx b/components/Config/SelectConfig.tsx
new file mode 100644
index 000000000..4abd659fb
--- /dev/null
+++ b/components/Config/SelectConfig.tsx
@@ -0,0 +1,16 @@
+import { Select } from '@mantine/core';
+import { useState } from 'react';
+
+export default function SelectConfig(props: any) {
+  const [value, setValue] = useState<string | null>('');
+  return (
+    <Select
+      value={value}
+      onChange={setValue}
+      data={[
+        { value: 'default', label: 'Default' },
+        { value: 'yourmom', label: 'Your mom' },
+      ]}
+    />
+  );
+}
diff --git a/data/configs/default.json b/data/configs/default.json
new file mode 100644
index 000000000..5e3c68743
--- /dev/null
+++ b/data/configs/default.json
@@ -0,0 +1,16 @@
+{
+  "name": "default",
+  "services": [
+    {
+      "type": "Other",
+      "name": "ok",
+      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
+      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    }
+  ],
+  "settings": {
+    "searchBar": false,
+    "searchUrl": "https://www.google.com/search?q=",
+    "enabledModules": []
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index e0ee483b9..43337761e 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@mantine/rte": "^4.2.4",
     "@mantine/spotlight": "^4.2.4",
     "@modulz/radix-icons": "^4.0.0",
+    "axios": "^0.27.2",
     "cookies-next": "^2.0.4",
     "dayjs": "^1.11.2",
     "framer-motion": "^6.3.1",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bb54e75df..89887632d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -16,7 +16,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const toggleColorScheme = (value?: ColorScheme) => {
     const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
     setColorScheme(nextColorScheme);
-    setCookies('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+    setCookies('color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
   };
 
   return (
@@ -50,5 +50,5 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
 }
 
 App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
-  colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
+  colorScheme: getCookie('color-scheme', ctx) || 'light',
 });
diff --git a/pages/api/configs/[slug].ts b/pages/api/configs/[slug].ts
new file mode 100644
index 000000000..dfa8ed8d0
--- /dev/null
+++ b/pages/api/configs/[slug].ts
@@ -0,0 +1,61 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+import path from 'path';
+
+function Put(req: NextApiRequest, res: NextApiResponse) {
+  // Get the slug of the request
+  const { slug } = req.query as { slug: string };
+  // Get the body of the request
+  const { body }: { body: string } = req;
+  if (!slug || !body) {
+    res.status(400).json({
+      error: 'Wrong request',
+    });
+  }
+  // Save the body in the /data/config folder with the slug as filename
+
+  fs.writeFileSync(
+    path.join('data/configs', `${slug}.json`),
+    JSON.stringify(body, null, 2),
+    'utf8'
+  );
+  return res.status(200).json({
+    message: 'Configuration saved with success',
+  });
+}
+
+function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Get the slug of the request
+  const { slug } = req.query as { slug: string };
+  if (!slug) {
+    return res.status(400).json({
+      message: 'Wrong request',
+    });
+  }
+  // Loop over all the files in the /data/configs directory
+  const files = fs.readdirSync('data/configs');
+  // Strip the .json extension from the file name
+  const configs = files.map((file) => file.replace('.json', ''));
+  // If the target is not in the list of files, return an error
+  if (!configs.includes(slug)) {
+    return res.status(404).json({
+      message: 'Target not found',
+    });
+  }
+  // Return the content of the file
+  return res.status(200).json(fs.readFileSync(path.join('data/configs', `${slug}.json`), 'utf8'));
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a Put or a GET
+  if (req.method === 'PUT') {
+    return Put(req, res);
+  }
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};
diff --git a/pages/api/configs/index.ts b/pages/api/configs/index.ts
new file mode 100644
index 000000000..0b0bad5c9
--- /dev/null
+++ b/pages/api/configs/index.ts
@@ -0,0 +1,28 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import fs from 'fs';
+
+function Get(req: NextApiRequest, res: NextApiResponse) {
+  // Loop over all the files in the /data/configs directory
+  const files = fs.readdirSync('data/configs');
+  // Strip the .json extension from the file name
+  const configs = files.map((file) => file.replace('.json', ''));
+  // Return the list of files
+  return res.status(200).json(configs);
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  // Filter out if the reuqest is a POST or a GET
+  if (req.method === 'POST') {
+    return res.status(405).json({
+      statusCode: 405,
+      message: 'Method not allowed',
+    });
+  }
+  if (req.method === 'GET') {
+    return Get(req, res);
+  }
+  return res.status(405).json({
+    statusCode: 405,
+    message: 'Method not allowed',
+  });
+};
diff --git a/pages/tryconfig.tsx b/pages/tryconfig.tsx
new file mode 100644
index 000000000..ec964c902
--- /dev/null
+++ b/pages/tryconfig.tsx
@@ -0,0 +1,52 @@
+import { getCookie, setCookies } from 'cookies-next';
+import { GetServerSidePropsContext } from 'next/types';
+import fs from 'fs';
+import path from 'path';
+import { Button, JsonInput, Space } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { showNotification } from '@mantine/notifications';
+import { Config } from '../tools/types';
+import { useConfig } from '../tools/state';
+
+export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
+  let cookie = getCookie('config-name', { req, res });
+  if (!cookie) {
+    setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
+    cookie = 'default';
+  }
+  const config = fs.readFileSync(path.join('data/configs', `${cookie}.json`), 'utf8');
+  return {
+    props: {
+      config: JSON.parse(config),
+    },
+  };
+}
+
+export default function TryConfig(props: any) {
+  const { config: initialConfig }: { config: Config } = props;
+  const { config, loadConfig, setConfig } = useConfig();
+  const [value, setValue] = useState(JSON.stringify(config, null, 2));
+
+  useEffect(() => {
+    setValue(JSON.stringify(config, null, 2));
+    // setConfig(initialConfig);
+  }, [config]);
+
+  return (
+    <div>
+      <h1>Try Config</h1>
+      <p>
+        This page is a demo of the <code>config</code> API.
+      </p>
+      <p>
+        The <code>config</code> API is a way to store configuration data in a JSON file.
+      </p>
+      <JsonInput autosize onChange={setValue} value={value} />
+      <Space my="xl" />
+      <Button onClick={() => loadConfig('cringe')}>Load config cringe</Button>
+      <Button onClick={() => loadConfig('default')}>Load config default</Button>
+      <Button onClick={() => setConfig(JSON.parse(value))}>Save config</Button>
+    </div>
+  );
+}
diff --git a/tools/state.tsx b/tools/state.tsx
index d803402f1..6c1d25754 100644
--- a/tools/state.tsx
+++ b/tools/state.tsx
@@ -1,17 +1,19 @@
 // src/context/state.js
+import { showNotification } from '@mantine/notifications';
+import axios from 'axios';
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { Config, serviceItem } from './types';
+import { Check, X } from 'tabler-icons-react';
+import { Config } from './types';
 
 type configContextType = {
   config: Config;
   setConfig: (newconfig: Config) => void;
-  addService: (service: serviceItem) => void;
-  removeService: (name: string) => void;
-  saveConfig: (newconfig: Config) => void;
+  loadConfig: (name: string) => void;
 };
 
 const configContext = createContext<configContextType>({
   config: {
+    name: 'default',
     services: [],
     settings: {
       searchBar: true,
@@ -20,9 +22,7 @@ const configContext = createContext<configContextType>({
     },
   },
   setConfig: () => {},
-  addService: () => {},
-  removeService: () => {},
-  saveConfig: () => {},
+  loadConfig: async (name: string) => {},
 });
 
 export function useConfig() {
@@ -39,6 +39,7 @@ type Props = {
 
 export function ConfigProvider({ children }: Props) {
   const [config, setConfigInternal] = useState<Config>({
+    name: 'default',
     services: [
       {
         type: 'Other',
@@ -54,49 +55,40 @@ export function ConfigProvider({ children }: Props) {
     },
   });
 
-  function setConfig(newConfig: Config) {
-    setConfigInternal(newConfig);
-    saveConfig(newConfig);
+  async function loadConfig(configName: string) {
+    try {
+      const response = await axios.get(`/api/configs/${configName}`);
+      console.log('response', response);
+      setConfigInternal(response.data);
+      showNotification({
+        title: 'Config',
+        icon: <Check />,
+        color: 'green',
+        autoClose: 1500,
+        radius: 'md',
+        message: `Loaded config : ${configName}`,
+      });
+    } catch (error) {
+      showNotification({
+        title: 'Config',
+        icon: <X />,
+        color: 'red',
+        autoClose: 1500,
+        radius: 'md',
+        message: `Error loading config : ${configName}`,
+      });
+    }
   }
 
-  function addService(item: serviceItem) {
-    setConfigInternal({
-      ...config,
-      services: [...config.services, item],
-    });
-    saveConfig({
-      ...config,
-      services: [...config.services, item],
-    });
-  }
-
-  function removeService(name: string) {
-    // Remove the service with name in config item
-    setConfigInternal({
-      ...config,
-      services: config.services.filter((service) => service.name !== name),
-    });
-    saveConfig({
-      ...config,
-      services: config.services.filter((service) => service.name !== name),
-    });
-  }
-
-  function saveConfig(newconfig: Config) {
-    if (!newconfig) return;
-    localStorage.setItem('config', JSON.stringify(newconfig));
+  function setConfig(newconfig: Config) {
+    axios.put(`/api/configs/${newconfig.name}`, newconfig);
+    setConfigInternal(newconfig);
   }
 
   const value = {
     config,
     setConfig,
-    addService,
-    removeService,
-    saveConfig,
+    loadConfig,
   };
-  return (
-    <>
-      <configContext.Provider value={value}>{children}</configContext.Provider>
-    </>
-  );
+  return <configContext.Provider value={value}>{children}</configContext.Provider>;
 }
diff --git a/tools/types.ts b/tools/types.ts
index 43d302a23..1b3d9437b 100644
--- a/tools/types.ts
+++ b/tools/types.ts
@@ -6,6 +6,7 @@ export interface Settings {
 }
 
 export interface Config {
+  name: string;
   services: serviceItem[];
   settings: Settings;
 }
diff --git a/yarn.lock b/yarn.lock
index 99513093d..884ac1dc0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3909,6 +3909,14 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -6485,6 +6493,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.14.9:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
+  integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -6539,6 +6552,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 format@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"

From 3ce9c98e03b096a26198a6537fe1b3782a80a816 Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 21:38:21 +0200
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=8E=89=20Persistent=20config=20?=
 =?UTF-8?q?=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After sweat and tears... It's there!
---
 components/AppShelf/AddAppShelfItem.tsx | 14 ++---
 components/AppShelf/AppShelf.tsx        | 35 +++----------
 components/AppShelf/AppShelfMenu.tsx    |  9 +++-
 components/Config/LoadConfig.tsx        |  2 +-
 components/Settings/SettingsMenu.tsx    |  1 -
 data/configs/cringe.json                | 16 ++++++
 data/configs/default.json               |  6 +--
 data/configs/low.json                   | 16 ++++++
 data/configs/undefined.json             |  3 ++
 pages/api/configs/index.ts              |  2 +-
 pages/index.tsx                         | 50 +++++++++++++++++-
 pages/tryconfig.tsx                     | 68 +++++++++++++++++++++----
 tools/state.tsx                         | 18 +++----
 13 files changed, 178 insertions(+), 62 deletions(-)
 create mode 100644 data/configs/cringe.json
 create mode 100644 data/configs/low.json
 create mode 100644 data/configs/undefined.json

diff --git a/components/AppShelf/AddAppShelfItem.tsx b/components/AppShelf/AddAppShelfItem.tsx
index 37eac451e..5f42d2af2 100644
--- a/components/AppShelf/AddAppShelfItem.tsx
+++ b/components/AppShelf/AddAppShelfItem.tsx
@@ -1,5 +1,4 @@
 import {
-  useMantineTheme,
   Modal,
   Center,
   Group,
@@ -21,9 +20,7 @@ import { ServiceTypeList } from '../../tools/types';
 import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 
 export default function AddItemShelfItem(props: any) {
-  const { addService } = useConfig();
   const [opened, setOpened] = useState(false);
-  const theme = useMantineTheme();
   return (
     <>
       <Modal
@@ -83,7 +80,7 @@ function MatchIcon(name: string, form: any) {
         form.setFieldValue('icon', res.url);
       }
     })
-    .catch((e) => {
+    .catch(() => {
       // Do nothing
     });
 
@@ -92,7 +89,7 @@ function MatchIcon(name: string, form: any) {
 
 export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
   const { setOpened } = props;
-  const { addService, config, setConfig } = useConfig();
+  const { config, setConfig } = useConfig();
   const [isLoading, setLoading] = useState(false);
 
   const form = useForm({
@@ -104,7 +101,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       apiKey: props.apiKey ?? (undefined as unknown as string),
     },
     validate: {
-      apiKey: (value: string) => null,
+      apiKey: () => null,
       // Validate icon with a regex
       icon: (value: string) => {
         if (!value.match(/^https?:\/\/.+\.(png|jpg|jpeg|gif)$/)) {
@@ -143,7 +140,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               }),
             });
           } else {
-            addService(form.values);
+            setConfig({
+              ...config,
+              services: [...config.services, form.values],
+            });
           }
           setOpened(false);
           form.reset();
diff --git a/components/AppShelf/AppShelf.tsx b/components/AppShelf/AppShelf.tsx
index fb0b23f7e..af5f85340 100644
--- a/components/AppShelf/AppShelf.tsx
+++ b/components/AppShelf/AppShelf.tsx
@@ -1,35 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import {
-  Text,
-  AspectRatio,
-  SimpleGrid,
-  Card,
-  useMantineTheme,
-  Image,
-  Group,
-  Space,
-} from '@mantine/core';
+import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AddItemShelfItem from './AddAppShelfItem';
 import { AppShelfItemWrapper } from './AppShelfItemWrapper';
 import AppShelfMenu from './AppShelfMenu';
 
-const AppShelf = (props: any) => {
-  const { config, addService, removeService, setConfig } = useConfig();
-
-  /* A hook that is used to load the config from local storage. */
-  useEffect(() => {
-    const localConfig = localStorage.getItem('config');
-    if (localConfig) {
-      setConfig(JSON.parse(localConfig));
-    }
-  }, []);
+const AppShelf = () => {
+  const { config } = useConfig();
 
   return (
     <SimpleGrid m="xl" cols={5} spacing="xl">
-      {config.services.map((service, i) => (
+      {config.services.map((service) => (
         <AppShelfItem key={service.name} service={service} />
       ))}
       <AddItemShelfItem />
@@ -39,16 +22,14 @@ const AppShelf = (props: any) => {
 
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
-  const theme = useMantineTheme();
-  const { removeService } = useConfig();
   const [hovering, setHovering] = useState(false);
   return (
     <motion.div
       key={service.name}
-      onHoverStart={(e) => {
+      onHoverStart={() => {
         setHovering(true);
       }}
-      onHoverEnd={(e) => {
+      onHoverEnd={() => {
         setHovering(false);
       }}
     >
@@ -79,7 +60,7 @@ export function AppShelfItem(props: any) {
                 opacity: hovering ? 1 : 0,
               }}
             >
-              <AppShelfMenu service={service} removeitem={removeService} />
+              <AppShelfMenu service={service} />
             </motion.div>
           </Group>
         </Card.Section>
diff --git a/components/AppShelf/AppShelfMenu.tsx b/components/AppShelf/AppShelfMenu.tsx
index 95042ddf1..ae905dfbf 100644
--- a/components/AppShelf/AppShelfMenu.tsx
+++ b/components/AppShelf/AppShelfMenu.tsx
@@ -2,10 +2,12 @@ import { Menu, Modal, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { Check, Edit, Trash } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
 
 export default function AppShelfMenu(props: any) {
-  const { service, removeitem: removeItem } = props;
+  const { service } = props;
+  const { config, setConfig } = useConfig();
   const [opened, setOpened] = useState(false);
   return (
     <>
@@ -40,7 +42,10 @@ export default function AppShelfMenu(props: any) {
         <Menu.Item
           color="red"
           onClick={(e: any) => {
-            removeItem(service.name);
+            setConfig({
+              ...config,
+              services: config.services.filter((s) => s.name !== service.name),
+            });
             showNotification({
               autoClose: 5000,
               title: (
diff --git a/components/Config/LoadConfig.tsx b/components/Config/LoadConfig.tsx
index ddecac813..a590e20ac 100644
--- a/components/Config/LoadConfig.tsx
+++ b/components/Config/LoadConfig.tsx
@@ -48,7 +48,7 @@ export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) =>
 );
 
 export default function LoadConfigComponent(props: any) {
-  const { saveConfig, setConfig } = useConfig();
+  const { setConfig } = useConfig();
   const theme = useMantineTheme();
   const router = useRouter();
   const openRef = useRef<() => void>();
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index 47a41fee1..431d70449 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -28,7 +28,6 @@ function SettingsMenu(props: any) {
     { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
     { label: 'Bing', value: 'https://bing.com/search?q=' },
   ];
-
   return (
     <Group direction="column" grow>
       <Alert
diff --git a/data/configs/cringe.json b/data/configs/cringe.json
new file mode 100644
index 000000000..db308ffe9
--- /dev/null
+++ b/data/configs/cringe.json
@@ -0,0 +1,16 @@
+{
+  "name": "cringe",
+  "services": [
+    {
+      "type": "Other",
+      "name": "sonarr",
+      "icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/sonarr.png",
+      "url": "http://sonarr.tv/"
+    }
+  ],
+  "settings": {
+    "enabledModules": [],
+    "searchBar": true,
+    "searchUrl": "https://www.google.com/search?q="
+  }
+}
\ No newline at end of file
diff --git a/data/configs/default.json b/data/configs/default.json
index 5e3c68743..57f8faa53 100644
--- a/data/configs/default.json
+++ b/data/configs/default.json
@@ -2,14 +2,14 @@
   "name": "default",
   "services": [
     {
-      "type": "Other",
-      "name": "ok",
+      "type": "Other hello",
+      "name": "example",
       "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
       "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
     }
   ],
   "settings": {
-    "searchBar": false,
+    "searchBar": true,
     "searchUrl": "https://www.google.com/search?q=",
     "enabledModules": []
   }
diff --git a/data/configs/low.json b/data/configs/low.json
new file mode 100644
index 000000000..c3482808d
--- /dev/null
+++ b/data/configs/low.json
@@ -0,0 +1,16 @@
+{
+  "name": "low",
+  "services": [
+    {
+      "type": "I am  ",
+      "name": "example",
+      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
+      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    }
+  ],
+  "settings": {
+    "searchBar": true,
+    "searchUrl": "https://www.google.com/search?q=",
+    "enabledModules": []
+  }
+}
\ No newline at end of file
diff --git a/data/configs/undefined.json b/data/configs/undefined.json
new file mode 100644
index 000000000..c92e56872
--- /dev/null
+++ b/data/configs/undefined.json
@@ -0,0 +1,3 @@
+{
+  "true": ""
+}
\ No newline at end of file
diff --git a/pages/api/configs/index.ts b/pages/api/configs/index.ts
index 0b0bad5c9..78aabc4e8 100644
--- a/pages/api/configs/index.ts
+++ b/pages/api/configs/index.ts
@@ -6,7 +6,7 @@ function Get(req: NextApiRequest, res: NextApiResponse) {
   const files = fs.readdirSync('data/configs');
   // Strip the .json extension from the file name
   const configs = files.map((file) => file.replace('.json', ''));
-  // Return the list of files
+
   return res.status(200).json(configs);
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 7203f0f44..8ec813ffb 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,9 +1,57 @@
 import { Group } from '@mantine/core';
+import { getCookie, setCookies } from 'cookies-next';
+import { GetServerSidePropsContext } from 'next';
+import path from 'path';
+import fs from 'fs';
+import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import SearchBar from '../components/SearchBar/SearchBar';
+import { Config } from '../tools/types';
+import { useConfig } from '../tools/state';
 
-export default function HomePage() {
+export async function getServerSideProps({
+  req,
+  res,
+}: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
+  let cookie = getCookie('config-name', { req, res });
+  if (!cookie) {
+    setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
+    cookie = 'default';
+  }
+  // Check if the config file exists
+  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
+  if (!fs.existsSync(configPath)) {
+    return {
+      props: {
+        config: {
+          name: cookie.toString(),
+          services: [],
+          settings: {
+            enabledModules: [],
+            searchBar: true,
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
+  return {
+    props: {
+      config: JSON.parse(config),
+    },
+  };
+}
+
+export default function HomePage(props: any) {
+  const { config: initialConfig }: { config: Config } = props;
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  useEffect(() => {
+    setConfig(initialConfig);
+  }, [initialConfig]);
   return (
     <>
       <SearchBar />
diff --git a/pages/tryconfig.tsx b/pages/tryconfig.tsx
index ec964c902..37d2c2565 100644
--- a/pages/tryconfig.tsx
+++ b/pages/tryconfig.tsx
@@ -2,20 +2,40 @@ import { getCookie, setCookies } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next/types';
 import fs from 'fs';
 import path from 'path';
-import { Button, JsonInput, Space } from '@mantine/core';
+import { Button, JsonInput, Select, Space } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import axios from 'axios';
-import { showNotification } from '@mantine/notifications';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
 
-export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
+export async function getServerSideProps({
+  req,
+  res,
+}: GetServerSidePropsContext): Promise<{ props: { config: Config } }> {
   let cookie = getCookie('config-name', { req, res });
   if (!cookie) {
     setCookies('config-name', 'default', { req, res, maxAge: 60 * 60 * 24 * 30 });
     cookie = 'default';
   }
-  const config = fs.readFileSync(path.join('data/configs', `${cookie}.json`), 'utf8');
+  // Check if the config file exists
+  const configPath = path.join(process.cwd(), 'data/configs', `${cookie}.json`);
+  if (!fs.existsSync(configPath)) {
+    return {
+      props: {
+        config: {
+          name: cookie.toString(),
+          services: [],
+          settings: {
+            enabledModules: [],
+            searchBar: true,
+            searchUrl: 'https://www.google.com/search?q=',
+          },
+        },
+      },
+    };
+  }
+
+  const config = fs.readFileSync(configPath, 'utf8');
+  // Print loaded config
   return {
     props: {
       config: JSON.parse(config),
@@ -25,9 +45,13 @@ export async function getServerSideProps({ req, res }: GetServerSidePropsContext
 
 export default function TryConfig(props: any) {
   const { config: initialConfig }: { config: Config } = props;
-  const { config, loadConfig, setConfig } = useConfig();
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
   const [value, setValue] = useState(JSON.stringify(config, null, 2));
-
+  const [configList, setConfigList] = useState([] as string[]);
+  useEffect(() => {
+    setValue(JSON.stringify(initialConfig, null, 2));
+    setConfig(initialConfig);
+  }, [initialConfig]);
   useEffect(() => {
     setValue(JSON.stringify(config, null, 2));
     // setConfig(initialConfig);
@@ -42,11 +66,35 @@ export default function TryConfig(props: any) {
       <p>
         The <code>config</code> API is a way to store configuration data in a JSON file.
       </p>
+      <p>
+        Cookie loaded was <code>{initialConfig.name}</code>
+      </p>
       <JsonInput autosize onChange={setValue} value={value} />
       <Space my="xl" />
-      <Button onClick={() => loadConfig('cringe')}>Load config cringe</Button>
-      <Button onClick={() => loadConfig('default')}>Load config default</Button>
-      <Button onClick={() => setConfig(JSON.parse(value))}>Save config</Button>
+      <Button onClick={() => getConfigs().then((configs) => setConfigList(configs))}>
+        Get configs
+      </Button>
+      <Space my="xl" />
+      <Select
+        label="Config loader"
+        onChange={(e) => {
+          loadConfig(e ?? 'default');
+        }}
+        data={
+          // If config list is empty, return the current config
+          configList.length === 0 ? [config.name] : configList
+        }
+      />
+      <Space my="xl" />
+      <Button mx="md" onClick={() => setConfig(JSON.parse(value))}>
+        Save config
+      </Button>
+      <Button
+        mx="md"
+        onClick={() => setCookies('config-name', 'cringe', { maxAge: 60 * 60 * 24 * 30 })}
+      >
+        Set cookie to config = cringe
+      </Button>
     </div>
   );
 }
diff --git a/tools/state.tsx b/tools/state.tsx
index 6c1d25754..64a99b48d 100644
--- a/tools/state.tsx
+++ b/tools/state.tsx
@@ -9,6 +9,7 @@ type configContextType = {
   config: Config;
   setConfig: (newconfig: Config) => void;
   loadConfig: (name: string) => void;
+  getConfigs: () => Promise<string[]>;
 };
 
 const configContext = createContext<configContextType>({
@@ -23,6 +24,7 @@ const configContext = createContext<configContextType>({
   },
   setConfig: () => {},
   loadConfig: async (name: string) => {},
+  getConfigs: async () => [],
 });
 
 export function useConfig() {
@@ -40,14 +42,7 @@ type Props = {
 export function ConfigProvider({ children }: Props) {
   const [config, setConfigInternal] = useState<Config>({
     name: 'default',
-    services: [
-      {
-        type: 'Other',
-        name: 'example',
-        icon: 'https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif',
-        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-      },
-    ],
+    services: [],
     settings: {
       searchBar: true,
       searchUrl: 'https://www.google.com/search?q=',
@@ -58,7 +53,6 @@ export function ConfigProvider({ children }: Props) {
   async function loadConfig(configName: string) {
     try {
       const response = await axios.get(`/api/configs/${configName}`);
-      console.log('response', response);
       setConfigInternal(response.data);
       showNotification({
         title: 'Config',
@@ -85,10 +79,16 @@ export function ConfigProvider({ children }: Props) {
     setConfigInternal(newconfig);
   }
 
+  async function getConfigs(): Promise<string[]> {
+    const response = await axios.get('/api/configs');
+    return response.data;
+  }
+
   const value = {
     config,
     setConfig,
     loadConfig,
+    getConfigs,
   };
   return <configContext.Provider value={value}>{children}</configContext.Provider>;
 }

From 98e4da5a3b6f92a3dbba02bfd0fdba1ea41fc2d0 Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 21:57:01 +0200
Subject: [PATCH 3/7] =?UTF-8?q?Remove=20JSON=20and=20add=20=F0=9F=8D=AA=20?=
 =?UTF-8?q?Tryconfig=20save=20cookies?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/configs/default.json   |  2 +-
 data/configs/low.json       | 16 ----------------
 data/configs/undefined.json |  3 ---
 pages/tryconfig.tsx         |  1 +
 4 files changed, 2 insertions(+), 20 deletions(-)
 delete mode 100644 data/configs/low.json
 delete mode 100644 data/configs/undefined.json

diff --git a/data/configs/default.json b/data/configs/default.json
index 57f8faa53..9e1d1669a 100644
--- a/data/configs/default.json
+++ b/data/configs/default.json
@@ -2,7 +2,7 @@
   "name": "default",
   "services": [
     {
-      "type": "Other hello",
+      "type": "Other",
       "name": "example",
       "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
       "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
diff --git a/data/configs/low.json b/data/configs/low.json
deleted file mode 100644
index c3482808d..000000000
--- a/data/configs/low.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "low",
-  "services": [
-    {
-      "type": "I am  ",
-      "name": "example",
-      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
-      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-    }
-  ],
-  "settings": {
-    "searchBar": true,
-    "searchUrl": "https://www.google.com/search?q=",
-    "enabledModules": []
-  }
-}
\ No newline at end of file
diff --git a/data/configs/undefined.json b/data/configs/undefined.json
deleted file mode 100644
index c92e56872..000000000
--- a/data/configs/undefined.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "true": ""
-}
\ No newline at end of file
diff --git a/pages/tryconfig.tsx b/pages/tryconfig.tsx
index 37d2c2565..6fb38734c 100644
--- a/pages/tryconfig.tsx
+++ b/pages/tryconfig.tsx
@@ -79,6 +79,7 @@ export default function TryConfig(props: any) {
         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

From 84b7d4bbdcd1840d798a11e6a8a22b89f048290d Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 22:11:28 +0200
Subject: [PATCH 4/7] Fix cookie in Upload form and fix download name

---
 components/Config/LoadConfig.tsx | 11 +++++++++--
 components/Config/SaveConfig.tsx |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/Config/LoadConfig.tsx b/components/Config/LoadConfig.tsx
index a590e20ac..d36fecd19 100644
--- a/components/Config/LoadConfig.tsx
+++ b/components/Config/LoadConfig.tsx
@@ -4,6 +4,7 @@ import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
 import { useRouter } from 'next/router';
+import { setCookies } from 'cookies-next';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 
@@ -69,15 +70,21 @@ export default function LoadConfigComponent(props: any) {
             });
             return;
           }
+          const newConfig: Config = JSON.parse(e);
           showNotification({
             autoClose: 5000,
             radius: 'md',
-            title: <Text>Config loaded successfully</Text>,
+            title: (
+              <Text>
+                Config <b>{newConfig.name}</b> loaded successfully
+              </Text>
+            ),
             color: 'green',
             icon: <Check />,
             message: undefined,
           });
-          setConfig(JSON.parse(e));
+          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setConfig(newConfig);
         });
       }}
       accept={['application/json']}
diff --git a/components/Config/SaveConfig.tsx b/components/Config/SaveConfig.tsx
index d12f7ad22..cfaf196d4 100644
--- a/components/Config/SaveConfig.tsx
+++ b/components/Config/SaveConfig.tsx
@@ -7,7 +7,7 @@ export default function SaveConfigComponent(props: any) {
   const { config } = useConfig();
   function onClick(e: any) {
     if (config) {
-      fileDownload(JSON.stringify(config, null, '\t'), 'config.json');
+      fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
     }
   }
   return (

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 5/7] 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={{

From 7040760a8488c4db1cdf6fe351ecce9e055b24b0 Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 22:19:51 +0200
Subject: [PATCH 6/7] Add ConfigChanger indicator

---
 components/Config/ConfigChanger.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/Config/ConfigChanger.tsx b/components/Config/ConfigChanger.tsx
index 0fc531b05..5b8836803 100644
--- a/components/Config/ConfigChanger.tsx
+++ b/components/Config/ConfigChanger.tsx
@@ -1,4 +1,4 @@
-import { Loader, Select } from '@mantine/core';
+import { Center, Loader, Select, Tooltip } from '@mantine/core';
 import { setCookies } from 'cookies-next';
 import { useEffect, useState } from 'react';
 import { useConfig } from '../../tools/state';
@@ -12,7 +12,13 @@ export default function ConfigChanger() {
   }, [config]);
   // If configlist is empty, return a loading indicator
   if (configList.length === 0) {
-    return <Loader />;
+    return (
+      <Center>
+        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+          <Loader />
+        </Tooltip>
+      </Center>
+    );
   }
   return (
     <Select

From 3cbc7683e8ffae60e0f485de375601907d32961c Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 22:35:21 +0200
Subject: [PATCH 7/7] Fix default search engine in settings menu

---
 components/Settings/SettingsMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index 99afc8a98..b8fed02eb 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -42,9 +42,9 @@ function SettingsMenu(props: any) {
       <Group>
         <SegmentedControl
           title="Search engine"
-          defaultValue={
+          value={
             // Match config.settings.searchUrl with a key in the matches array
-            matches.find((match) => match.value === config.settings.searchUrl)?.value || 'Google'
+            matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Google'
           }
           onChange={
             // Set config.settings.searchUrl to the value of the selected item