Merge branch 'dev'

.dockerignore

@@ -0,0 +1,6 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.git

.github/workflows/docker.yml

@@ -41,12 +41,18 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
       - run: yarn install --frozen-lockfile
-      - run: yarn export
+      - run: yarn build
       - name: Cache build output
         uses: actions/cache@v2
         id: restore-build
         with:
-          path: ./out/
+          path: |
+             ./next.config.js
+             ./pages/
+             ./public/
+             ./.next/static/
+             ./.next/standalone/
+             ./packages.jsan
           key: ${{ github.sha }}
 
   docker:
@@ -61,16 +67,20 @@ jobs:
       - uses: actions/cache@v2
         id: restore-build
         with:
-          path: ./out/
+          path: |
+             ./next.config.js
+             ./pages/
+             ./public/
+             ./.next/static/
+             ./.next/standalone/
+             ./packages.jsan
           key: ${{ github.sha }}
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v4
         with:
           # list of Docker images to use as base name for tags
-          images: |
-            ajnart/homarr
-            ghcr.io/ajnart/homarr
+          images: ghcr.io/${{ github.repository }}
           # generate Docker tags based on the following events/attributes
           tags: |
             type=raw,value=latest,enable={{is_default_branch}}
@@ -79,12 +89,6 @@ jobs:
         uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-      - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Login to GHCR
         if: github.event_name != 'pull_request'
         uses: docker/login-action@v2

Dockerfile

@@ -1,2 +1,20 @@
-FROM nginx:alpine
-COPY ./out /usr/share/nginx/html
+FROM node:16-alpine
+WORKDIR /app
+ENV NODE_ENV production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY /next.config.js ./
+COPY  /public ./public
+COPY /package.json ./package.json
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --chown=nextjs:nodejs /.next/standalone ./
+COPY --chown=nextjs:nodejs /.next/static ./.next/static
+
+USER nextjs
+EXPOSE 7575
+ENV PORT 7575
+VOLUME /app/data/configs
+CMD ["node", "server.js"]

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

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/ConfigChanger.tsx

@@ -0,0 +1,37 @@
+import { Center, Loader, Select, Tooltip } 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 (
+      <Center>
+        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+          <Loader />
+        </Tooltip>
+      </Center>
+    );
+  }
+  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
+      }
+    />
+  );
+}

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';
 
@@ -48,7 +49,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>();
@@ -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']}

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 (

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

components/SearchBar/SearchBar.tsx

@@ -48,7 +48,7 @@ export default function SearchBar(props: any) {
           if (isYoutube) {
             window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
           } else if (isTorrent) {
-            window.open(`https://thepiratebay.org/search.php?q=${querry.substring(3)}`);
+            window.open(`https://bitsearch.to/search?q=${querry.substring(3)}`);
           } else {
             window.open(`${querryUrl}${values.querry}`);
           }

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';
 
@@ -28,7 +29,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
@@ -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
@@ -79,6 +79,7 @@ function SettingsMenu(props: any) {
       </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
+      <ConfigChanger />
       <SaveConfigComponent />
       <Text
         style={{

components/modules/calendar/CalendarModule.tsx

@@ -121,6 +121,9 @@ function DayComponent(props: any) {
       {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
       <Popover
         position="left"
+        radius="lg"
+        shadow="xl"
+        transition="pop"
         width={700}
         onClose={() => setOpened(false)}
         opened={opened}

components/modules/calendar/MediaDisplay.tsx

@@ -15,7 +15,14 @@ function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
     <Group noWrap align="self-start" mr={15}>
-      <Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
+      <Image
+        radius="md"
+        fit="cover"
+        src={media.poster}
+        alt={media.title}
+        width={300}
+        height={400}
+      />
       <Stack
         justify="space-between"
         sx={(theme) => ({

components/modules/moduleWrapper.tsx

@@ -20,7 +20,7 @@ export default function ModuleWrapper(props: any) {
       shadow="sm"
       style={{
         // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
       }}
     >
       <module.component />

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

@@ -0,0 +1,16 @@
+{
+  "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"
+    }
+  ],
+  "settings": {
+    "searchBar": true,
+    "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 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/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

@@ -0,0 +1,101 @@
+import { getCookie, setCookies } from 'cookies-next';
+import { GetServerSidePropsContext } from 'next/types';
+import fs from 'fs';
+import path from 'path';
+import { Button, JsonInput, Select, Space } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { Config } from '../tools/types';
+import { useConfig } from '../tools/state';
+
+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 TryConfig(props: any) {
+  const { config: initialConfig }: { config: Config } = props;
+  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);
+  }, [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>
+      <p>
+        Cookie loaded was <code>{initialConfig.name}</code>
+      </p>
+      <JsonInput autosize onChange={setValue} value={value} />
+      <Space my="xl" />
+      <Button onClick={() => getConfigs().then((configs) => setConfigList(configs))}>
+        Get configs
+      </Button>
+      <Space my="xl" />
+      <Select
+        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
+        }
+      />
+      <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

@@ -1,17 +1,20 @@
 // 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;
+  getConfigs: () => Promise<string[]>;
 };
 
 const configContext = createContext<configContextType>({
   config: {
+    name: 'default',
     services: [],
     settings: {
       searchBar: true,
@@ -20,9 +23,8 @@ const configContext = createContext<configContextType>({
     },
   },
   setConfig: () => {},
-  addService: () => {},
-  removeService: () => {},
-  saveConfig: () => {},
+  loadConfig: async (name: string) => {},
+  getConfigs: async () => [],
 });
 
 export function useConfig() {
@@ -39,14 +41,8 @@ type Props = {
 
 export function ConfigProvider({ children }: Props) {
   const [config, setConfigInternal] = useState<Config>({
-    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',
-      },
-    ],
+    name: 'default',
+    services: [],
     settings: {
       searchBar: true,
       searchUrl: 'https://www.google.com/search?q=',
@@ -54,49 +50,45 @@ 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}`);
+      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 setConfig(newconfig: Config) {
+    axios.put(`/api/configs/${newconfig.name}`, newconfig);
+    setConfigInternal(newconfig);
   }
 
-  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));
+  async function getConfigs(): Promise<string[]> {
+    const response = await axios.get('/api/configs');
+    return response.data;
   }
 
   const value = {
     config,
     setConfig,
-    addService,
-    removeService,
-    saveConfig,
+    loadConfig,
+    getConfigs,
   };
-  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"