Merge pull request #124 from blockscout/switch-fix

handle switch error

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -9,6 +9,8 @@ import React, { useCallback, useState } from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
 
+import fetch from 'lib/client/fetch';
+import useToast from 'lib/hooks/useToast';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
@@ -22,6 +24,7 @@ interface Props {
 
 const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   const [ notificationEnabled, setNotificationEnabled ] = useState(item.notification_methods.email);
+  const [ switchDisabled, setSwitchDisabled ] = useState(false);
   const onItemEditClick = useCallback(() => {
     return onEditClick(item);
   }, [ item, onEditClick ]);
@@ -30,16 +33,33 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     return onDeleteClick(item);
   }, [ item, onDeleteClick ]);
 
+  const toast = useToast();
+
+  const showToast = useCallback(() => {
+    toast({
+      position: 'top-right',
+      description: 'There has been an error processing your request',
+      colorScheme: 'red',
+      status: 'error',
+      variant: 'subtle',
+      isClosable: true,
+      icon: null,
+    });
+  }, [ toast ]);
+
   const { mutate } = useMutation(() => {
+    setSwitchDisabled(true);
     const data = { ...item, notification_methods: { email: !notificationEnabled } };
-    return fetch(`/api/account/watchlist/${ item.id }`, { method: 'PUT', body: JSON.stringify(data) });
+    setNotificationEnabled(prevState => !prevState);
+    return fetch(`/api/account1/watchlist/${ item.id }`, { method: 'PUT', body: JSON.stringify(data) });
   }, {
     onError: () => {
-      // eslint-disable-next-line no-console
-      console.log('error');
+      showToast();
+      setNotificationEnabled(prevState => !prevState);
+      setSwitchDisabled(false);
     },
     onSuccess: () => {
-      setNotificationEnabled(prevState => !prevState);
+      setSwitchDisabled(false);
     },
   });
 
@@ -57,7 +77,15 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
           </Tag>
         </TruncatedTextTooltip>
       </Td>
-      <Td><Switch colorScheme="blue" size="md" isChecked={ notificationEnabled } onChange={ onSwitch }/></Td>
+      <Td>
+        <Switch
+          colorScheme="blue"
+          size="md"
+          isChecked={ notificationEnabled }
+          onChange={ onSwitch }
+          isDisabled={ switchDisabled }
+        />
+      </Td>
       <Td>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Td>