Commit cb7f22e6 authored by tom goriunov's avatar tom goriunov Committed by GitHub

Merge pull request #9 from tom2drum/delete-modal

parents 9b7ff858 7dbac82e
...@@ -56,7 +56,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => { ...@@ -56,7 +56,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
<ModalOverlay/> <ModalOverlay/>
<ModalContent> <ModalContent>
<ModalHeader fontWeight="500">New Address to Watchlist</ModalHeader> <ModalHeader fontWeight="500">New Address to Watchlist</ModalHeader>
<ModalCloseButton color="blue.500"/> <ModalCloseButton/>
<ModalBody> <ModalBody>
<Text lineHeight="30px" marginBottom="40px"> <Text lineHeight="30px" marginBottom="40px">
An Email notification can be sent to you when an address on your watch list sends or receives any transactions. An Email notification can be sent to you when an address on your watch list sends or receives any transactions.
......
import React, { useCallback } from 'react';
import {
Button,
Modal,
ModalOverlay,
ModalContent,
ModalFooter,
ModalBody,
ModalCloseButton,
} from '@chakra-ui/react';
type Props = {
isOpen: boolean;
onClose: () => void;
getDisclosureProps: () => any;
address?: string;
}
const DeleteModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
const onDeleteClick = useCallback(() => {
// eslint-disable-next-line no-console
console.log('delete ', address);
onClose()
}, [ address, onClose ]);
return (
<Modal isOpen={ isOpen } onClose={ onClose } size="md">
<ModalOverlay/>
<ModalContent>
<ModalCloseButton/>
<ModalBody>
{ `Delete ${ address || 'address' } from watchlist?` }
</ModalBody>
<ModalFooter>
<Button variant="ghost" onClick={ onDeleteClick }>Yes</Button>
<Button colorScheme="blue" ml={ 3 } onClick={ onClose }>
No
</Button>
</ModalFooter>
</ModalContent>
</Modal>
)
}
export default DeleteModal;
...@@ -10,26 +10,35 @@ import AddressModal from '../components/AddressModal/AddressModal'; ...@@ -10,26 +10,35 @@ import AddressModal from '../components/AddressModal/AddressModal';
import type { TWatchlistItem } from '../data/watchlist'; import type { TWatchlistItem } from '../data/watchlist';
import { watchlist } from '../data/watchlist'; import { watchlist } from '../data/watchlist';
import DeleteModal from '../components/DeleteModal/DeleteModal';
const WatchList: NextPage = () => { const WatchList: NextPage = () => {
const addressModalProps = useDisclosure(); const addressModalProps = useDisclosure();
const [ data, setData ] = useState<TWatchlistItem>(); const deleteModalProps = useDisclosure();
const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
const [ deleteModalData, setDeleteModalData ] = useState<string>();
const onEditClick = useCallback((index: number) => () => { const onEditClick = useCallback((index: number) => () => {
setData(watchlist[index]); setAddressModalData(watchlist[index]);
addressModalProps.onOpen(); addressModalProps.onOpen();
}, [ addressModalProps ]) }, [ addressModalProps ])
const onDeleteClick = useCallback((index: number) => () => { const onAddressModalClose = useCallback(() => {
// eslint-disable-next-line no-console setAddressModalData(undefined);
console.log('delete', index);
}, [ ])
const onModalClose = useCallback(() => {
setData(undefined);
addressModalProps.onClose(); addressModalProps.onClose();
}, [ addressModalProps ]); }, [ addressModalProps ]);
const onDeleteClick = useCallback((index: number) => () => {
setDeleteModalData(watchlist[index]?.address);
deleteModalProps.onOpen();
}, [ deleteModalProps ])
const onDeleteModalClose = useCallback(() => {
setDeleteModalData(undefined);
deleteModalProps.onClose();
}, [ deleteModalProps ]);
return ( return (
<Page> <Page>
<Box h="100%"> <Box h="100%">
...@@ -50,7 +59,8 @@ const WatchList: NextPage = () => { ...@@ -50,7 +59,8 @@ const WatchList: NextPage = () => {
</Button> </Button>
</Box> </Box>
</Box> </Box>
<AddressModal { ...addressModalProps } onClose={ onModalClose } data={ data }/> <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
<DeleteModal { ...deleteModalProps } onClose={ onDeleteModalClose } address={ deleteModalData }/>
</Page> </Page>
); );
}; };
......
...@@ -29,6 +29,7 @@ const Modal: ComponentMultiStyleConfig = { ...@@ -29,6 +29,7 @@ const Modal: ComponentMultiStyleConfig = {
closeButton: { closeButton: {
top: '40px', top: '40px',
right: '40px', right: '40px',
color: 'blue.500',
}, },
}, },
} }
......
Markdown is supported
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