Rename Service provider to a Config provider

tools/state.tsx

@@ -1,25 +1,33 @@
 // src/context/state.js
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { serviceItem } from './types';
+import { Config, serviceItem } from './types';
 
-type servicesContextType = {
+type configContextType = {
-  services: serviceItem[];
+  config: Config;
-  setServicesState: (services: serviceItem[]) => void;
+  setConfig: (newconfig: Config) => void;
   addService: (service: serviceItem) => void;
   removeService: (name: string) => void;
+  saveConfig: (newconfig: Config) => void;
 };
 
-const servicesContext = createContext<servicesContextType>({
+const configContext = createContext<configContextType>({
-  services: [],
+  config: {
-  setServicesState: () => {},
+    services: [],
+    settings: {
+      searchBar: true,
+      searchUrl: 'https://www.google.com/search?q=',
+    },
+  },
+  setConfig: () => {},
   addService: () => {},
   removeService: () => {},
+  saveConfig: () => {},
 });
 
-export function useServices() {
+export function useConfig() {
-  const context = useContext(servicesContext);
+  const context = useContext(configContext);
   if (context === undefined) {
-    throw new Error('useServices must be used within a ServicesProvider');
+    throw new Error('useConfig must be used within a ConfigProvider');
   }
   return context;
 }
@@ -28,40 +36,65 @@ type Props = {
   children: ReactNode;
 };
 
-export function ServicesProvider({ children }: Props) {
+export function ConfigProvider({ children }: Props) {
-  const [services, setServices] = useState<serviceItem[]>([
+  const [config, setConfigInternal] = useState<Config>({
-    {
+    services: [
-      type: 'Other',
+      {
-      name: 'example',
+        type: 'Other',
-      icon: 'https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif',
+        name: 'example',
-      url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        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=',
     },
-  ]);
+  });
 
-  function setServicesState(services: serviceItem[]) {
+  function setConfig(newConfig: Config) {
-    setServices(services);
+    setConfigInternal(newConfig);
-    localStorage.setItem('services', JSON.stringify(services));
+    saveConfig(newConfig);
   }
 
   function addService(item: serviceItem) {
-    setServices([...services, item]);
+    setConfigInternal({
-    localStorage.setItem('services', JSON.stringify([...services, item]));
+      ...config,
+      services: [...config.services, item],
+    });
+    saveConfig({
+      ...config,
+      services: [...config.services, item],
+    });
   }
 
   function removeService(name: string) {
-    setServices(services.filter((s) => s.name !== name));
+    // Remove the service with name in config item
-    localStorage.setItem('services', JSON.stringify(services.filter((s) => s.name !== name)));
+    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));
   }
 
   const value = {
-    services,
+    config,
-    setServicesState,
+    setConfig,
     addService,
     removeService,
+    saveConfig,
   };
   return (
     <>
-      <servicesContext.Provider value={value}>{children}</servicesContext.Provider>
+      <configContext.Provider value={value}>{children}</configContext.Provider>
     </>
   );
 }