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

components/AddAddressModal/AddAddressModal.tsx → components/AddressModal/AddressModal.tsx

-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 import {
   Box,
@@ -17,14 +17,33 @@ import {
   GridItem,
 } from '@chakra-ui/react';
 
+import type { TWatchlistItem } from '../../data/watchlist';
+
 const NOTIFICATIONS = [ 'xDAI', 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
+  getDisclosureProps: () => any;
+  data?: TWatchlistItem;
 }
 
-const AddAddressModal: React.FC<Props> = ({ isOpen, onClose }) => {
+const AddressModal: React.FC<Props> = ({ isOpen, onClose, data = {} as TWatchlistItem }) => {
+  // надо чето придумать с формой
+  // потом доделаем
+  const [ address, setAddress ] = useState(data.address);
+  const [ tag, setTag ] = useState(data.tag);
+  const [ notification, setNotification ] = useState(data.notification);
+
+  const onAddressChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => setAddress(event.target.value), [ setAddress ]);
+  const onTagChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => setTag(event.target.value), [ setTag ]);
+  const onNotificationChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => setNotification(event.target.checked), [ setNotification ]);
+
+  const onButtonClick = useCallback(() => {
+    // eslint-disable-next-line no-console
+    console.log(address, tag, notification);
+    onClose()
+  }, [ address, tag, notification, onClose ]);
   return (
     <Modal isOpen={ isOpen } onClose={ onClose } size="md">
       <ModalOverlay/>
@@ -35,8 +54,18 @@ const AddAddressModal: React.FC<Props> = ({ isOpen, onClose }) => {
           <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.
           </Text>
-          <Input placeholder="Address (0x...)*" marginBottom="20px"/>
-          <Input placeholder="Private tag (max 35 characters)*" marginBottom="30px"/>
+          <Input
+            placeholder="Address (0x...)*"
+            marginBottom="20px"
+            onChange={ onAddressChange }
+            value={ address }
+          />
+          <Input
+            placeholder="Private tag (max 35 characters)*"
+            marginBottom="30px"
+            onChange={ onTagChange }
+            value={ tag }
+          />
           <Text color="gray.600" fontSize="14px" marginBottom="32px">
             Please select what types of notifications you will receive:
           </Text>
@@ -54,11 +83,17 @@ const AddAddressModal: React.FC<Props> = ({ isOpen, onClose }) => {
             </Grid>
           </Box>
           <Text color="gray.600" fontSize="14px" marginBottom="20px">Notification methods:</Text>
-          <Checkbox defaultChecked colorScheme="green">Email notifications</Checkbox>
+          <Checkbox
+            defaultChecked={ notification }
+            colorScheme="green"
+            onChange={ onNotificationChange }
+          >
+            Email notifications
+          </Checkbox>
         </ModalBody>
 
         <ModalFooter justifyContent="flex-start">
-          <Button colorScheme="blue" onClick={ onClose }>
+          <Button colorScheme="blue" onClick={ onButtonClick }>
             Add address
           </Button>
         </ModalFooter>
@@ -67,4 +102,4 @@ const AddAddressModal: React.FC<Props> = ({ isOpen, onClose }) => {
   )
 }
 
-export default AddAddressModal;
+export default AddressModal;

components/WatchlistTable/WatchListTableItem.tsx

+import React from 'react';
+
+import {
+  Tag,
+  Tr,
+  Td,
+  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;
+}
+
+const WatchlistTableItem = ({ item }: Props) => {
+  const modalProps = useDisclosure();
+  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 }/>
+    </>
+  )
+};
+
+export default WatchlistTableItem;

components/WatchlistTable/WatchlistTable.tsx

 import React from 'react';
 
 import {
-  Tag,
   Table,
   Thead,
   Tbody,
   Tr,
   Th,
-  Td,
   TableContainer,
-  Switch,
-  Icon,
-  HStack,
 } from '@chakra-ui/react'
-import { FaEdit, FaTrash } from 'react-icons/fa';
 
 import type { TWatchlist } from '../../data/watchlist';
 
-import WatchListAddressItem from './WatchListAddressItem';
+import WatchlistTableItem from './WatchListTableItem';
 
 interface Props {
   data: TWatchlist;
@@ -36,21 +30,7 @@ const WatchlistTable = ({ data }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { data.map(item => {
-            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"/>
-                    <Icon as={ FaTrash } w="20px" h="20px" cursor="pointer" color="red.200"/>
-                  </HStack>
-                </Td>
-              </Tr>
-            )
-          }) }
+          { data.map(item => <WatchlistTableItem item={ item } key={ item.address }/>) }
         </Tbody>
       </Table>
     </TableContainer>

pages/watchlist.tsx

@@ -6,12 +6,12 @@ import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
 import Page from '../components/Page/Page';
 
 import WatchlistTable from '../components/WatchlistTable/WatchlistTable';
-import AddAddressModal from '../components/AddAddressModal/AddAddressModal';
+import AddressModal from '../components/AddressModal/AddressModal';
 
 import { watchlist } from '../data/watchlist';
 
 const WatchList: NextPage = () => {
-  const addModalProps = useDisclosure()
+  const addressModalProps = useDisclosure();
   return (
     <Page>
       <Box h="100%">
@@ -20,13 +20,13 @@ const WatchList: NextPage = () => {
         <Box marginTop="32px">
           <Button
             colorScheme="blue"
-            onClick={ addModalProps.onOpen }
+            onClick={ addressModalProps.onOpen }
           >
             Add address
           </Button>
         </Box>
       </Box>
-      <AddAddressModal { ...addModalProps }/>
+      <AddressModal { ...addressModalProps }/>
     </Page>
   );
 };