🎉 Persistent config 🎉

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

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

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 {
+import { Text, AspectRatio, SimpleGrid, Card, Image, Group, Space } from '@mantine/core';
-  Text,
-  AspectRatio,
-  SimpleGrid,
-  Card,
-  useMantineTheme,
-  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 AppShelf = () => {
-  const { config, addService, removeService, setConfig } = useConfig();
+  const { config } = 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));
-    }
-  }, []);
 
   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>

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: (

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

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

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="
+  }
+}

data/configs/default.json

@@ -2,14 +2,14 @@
   "name": "default",
   "services": [
     {
-      "type": "Other",
+      "type": "Other hello",
-      "name": "ok",
+      "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": []
   }

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

data/configs/undefined.json

@@ -0,0 +1,3 @@
+{
+  "true": ""
+}

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={() => getConfigs().then((configs) => setConfigList(configs))}>
-      <Button onClick={() => loadConfig('default')}>Load config default</Button>
+        Get configs
-      <Button onClick={() => setConfig(JSON.parse(value))}>Save config</Button>
+      </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>
   );
 }

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: [
+    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',
-      },
-    ],
     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>;
 }