Basic backend support and config loading from file

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' },
+      ]}
+    />
+  );
+}

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": []
+  }
+}

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",

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

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',
+  });
+};

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',
+  });
+};

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

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

tools/types.ts

@@ -6,6 +6,7 @@ export interface Settings {
 }
 
 export interface Config {
+  name: string;
   services: serviceItem[];
   settings: Settings;
 }

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"