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

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,6 +50,7 @@ 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/>
@@ -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/WatchlistTable/WatchListTableItem.tsx

@@ -7,37 +7,33 @@ 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: () => void;
+  onDeleteClick: () => void;
 }
 
-const WatchlistTableItem = ({ item }: Props) => {
-  const modalProps = useDisclosure();
+const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   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={ onEditClick }/>
+          <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200" onClick={ onDeleteClick }/>
+        </HStack>
+      </Td>
+    </Tr>
   )
 };
 

components/WatchlistTable/WatchlistTable.tsx

@@ -15,9 +15,11 @@ import WatchlistTableItem from './WatchListTableItem';
 
 interface Props {
   data: TWatchlist;
+  onEditClick: (index: number) => () => void;
+  onDeleteClick: (index: number) => () => 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, index) => (
+            <WatchlistTableItem
+              item={ item }
+              key={ item.address }
+              onDeleteClick={ onDeleteClick(index) }
+              onEditClick={ onEditClick(index) }
+            />
+          )) }
         </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,39 @@ 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';
 
 const WatchList: NextPage = () => {
   const addressModalProps = useDisclosure();
+  const [ data, setData ] = useState<TWatchlistItem>();
+
+  const onEditClick = useCallback((index: number) => () => {
+    setData(watchlist[index]);
+    addressModalProps.onOpen();
+  }, [ addressModalProps ])
+
+  const onDeleteClick = useCallback((index: number) => () => {
+    // eslint-disable-next-line no-console
+    console.log('delete', index);
+  }, [ ])
+
+  const onModalClose = useCallback(() => {
+    setData(undefined);
+    addressModalProps.onClose();
+  }, [ addressModalProps ]);
+
   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 +50,7 @@ const WatchList: NextPage = () => {
           </Button>
         </Box>
       </Box>
-      <AddressModal { ...addressModalProps }/>
+      <AddressModal { ...addressModalProps } onClose={ onModalClose } data={ data }/>
     </Page>
   );
 };