feat(socket_event): created new event for check user internet connect…

…ivity (#69)

docs/EVENTS.md

@@ -128,6 +128,12 @@ eventDispatch(`<event-name>`, `<data-object>`)
   }
   ```
 
+- `phone-island-check-connection` The event to manually check user internet connection
+
+  ```json
+  {}
+  ```
+
 ## Dispatch Phone-Island Events - phone-island-*
 
 - `phone-island-expanded` The dispatch of phone-island expand
@@ -885,3 +891,15 @@ eventDispatch(`<event-name>`, `<data-object>`)
     "id": "91204"
   }
   ```
+
+- `phone-island-internet-connected` Indicates that user has internet connectivity enabled
+
+  ```json
+  {}
+  ```
+
+- `phone-island-internet-disconnected` Indicates that user has internet connectivity disabled
+
+  ```json
+  {}
+  ```

src/App.tsx

@@ -13,6 +13,7 @@ import { detach } from './lib/webrtc/messages'
 import { checkDarkTheme, setTheme } from './lib/darkTheme'
 import { changeOperatorStatus } from './services/user'
 import { isEmpty } from './utils/genericFunctions/isEmpty'
+import { checkInternetConnection } from './utils/genericFunctions/checkConnection'
 
 interface PhoneIslandProps {
   dataConfig: string
@@ -169,6 +170,32 @@ export const PhoneIsland: FC<PhoneIslandProps> = ({
     store.dispatch.alerts.setAlert(alertType.toString())
   })
 
+  // Manually check if internet connection is enabled or not
+  useEventListener('phone-island-check-connection', () => {
+    checkInternetConnection().then((internetIsActive) => {
+      if (internetIsActive) {
+        eventDispatch('phone-island-internet-connected', {})
+      } else {
+        eventDispatch('phone-island-internet-disconnected', {})
+      }
+    })
+  })
+
+  // Check internet connection every 5 seconds
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      checkInternetConnection().then((internetIsActive) => {
+        if (internetIsActive) {
+          eventDispatch('phone-island-internet-connected', {})
+        } else {
+          eventDispatch('phone-island-internet-disconnected', {})
+        }
+      })
+    }, 5000)
+
+    return () => clearInterval(intervalId)
+  }, [])
+
   useEventListener('phone-island-main-presence', (data: any) => {
     const currentUsernameInformation: any = store.getState().currentUser?.username
     const currentUserObject: any = store.getState().currentUser

src/stories/Call.stories.tsx

@@ -4,7 +4,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import React, { useEffect, useState } from 'react'
 import { PhoneIsland } from '../App'
-import { classNames, eventDispatch, useEventListener } from '../utils'
+import { eventDispatch, useEventListener } from '../utils'
 import { store } from '../store'
 import { Button } from '../components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -15,6 +15,7 @@ import {
   faPhone,
   faSun,
   faTimes,
+  faWifi,
 } from '@fortawesome/free-solid-svg-icons'
 import { t } from 'i18next'
 import { faGridRound } from '@nethesis/nethesis-solid-svg-icons'
@@ -240,6 +241,10 @@ const CallTemplate = (args: any) => {
 
   const [alert, setAlert] = useState('')
 
+  const handleInternetConnectionCheck = () => {
+    eventDispatch('phone-island-check-connection', {})
+  }
+
   return (
     <>
       <div className='pi-flex pi-flex-col pi-gap-4 pi-w-full pi-max-w-lg pi-mx-auto pi-p-6 pi-bg-gray-100 pi-rounded-lg pi-overflow-auto pi-mt-4'>
@@ -397,6 +402,14 @@ const CallTemplate = (args: any) => {
                 >
                   <FontAwesomeIcon size='xl' icon={faDownLeftAndUpRightToCenter} />
                 </Button>
+
+                <Button
+                  variant='default'
+                  onClick={() => handleInternetConnectionCheck()}
+                  className='pi-ml-2'
+                >
+                  <FontAwesomeIcon size='xl' icon={faWifi} />
+                </Button>
               </div>
               {showKeyboards && (
                 <div className='pi-flex pi-justify-center pi-my-4'>{renderDtmfKeypad()}</div>

src/utils/genericFunctions/checkConnection.ts

@@ -0,0 +1,12 @@
+// Copyright (C) 2024 Nethesis S.r.l.
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// launch a fetch to google to check if the connection is available
+export const checkInternetConnection = async () => {
+  try {
+    const response = await fetch('https://www.google.com', { mode: 'no-cors' })
+    return true
+  } catch (error) {
+    return false
+  }
+}