Merge pull request #8 from tom2drum/edit-address-fix

один модал для всех адресов

components/AddressModal/AddressModal.tsx

-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import {
   Box,
@@ -28,12 +28,18 @@ type Props = {
   data?: TWatchlistItem;
 }
 
-const AddressModal: React.FC<Props> = ({ isOpen, onClose, data = {} as TWatchlistItem }) => {
+const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   // надо чето придумать с формой
   // потом доделаем
-  const [ address, setAddress ] = useState(data.address);
-  const [ tag, setTag ] = useState(data.tag);
-  const [ notification, setNotification ] = useState(data.notification);
+  const [ address, setAddress ] = useState<string>();
+  const [ tag, setTag ] = useState<string>();
+  const [ notification, setNotification ] = useState<boolean>();
+
+  useEffect(() => {
+    setAddress(data?.address);
+    setTag(data?.tag);
+    setNotification(data?.notification);
+  }, [ data ]);
 
   const onAddressChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => setAddress(event.target.value), [ setAddress ]);
   const onTagChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => setTag(event.target.value), [ setTag ]);
@@ -44,12 +50,13 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data = {} as TWatchlis
     console.log(address, tag, notification);
     onClose()
   }, [ address, tag, notification, onClose ]);
+
   return (
     <Modal isOpen={ isOpen } onClose={ onClose } size="md">
       <ModalOverlay/>
       <ModalContent>
         <ModalHeader fontWeight="500">New Address to Watchlist</ModalHeader>
-        <ModalCloseButton color="blue.500"/>
+        <ModalCloseButton/>
         <ModalBody>
           <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.
@@ -58,13 +65,13 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data = {} as TWatchlis
             placeholder="Address (0x...)*"
             marginBottom="20px"
             onChange={ onAddressChange }
-            value={ address }
+            value={ address || '' }
           />
           <Input
             placeholder="Private tag (max 35 characters)*"
             marginBottom="30px"
             onChange={ onTagChange }
-            value={ tag }
+            value={ tag || '' }
           />
           <Text color="gray.600" fontSize="14px" marginBottom="32px">
             Please select what types of notifications you will receive:

components/DeleteModal/DeleteModal.tsx

+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;

components/WatchlistTable/WatchListTableItem.tsx

-import React from 'react';
+import React, { useCallback } from 'react';
 
 import {
   Tag,
@@ -7,37 +7,41 @@ import {
   Switch,
   Icon,
   HStack,
-  useDisclosure,
 } from '@chakra-ui/react'
 
 import { FaEdit, FaTrash } from 'react-icons/fa';
 
 import type { TWatchlistItem } from '../../data/watchlist';
 
-import AddressModal from '../AddressModal/AddressModal';
 import WatchListAddressItem from './WatchListAddressItem';
 
 interface Props {
   item: TWatchlistItem;
+  onEditClick: (data: TWatchlistItem) => void;
+  onDeleteClick: (data: TWatchlistItem) => void;
 }
 
-const WatchlistTableItem = ({ item }: Props) => {
-  const modalProps = useDisclosure();
+const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
+  const onItemEditClick = useCallback(() => {
+    return onEditClick(item);
+  }, [ item, onEditClick ]);
+
+  const onItemDeleteClick = useCallback(() => {
+    return onDeleteClick(item);
+  }, [ item, onDeleteClick ]);
+
   return (
-    <>
-      <Tr alignItems="top" key={ item.address }>
-        <Td><WatchListAddressItem item={ item }/></Td>
-        <Td><Tag>{ item.tag }</Tag></Td>
-        <Td><Switch colorScheme="green" size="md" isChecked={ item.notification }/></Td>
-        <Td>
-          <HStack spacing="30px">
-            <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500" onClick={ modalProps.onOpen }/>
-            <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200"/>
-          </HStack>
-        </Td>
-      </Tr>
-      <AddressModal { ...modalProps } data={ item }/>
-    </>
+    <Tr alignItems="top" key={ item.address }>
+      <Td><WatchListAddressItem item={ item }/></Td>
+      <Td><Tag>{ item.tag }</Tag></Td>
+      <Td><Switch colorScheme="green" size="md" isChecked={ item.notification }/></Td>
+      <Td>
+        <HStack spacing="30px">
+          <Icon as={ FaEdit } w="20px" h="20px" cursor="pointer" color="blue.500" onClick={ onItemEditClick }/>
+          <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200" onClick={ onItemDeleteClick }/>
+        </HStack>
+      </Td>
+    </Tr>
   )
 };
 

components/WatchlistTable/WatchlistTable.tsx

@@ -9,15 +9,17 @@ import {
   TableContainer,
 } from '@chakra-ui/react'
 
-import type { TWatchlist } from '../../data/watchlist';
+import type { TWatchlist, TWatchlistItem } from '../../data/watchlist';
 
 import WatchlistTableItem from './WatchListTableItem';
 
 interface Props {
   data: TWatchlist;
+  onEditClick: (data: TWatchlistItem) => void;
+  onDeleteClick: (data: TWatchlistItem) => void;
 }
 
-const WatchlistTable = ({ data }: Props) => {
+const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
   return (
     <TableContainer width="100%">
       <Table variant="simple">
@@ -30,7 +32,14 @@ const WatchlistTable = ({ data }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { data.map(item => <WatchlistTableItem item={ item } key={ item.address }/>) }
+          { data.map((item) => (
+            <WatchlistTableItem
+              item={ item }
+              key={ item.address }
+              onDeleteClick={ onDeleteClick }
+              onEditClick={ onEditClick }
+            />
+          )) }
         </Tbody>
       </Table>
     </TableContainer>

pages/watchlist.tsx

-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import type { NextPage } from 'next';
 
 import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
@@ -8,15 +8,48 @@ import Page from '../components/Page/Page';
 import WatchlistTable from '../components/WatchlistTable/WatchlistTable';
 import AddressModal from '../components/AddressModal/AddressModal';
 
+import type { TWatchlistItem } from '../data/watchlist';
 import { watchlist } from '../data/watchlist';
+import DeleteModal from '../components/DeleteModal/DeleteModal';
 
 const WatchList: NextPage = () => {
   const addressModalProps = useDisclosure();
+  const deleteModalProps = useDisclosure();
+
+  const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
+  const [ deleteModalData, setDeleteModalData ] = useState<string>();
+
+  const onEditClick = useCallback((data: TWatchlistItem) => {
+    setAddressModalData(data);
+    addressModalProps.onOpen();
+  }, [ addressModalProps ])
+
+  const onAddressModalClose = useCallback(() => {
+    setAddressModalData(undefined);
+    addressModalProps.onClose();
+  }, [ addressModalProps ]);
+
+  const onDeleteClick = useCallback((data: TWatchlistItem) => {
+    setDeleteModalData(data.address);
+    deleteModalProps.onOpen();
+  }, [ deleteModalProps ])
+
+  const onDeleteModalClose = useCallback(() => {
+    setDeleteModalData(undefined);
+    deleteModalProps.onClose();
+  }, [ deleteModalProps ]);
+
   return (
     <Page>
       <Box h="100%">
         <Text marginBottom="40px">An Email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
-        { Boolean(watchlist.length) && <WatchlistTable data={ watchlist }/> }
+        { Boolean(watchlist.length) && (
+          <WatchlistTable
+            data={ watchlist }
+            onDeleteClick={ onDeleteClick }
+            onEditClick={ onEditClick }
+          />
+        ) }
         <Box marginTop="32px">
           <Button
             colorScheme="blue"
@@ -26,7 +59,8 @@ const WatchList: NextPage = () => {
           </Button>
         </Box>
       </Box>
-      <AddressModal { ...addressModalProps }/>
+      <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
+      <DeleteModal { ...deleteModalProps } onClose={ onDeleteModalClose } address={ deleteModalData }/>
     </Page>
   );
 };

theme/components/Modal.ts

@@ -29,6 +29,7 @@ const Modal: ComponentMultiStyleConfig = {
     closeButton: {
       top: '40px',
       right: '40px',
+      color: 'blue.500',
     },
   },
 }