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