🎉 Persistent config 🎉

After sweat and tears... It's there!

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);
 }
 

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 />

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>
   );
 }