54 lines
2 KiB
TypeScript
54 lines
2 KiB
TypeScript
|
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
|
|||
|
|
import { useModalContext } from "../../../store"
|
|||
|
|
import { useIpStore } from "../../../store"
|
|||
|
|
import { MainButton } from "../../UI/buttons/mainButton"
|
|||
|
|
import {useState} from "react";
|
|||
|
|
import {NetworkService} from "../../../api/request";
|
|||
|
|
import RouterLoader from "../../UI/routerLoader";
|
|||
|
|
import {useTheme} from "styled-components";
|
|||
|
|
|
|||
|
|
type Props={
|
|||
|
|
address: string,
|
|||
|
|
onClose: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const DisconnectConfirm = ({address, onClose}: Props)=>{
|
|||
|
|
const { ipAddress } = useIpStore();
|
|||
|
|
const theme = useTheme()
|
|||
|
|
const [isLoading, setIsLoading] = useState(false);
|
|||
|
|
|
|||
|
|
const handleDisconnect = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
const res = await NetworkService.disconnectNetwork(ipAddress, address);
|
|||
|
|
if(res.status === 200) {
|
|||
|
|
onClose()
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error connection:', error);
|
|||
|
|
}finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return(
|
|||
|
|
<ModalContainer>
|
|||
|
|
<ModalTitle>
|
|||
|
|
<h3>Отключение от Wi-Fi сети</h3>
|
|||
|
|
</ModalTitle>
|
|||
|
|
|
|||
|
|
<ModalContent>
|
|||
|
|
<ModalText>
|
|||
|
|
<h3>Подтверждение отключения</h3>
|
|||
|
|
<p>Вы собираетесь отключиться от сети "{address}". Все активные подключения будут прерваны.</p>
|
|||
|
|
</ModalText>
|
|||
|
|
</ModalContent>
|
|||
|
|
|
|||
|
|
<ButtonContainer>
|
|||
|
|
<MainButton title="Отменить" onClick={onClose} size="small"/>
|
|||
|
|
<MainButton title="Отключиться" color={theme.errorColor} hoverColor={theme.errorColor} onClick={handleDisconnect} size="small"/>
|
|||
|
|
</ButtonContainer>
|
|||
|
|
{isLoading && <RouterLoader loaderText='Отключение от сети'/>}
|
|||
|
|
</ModalContainer>
|
|||
|
|
)
|
|||
|
|
}
|