Use Config provider everywhere in app

We can now load as much data as we want in the services and settings values. This solves the issue of using multiple localStorages boxes

components/AppShelf/AddAppShelfItem.tsx

@@ -17,7 +17,7 @@ import { useForm } from '@mantine/hooks';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
-import { ServiceTypes } from '../../tools/types';
+import { ServiceType, ServiceTypeList } from '../../tools/types';
 
 export default function AddItemShelfItem(props: any) {
   const { additem: addItem } = props;
@@ -94,7 +94,7 @@ export default function AddItemShelfItem(props: any) {
               required
               searchable
               onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
-              data={ServiceTypes}
+              data={ServiceTypeList}
             />
           </Group>
 

components/AppShelf/AppShelf.tsx

@@ -15,8 +15,9 @@ import { showNotification } from '@mantine/notifications';
 import { AlertCircle, Cross, X } from 'tabler-icons-react';
 import AppShelfMenu from './AppShelfMenu';
 import AddItemShelfItem from './AddAppShelfItem';
-import { useServices } from '../../tools/state';
+import { useConfig } from '../../tools/state';
 import { pingQbittorrent } from '../../tools/api';
+import { Config } from '../../tools/types';
 
 const useStyles = createStyles((theme) => ({
   main: {
@@ -32,52 +33,57 @@ const useStyles = createStyles((theme) => ({
 }));
 
 const AppShelf = (props: any) => {
-  const { services, addService, removeService, setServicesState } = useServices();
+  const { config, addService, removeService, setConfig } = useConfig();
   const { classes } = useStyles();
   const [hovering, setHovering] = useState('none');
 
+  /* A hook that is used to load the config from local storage. */
   useEffect(() => {
-    const localServices = localStorage.getItem('services');
-    if (localServices) {
-      setServicesState(JSON.parse(localServices));
+    const localConfig = localStorage.getItem('config');
+    if (localConfig) {
+      setConfig(JSON.parse(localConfig));
     }
   }, []);
-  services.forEach((service) => {
-    if (service.type === 'qBittorrent') {
-      pingQbittorrent(service);
-    }
-  });
+  if (config.services && config.services.length === 0) {
+    config.services.forEach((service) => {
+      if (service.type === 'qBittorrent') {
+        pingQbittorrent(service);
+      }
+    });
+  }
 
   return (
     <Grid m="xl" gutter="xl">
-      {services.map((service, i) => (
-        <Grid.Col lg={2} sm={3} key={i}>
-          <motion.div
-            onHoverStart={(e) => {
-              setHovering(service.name);
-            }}
-            onHoverEnd={(e) => {
-              setHovering('none');
-            }}
-          >
-            <AspectRatio ratio={4 / 3}>
-              <Box className={classes.main}>
-                <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
-                  <AppShelfMenu removeitem={removeService} name={service.name} />
-                </motion.div>
-                <Group direction="column" position="center">
-                  <Anchor href={service.url} target="_blank">
-                    <motion.div whileHover={{ scale: 1.2 }}>
-                      <Image style={{ maxWidth: 60 }} src={service.icon} alt={service.name} />
+      {config.services
+        ? config.services.map((service, i) => (
+            <Grid.Col lg={2} sm={3} key={i}>
+              <motion.div
+                onHoverStart={(e) => {
+                  setHovering(service.name);
+                }}
+                onHoverEnd={(e) => {
+                  setHovering('none');
+                }}
+              >
+                <AspectRatio ratio={4 / 3}>
+                  <Box className={classes.main}>
+                    <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
+                      <AppShelfMenu removeitem={removeService} name={service.name} />
                     </motion.div>
-                  </Anchor>
-                  <Text>{service.name}</Text>
-                </Group>
-              </Box>
-            </AspectRatio>
-          </motion.div>
-        </Grid.Col>
-      ))}
+                    <Group direction="column" position="center">
+                      <Anchor href={service.url} target="_blank">
+                        <motion.div whileHover={{ scale: 1.2 }}>
+                          <Image style={{ maxWidth: 60 }} src={service.icon} alt={service.name} />
+                        </motion.div>
+                      </Anchor>
+                      <Text>{service.name}</Text>
+                    </Group>
+                  </Box>
+                </AspectRatio>
+              </motion.div>
+            </Grid.Col>
+          ))
+        : null}
       <AddItemShelfItem additem={addService} />
     </Grid>
   );