Merge pull request #1212 from DarkFlorist/useSignal

replace useState with useSignal
DarkFlorist · Dec 3, 2024 · 0220158 · 0220158
2 parents f945887 + d750af5
commit 0220158
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/app/ts/components/subcomponents/ChainSelector.tsx b/app/ts/components/subcomponents/ChainSelector.tsx
@@ -1,7 +1,7 @@
-import { useRef, useState } from 'preact/hooks'
+import { useRef } from 'preact/hooks'
 import { clickOutsideAlerter, rpcEntriesToChainEntriesWithAllChainsEntry } from '../ui-utils.js'
 import { ChainEntry, RpcEntries, RpcEntry, RpcNetwork } from '../../types/rpc.js'
-import { ReadonlySignal, Signal, useComputed } from '@preact/signals'
+import { ReadonlySignal, Signal, useComputed, useSignal } from '@preact/signals'
 import { ChainIdWithUniversal } from '../../types/addressBookTypes.js'
 
 interface RpcSelectorParams {
@@ -11,19 +11,19 @@ interface RpcSelectorParams {
 }
 
 export function RpcSelector(params: RpcSelectorParams) {
-	const [isOpen, setIsOpen] = useState(false)
+	const isOpen = useSignal(false)
 
 	const wrapperRef = useRef<HTMLDivElement>(null)
-	clickOutsideAlerter(wrapperRef, () => setIsOpen(false))
+	clickOutsideAlerter(wrapperRef, () => { isOpen.value = false })
 
 	function changeRpc(entry: RpcEntry) {
 		params.changeRpc(entry)
-		setIsOpen(false)
+		isOpen.value = false
 	}
 
-	return <div ref = { wrapperRef } class = { `dropdown ${ isOpen ? 'is-active' : '' }` } style = { { justifyContent: 'end', width: '100%' } }>
+	return <div ref = { wrapperRef } class = { `dropdown ${ isOpen.value ? 'is-active' : '' }` } style = { { justifyContent: 'end', width: '100%' } }>
 		<div class = 'dropdown-trigger' style = { { maxWidth: '100%' } }>
-			<button className = { `button is-primary is-reveal ${ params.rpcNetwork.value === undefined || params.rpcNetwork.value.httpsRpc === undefined ? 'is-danger' : ''}` } aria-haspopup = 'true' aria-controls = 'dropdown-menu' onClick = { () => setIsOpen(!isOpen) } title = { params.rpcNetwork.value === undefined ? 'unknown' : params.rpcNetwork.value.name  } style = { { width: '100%', columnGap: '0.5em' } }>
+			<button className = { `button is-primary is-reveal ${ params.rpcNetwork.value === undefined || params.rpcNetwork.value.httpsRpc === undefined ? 'is-danger' : ''}` } aria-haspopup = 'true' aria-controls = 'dropdown-menu' onClick = { () => { isOpen.value = !isOpen.value } } title = { params.rpcNetwork.value === undefined ? 'unknown' : params.rpcNetwork.value.name  } style = { { width: '100%', columnGap: '0.5em' } }>
 				<span class = 'truncate' style = { { contain: 'content' } }>{ params.rpcNetwork.value === undefined ? 'unknown' : params.rpcNetwork.value.name }</span>
 			</button>
 		</div>
@@ -46,20 +46,20 @@ interface ChainSelectorParams {
 }
 
 export function ChainSelector(params: ChainSelectorParams) {
-	const [isOpen, setIsOpen] = useState(false)
+	const isOpen = useSignal(false)
 	const chains = useComputed(() => rpcEntriesToChainEntriesWithAllChainsEntry(params.rpcEntries.value))
 	const chain = useComputed(() => chains.value.find((chainEntry) => chainEntry.chainId === params.chainId.value))
 	const wrapperRef = useRef<HTMLDivElement>(null)
-	clickOutsideAlerter(wrapperRef, () => setIsOpen(false))
+	clickOutsideAlerter(wrapperRef, () => { isOpen.value = false })
 
 	function changeChain(entry: ChainEntry) {
 		params.changeChain(entry)
-		setIsOpen(false)
+		isOpen.value = false
 	}
 
-	return <div ref = { wrapperRef } class = { `dropdown ${ isOpen ? 'is-active' : '' }` } style = { { width: '100%' } }>
+	return <div ref = { wrapperRef } class = { `dropdown ${ isOpen.value ? 'is-active' : '' }` } style = { { width: '100%' } }>
 		<div class = 'dropdown-trigger' style = { { maxWidth: '100%' } }>
-			<button className = { `button is-primary is-reveal ${ chain.value === undefined ? 'is-danger' : '' }` } aria-haspopup = 'true' aria-controls = 'dropdown-menu' onClick = { () => setIsOpen(!isOpen) } title = { chain.value === undefined ? 'unknown' : chain.value.name  } style = { { width: '100%', columnGap: '0.5em' } }>
+			<button className = { `button is-primary is-reveal ${ chain.value === undefined ? 'is-danger' : '' }` } aria-haspopup = 'true' aria-controls = 'dropdown-menu' onClick = { () => { isOpen.value = !isOpen.value } } title = { chain.value === undefined ? 'unknown' : chain.value.name  } style = { { width: '100%', columnGap: '0.5em' } }>
 				<span class = 'truncate' style = { { contain: 'content' } }>{ chain.value === undefined ? 'unknown' : chain.value.name }</span>
 			</button>
 		</div>