Unverified Commit 676d1a6f authored by Andrei Eres's avatar Andrei Eres Committed by GitHub
Browse files

Remove extra interface for forgeting keys (#121)

parent cd65d6d2
Pipeline #190168 passed with stages
in 3 minutes and 54 seconds
import { useEffect, useRef, useState } from 'react'
const DEFAULT_COUNTER = 10
export const useTimer = (defaultValue = DEFAULT_COUNTER) => {
const counterInterval = useRef<ReturnType<typeof setInterval>>()
const [value, setValue] = useState(defaultValue)
const started = value < defaultValue
const fired = value === 0
const decreaseValue = () => setValue((v) => v - 1)
const start = () => {
decreaseValue()
counterInterval.current = setInterval(decreaseValue, 1000)
}
const reset = () => {
counterInterval.current && clearInterval(counterInterval.current)
setValue(defaultValue)
}
useEffect(() => {
if (value < 0) reset()
}, [value])
useEffect(
() => () =>
counterInterval.current && clearInterval(counterInterval.current),
[]
)
return { value, defaultValue, start, reset, started, fired }
}
import React, { useEffect } from 'react' import React from 'react'
import { useTimer } from '../../hooks/useTimer'
import { forgetAccount } from '../../messaging/uiActions' import { forgetAccount } from '../../messaging/uiActions'
import { Address } from './Address' import { Address } from './Address'
import { Button } from './Button' import { Button } from './Button'
...@@ -11,44 +10,25 @@ type Props = { ...@@ -11,44 +10,25 @@ type Props = {
} }
export const Key: React.FC<Props> = ({ ...account }) => { export const Key: React.FC<Props> = ({ ...account }) => {
const timer = useTimer() function forget() {
const removing = timer.started forgetAccount(account.address as string).catch(console.error)
}
useEffect(() => {
if (timer.fired)
forgetAccount(account.address as string).catch(console.error)
}, [timer.fired])
return ( return (
<div className='relative group'> <div className='relative group'>
{!removing && ( <Address
<Address address={account.address}
address={account.address} genesisHash={account.genesisHash}
genesisHash={account.genesisHash} name={account.name}
name={account.name} key={account.address}
key={account.address} />
/> <div className='absolute flex top-0 right-2 h-full items-center transition opacity-0 group-hover:opacity-100'>
)} <div className='flex space-x-4'>
{!removing && ( <Button onClick={forget} isDanger>
<div Forget
className='absolute flex top-0 right-2 h-full items-center transition opacity-0 group-hover:opacity-100'
onClick={timer.start}
>
<div className='flex space-x-4'>
<Button isDanger>Forget</Button>
</div>
</div>
)}
{removing && (
<div className='flex items-center justify-between p-2 border-2 border-_bg-300 border-dashed rounded'>
<div className='text-_text-400'>
Removing &ldquo;{account.name}&rdquo;{timer.value}s
</div>
<Button isSecondary onClick={timer.reset}>
Undo
</Button> </Button>
</div> </div>
)} </div>
</div> </div>
) )
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment