From f915d6fe970f5ff3e04faf414f6c3545de962102 Mon Sep 17 00:00:00 2001
From: Abalaji-Kamalesh <abalaji.kamalesh@freshworks.com>
Date: Wed, 6 Dec 2023 18:44:17 +0530
Subject: [PATCH] refactor: implement more reliable logic for isMobile function

---
 src/hooks/useDetectDevice.ts | 16 ++++++++++++++--
 src/utils/index.ts           | 18 +-----------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/hooks/useDetectDevice.ts b/src/hooks/useDetectDevice.ts
index 590a44c..423bf12 100644
--- a/src/hooks/useDetectDevice.ts
+++ b/src/hooks/useDetectDevice.ts
@@ -1,9 +1,21 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { isMobile } from '../utils';
 
 export const useDetectDevice = () => {
-  const [isMobileDevice] = useState(() => isMobile());
+  const [isMobileDevice, setIsMobileDevice] = useState(() => isMobile());
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobileDevice(isMobile());
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   return isMobileDevice;
 };
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c1bda27..5783daa 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -12,23 +12,7 @@ export const isAllowedCode = (code: string): boolean => {
 };
 
 export const isMobile = () => {
-  const userAgent = navigator.userAgent;
-
-  const mobileUserAgents = [
-    'Android',
-    'iPhone',
-    'iPad',
-    'iPod',
-    'BlackBerry',
-    'Windows Phone',
-  ];
-
-  for (let i = 0; i < mobileUserAgents.length; i++) {
-    if (userAgent.indexOf(mobileUserAgents[i]) !== -1) {
-      return true;
-    }
-  }
-  return false;
+  return window.matchMedia('(max-width: 768px)').matches;
 };
 
 export const generateWord = (n: number): string => {