notificationClient: Destroy socket connection when window is not in f…

…ocus

src/components/client/layout/NotificationSnackBar/NotificationSnackBar.tsx

@@ -9,6 +9,7 @@ import {
 import DonationNotificationLayout from './DonationNotificationLayout'
 import { NotificationLayoutData } from 'components/client/layout/NotificationSnackBar/DonationNotificationLayout'
 import notificationClient from 'common/util/notificationClient'
+import { useIsWindowInFocus } from 'service/visibilityApi'
 
 function NotificationSnackBar({
   mainProps,
@@ -19,17 +20,23 @@ function NotificationSnackBar({
 }) {
   const [open, setOpen] = useState(true)
   const [notifications, setNotifications] = useState<NotificationLayoutData[]>([])
+  const isWindowInFocus = useIsWindowInFocus()
 
   useEffect(() => {
-    if (!notificationClient.connected) notificationClient.connect()
+    console.log(isWindowInFocus)
+    if (isWindowInFocus && !notificationClient.connected) notificationClient.connect()
+    if (!isWindowInFocus && notificationClient.connected) {
+      notificationClient.disconnect()
+      return
+    }
     notificationClient.on('successfulDonation', (notificationData: NotificationLayoutData) => {
       setNotifications((prevState) => [...prevState, notificationData])
     })
 
     return () => {
       notificationClient.off('successfulDonation')
     }
-  }, [])
+  }, [isWindowInFocus])
 
   const handleSnackBarClose = (
     _event: React.SyntheticEvent | Event,

src/service/visibilityApi.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+export function useIsWindowInFocus() {
+  const [isWindowInFocus, setIsWindowInFocus] = useState(true)
+
+  function handleVisibilityChange() {
+    setIsWindowInFocus(!document.hidden)
+  }
+
+  useEffect(() => {
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [])
+
+  return isWindowInFocus
+}