Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: input toggles dont use localStorage #450

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions src/components/input-toggle.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
76 changes: 0 additions & 76 deletions src/components/local-storage-toggle.tsx

This file was deleted.

54 changes: 34 additions & 20 deletions src/context/config-context.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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: {},
Expand All @@ -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)
})
}, [])

/**
Expand Down Expand Up @@ -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
Expand All @@ -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>
)
Expand Down
120 changes: 0 additions & 120 deletions src/lib/channel.ts

This file was deleted.

5 changes: 0 additions & 5 deletions src/lib/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,3 @@ export enum COLORS {
success = '#0cb892',
error = '#ea5037'
}

export enum ChannelActions {
RELOAD_CONFIG = 'RELOAD_CONFIG',
RELOAD_CONFIG_SUCCESS = 'RELOAD_CONFIG_SUCCESS'
}
Loading
Loading