diff --git a/web/src/components/CloseServer.jsx b/web/src/components/CloseServer.jsx index f652c4f..d444ed5 100644 --- a/web/src/components/CloseServer.jsx +++ b/web/src/components/CloseServer.jsx @@ -6,6 +6,7 @@ import { shutdownHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { isStandaloneApp } from 'utils/Utils' import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick' + import UnsafeButton from './UnsafeButton' export default function CloseServer({ isOffline, isLoading }) { diff --git a/web/src/components/RemoveAll.jsx b/web/src/components/RemoveAll.jsx index faa4874..02bd7b3 100644 --- a/web/src/components/RemoveAll.jsx +++ b/web/src/components/RemoveAll.jsx @@ -6,6 +6,7 @@ import DeleteIcon from '@material-ui/icons/Delete' import { useState } from 'react' import { torrentsHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' + import UnsafeButton from './UnsafeButton' const fnRemoveAll = () => { diff --git a/web/src/components/UnsafeButton.jsx b/web/src/components/UnsafeButton.jsx index 6edd730..a4ae7de 100644 --- a/web/src/components/UnsafeButton.jsx +++ b/web/src/components/UnsafeButton.jsx @@ -1,26 +1,29 @@ -import { Button } from '@material-ui/core'; -import { useEffect, useRef, useState } from 'react'; +import { Button } from '@material-ui/core' +import { useEffect, useState } from 'react' export default function UnsafeButton({ timeout, children, disabled, ...props }) { - const [timeLeft, setTimeLeft] = useState(timeout || 7) - const [buttonDisabled, setButtonDisabled] = useState(disabled || timeLeft > 0) - const handleTimerTick = () => { - const newTimeLeft = timeLeft - 1 - setTimeLeft(newTimeLeft) - if (newTimeLeft <= 0) { - setButtonDisabled(disabled) - } + const [timeLeft, setTimeLeft] = useState(timeout || 7) + const [buttonDisabled, setButtonDisabled] = useState(disabled || timeLeft > 0) + const handleTimerTick = () => { + const newTimeLeft = timeLeft - 1 + setTimeLeft(newTimeLeft) + if (newTimeLeft <= 0) { + setButtonDisabled(disabled) } - const getTimerText = () => !disabled && timeLeft > 0 ? ` (${timeLeft})` : '' - useEffect(() => { - if (disabled || !timeLeft) { return } - const intervalId = setInterval(handleTimerTick, 1000) - return () => clearInterval(intervalId) - }, [timeLeft]) + } + const getTimerText = () => (!disabled && timeLeft > 0 ? ` (${timeLeft})` : '') + useEffect(() => { + if (disabled || !timeLeft) { + return + } + const intervalId = setInterval(handleTimerTick, 1000) + return () => clearInterval(intervalId) + // eslint-disable-next-line + }, [timeLeft]) - return ( - - ) + return ( + + ) }