handle switch error

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -10,6 +10,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 DeleteButton from 'ui/shared/DeleteButton';
 import EditButton from 'ui/shared/EditButton';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -24,6 +26,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 ]);
@@ -32,16 +35,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);
     },
   });
 
@@ -59,7 +79,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>
         <HStack spacing={ 6 }>
           <EditButton onClick={ onItemEditClick }/>