notifications switch: fixes, add toast

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -4,6 +4,8 @@ import React, { useCallback, useState } from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
 
+import useFetch from 'lib/hooks/useFetch';
+import useToast from 'lib/hooks/useToast';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
@@ -17,6 +19,7 @@ interface Props {
 
 const WatchListItem = ({ 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 ]);
@@ -25,16 +28,49 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     return onDeleteClick(item);
   }, [ item, onDeleteClick ]);
 
+  const errorToast = useToast();
+  const fetch = useFetch();
+
+  const showErrorToast = useCallback(() => {
+    errorToast({
+      position: 'top-right',
+      description: 'There has been an error processing your request',
+      colorScheme: 'red',
+      status: 'error',
+      variant: 'subtle',
+      isClosable: true,
+      icon: null,
+    });
+  }, [ errorToast ]);
+
+  const notificationToast = useToast();
+  const showNotificationToast = useCallback((isOn: boolean) => {
+    notificationToast({
+      position: 'top-right',
+      description: isOn ? 'Email notification is ON' : 'Email notification is OFF',
+      colorScheme: 'green',
+      status: 'success',
+      variant: 'subtle',
+      title: 'Success',
+      isClosable: true,
+      icon: null,
+    });
+  }, [ notificationToast ]);
+
   const { mutate } = useMutation(() => {
-    const data = { ...item, notification_methods: { email: !notificationEnabled } };
-    return fetch(`/node-api/account/watchlist/${ item.id }`, { method: 'PUT', body: JSON.stringify(data) });
+    setSwitchDisabled(true);
+    const body = { ...item, notification_methods: { email: !notificationEnabled } };
+    setNotificationEnabled(prevState => !prevState);
+    return fetch(`/node-api/account/watchlist/${ item.id }`, { method: 'PUT', body });
   }, {
     onError: () => {
-      // eslint-disable-next-line no-console
-      console.log('error');
+      showErrorToast();
+      setNotificationEnabled(prevState => !prevState);
+      setSwitchDisabled(false);
     },
     onSuccess: () => {
-      setNotificationEnabled(prevState => !prevState);
+      setSwitchDisabled(false);
+      showNotificationToast(!notificationEnabled);
     },
   });
 
@@ -56,7 +92,14 @@ const WatchListItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       <Flex alignItems="center" justifyContent="space-between" mt={ 6 } w="100%">
         <HStack spacing={ 3 }>
           <Text fontSize="sm" fontWeight={ 500 }>Email notification</Text>
-          <Switch colorScheme="blue" size="md" isChecked={ notificationEnabled } onChange={ onSwitch } aria-label="Email notification"/>
+          <Switch
+            colorScheme="blue"
+            size="md"
+            isChecked={ notificationEnabled }
+            onChange={ onSwitch }
+            aria-label="Email notification"
+            isDisabled={ switchDisabled }
+          />
         </HStack>
         <TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick }/>
       </Flex>

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -33,11 +33,11 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     return onDeleteClick(item);
   }, [ item, onDeleteClick ]);
 
-  const toast = useToast();
+  const errorToast = useToast();
   const fetch = useFetch();
 
-  const showToast = useCallback(() => {
-    toast({
+  const showErrorToast = useCallback(() => {
+    errorToast({
       position: 'top-right',
       description: 'There has been an error processing your request',
       colorScheme: 'red',
@@ -46,7 +46,21 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
       isClosable: true,
       icon: null,
     });
-  }, [ toast ]);
+  }, [ errorToast ]);
+
+  const notificationToast = useToast();
+  const showNotificationToast = useCallback((isOn: boolean) => {
+    notificationToast({
+      position: 'top-right',
+      description: isOn ? 'Email notification is ON' : 'Email notification is OFF',
+      colorScheme: 'green',
+      status: 'success',
+      variant: 'subtle',
+      title: 'Success',
+      isClosable: true,
+      icon: null,
+    });
+  }, [ notificationToast ]);
 
   const { mutate } = useMutation(() => {
     setSwitchDisabled(true);
@@ -55,12 +69,13 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
     return fetch(`/node-api/account/watchlist/${ item.id }`, { method: 'PUT', body });
   }, {
     onError: () => {
-      showToast();
+      showErrorToast();
       setNotificationEnabled(prevState => !prevState);
       setSwitchDisabled(false);
     },
     onSuccess: () => {
       setSwitchDisabled(false);
+      showNotificationToast(!notificationEnabled);
     },
   });