fix: input toggles dont use localStorage (#450)

* fix: dont use local storage for text config items

* fix: input toggles dont use localStorage

* fix: input-toggle uses resetKey

* fix: do not use broadcast channels to tell sw to update config

* chore: fix build

* chore: dont set debug var by default

Author: SgtPooki

src/components/local-storage-toggle.css renamed to src/components/input-toggle.css

@@ -0,0 +1,71 @@
+/**
+  Inspiration from https://dev.to/codebubb/create-a-simple-on-off-slide-toggle-with-css-db8
+ */
+import React, { useEffect, useMemo, useState } from 'react'
+import './input-toggle.css'
+import { InputDescription } from './input-description.js'
+import { InputLabel } from './input-label.js'
+
+interface LocalStorageToggleProps {
+  label: string
+  value: boolean
+  description?: string
+  className?: string
+  onClick?: React.MouseEventHandler<HTMLDivElement>
+  onChange(value: boolean): void
+  resetKey: number
+}
+
+export const InputToggle: React.FC<LocalStorageToggleProps> = ({
+  label,
+  description = '',
+  value,
+  resetKey,
+  onChange,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = useState(value)
+
+  useEffect(() => {
+    setInternalValue(value)
+  }, [resetKey, value])
+  /**
+   * Lowercase and no spaces
+   */
+  const id: string = useMemo(() => {
+    return label.toLowerCase().replace(/\s/g, '-')
+  }, [label])
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const newValue = event.target.checked
+    setInternalValue(newValue)
+    onChange(newValue)
+  }
+
+  return (
+    <div {...props} className={`${props.className}`}>
+      <InputLabel label={label} />
+      <InputDescription description={description} />
+
+      <input
+        type="checkbox"
+        id={id}
+        checked={internalValue}
+        onChange={handleChange}
+        className="dn"
+      />
+      <label
+        htmlFor={id}
+        className={`relative dib h1 w2 flex-shrink-0 pointer br4 ${
+          internalValue ? 'bg-green' : 'bg-dark-gray'
+        } transition-all duration-200 ease-in-out`}
+      >
+        <span
+          className={`absolute top-0 left-0 dib h1 w1 br-100 bg-white shadow-1 ${
+            internalValue ? 'translate-x-100' : 'translate-x-0'
+          } transition-transform duration-200 ease-in-out`}
+        />
+      </label>
+    </div>
+  )
+}

src/components/input-toggle.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react'
-import { getConfig, type ConfigDb } from '../lib/config-db.js'
+import { defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, getConfig, resetConfig, type ConfigDb } from '../lib/config-db.js'
 import { isConfigPage } from '../lib/is-config-page.js'
 import { getUiComponentLogger } from '../lib/logger.js'
 
@@ -10,12 +10,14 @@ export interface ConfigContextType extends ConfigDb {
   isConfigExpanded: boolean
   setConfigExpanded(value: boolean): void
   setConfig(key: ConfigKey, value: any): void
+  resetConfig(): Promise<void>
 }
 
 export const ConfigContext = createContext<ConfigContextType>({
   isConfigExpanded: isLoadedInIframe,
   setConfigExpanded: (value: boolean) => {},
   setConfig: (key, value) => {},
+  resetConfig: async () => Promise.resolve(),
   gateways: [],
   routers: [],
   dnsJsonResolvers: {},
@@ -28,30 +30,36 @@ export const ConfigContext = createContext<ConfigContextType>({
 
 export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => {
   const [isConfigExpanded, setConfigExpanded] = useState(isConfigPage(window.location.hash))
-  const [gateways, setGateways] = useState<string[]>([])
-  const [routers, setRouters] = useState<string[]>([])
-  const [dnsJsonResolvers, setDnsJsonResolvers] = useState<Record<string, string>>({})
-  const [enableWss, setEnableWss] = useState(false)
-  const [enableWebTransport, setEnableWebTransport] = useState(false)
-  const [enableGatewayProviders, setEnableGatewayProviders] = useState(false)
-  const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(false)
+  const [gateways, setGateways] = useState<string[]>(defaultGateways)
+  const [routers, setRouters] = useState<string[]>(defaultRouters)
+  const [dnsJsonResolvers, setDnsJsonResolvers] = useState<Record<string, string>>(defaultDnsJsonResolvers)
+  const [enableWss, setEnableWss] = useState(defaultEnableWss)
+  const [enableWebTransport, setEnableWebTransport] = useState(defaultEnableWebTransport)
+  const [enableGatewayProviders, setEnableGatewayProviders] = useState(defaultEnableGatewayProviders)
+  const [enableRecursiveGateways, setEnableRecursiveGateways] = useState(defaultEnableRecursiveGateways)
   const [debug, setDebug] = useState('')
   const isExplicitlyLoadedConfigPage = isConfigPage(window.location.hash)
+  const logger = getUiComponentLogger('config-context')
+  const log = logger.forComponent('main')
+
+  async function loadConfig (): Promise<void> {
+    const config = await getConfig(logger)
+    setGateways(config.gateways)
+    setRouters(config.routers)
+    setDnsJsonResolvers(config.dnsJsonResolvers)
+    setEnableWss(config.enableWss)
+    setEnableWebTransport(config.enableWebTransport)
+    setEnableGatewayProviders(config.enableGatewayProviders)
+    setEnableRecursiveGateways(config.enableRecursiveGateways)
+    setDebug(config.debug)
+  }
   /**
    * We need to make sure that the configDb types are loaded with the values from IDB
    */
   useEffect(() => {
-    void (async () => {
-      const config = await getConfig(getUiComponentLogger('config-context'))
-      setGateways(config.gateways)
-      setRouters(config.routers)
-      setDnsJsonResolvers(config.dnsJsonResolvers)
-      setEnableWss(config.enableWss)
-      setEnableWebTransport(config.enableWebTransport)
-      setEnableGatewayProviders(config.enableGatewayProviders)
-      setEnableRecursiveGateways(config.enableRecursiveGateways)
-      setDebug(config.debug)
-    })()
+    void loadConfig().catch((err) => {
+      log.error('Error loading config', err)
+    })
   }, [])
 
   /**
@@ -84,10 +92,16 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
         setDebug(value)
         break
       default:
+        log.error(`Unknown config key: ${key}`)
         throw new Error(`Unknown config key: ${key}`)
     }
   }, [])
 
+  const resetConfigLocal = async (): Promise<void> => {
+    await resetConfig()
+    await loadConfig()
+  }
+
   const setConfigExpandedWrapped = (value: boolean): void => {
     if (isLoadedInIframe || isExplicitlyLoadedConfigPage) {
       // ignore it
@@ -97,7 +111,7 @@ export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Ele
   }
 
   return (
-    <ConfigContext.Provider value={{ isConfigExpanded, setConfigExpanded: setConfigExpandedWrapped, setConfig: setConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug }}>
+    <ConfigContext.Provider value={{ isConfigExpanded, setConfigExpanded: setConfigExpandedWrapped, setConfig: setConfigLocal, resetConfig: resetConfigLocal, gateways, routers, dnsJsonResolvers, enableWss, enableWebTransport, enableGatewayProviders, enableRecursiveGateways, debug }}>
       {children}
     </ConfigContext.Provider>
   )

src/components/local-storage-toggle.tsx

@@ -4,8 +4,3 @@ export enum COLORS {
   success = '#0cb892',
   error = '#ea5037'
 }
-
-export enum ChannelActions {
-  RELOAD_CONFIG = 'RELOAD_CONFIG',
-  RELOAD_CONFIG_SUCCESS = 'RELOAD_CONFIG_SUCCESS'
-}