create useDevice hooks, optimize DesktopView and MobileView, and show category API data

2 files changed, 14 insertions, 28 deletions

diff --git a/src/core/components/views/DesktopView.jsx b/src/core/components/views/DesktopView.jsx
index 08c4b310..9042a766 100644
--- a/src/core/components/views/DesktopView.jsx
+++ b/src/core/components/views/DesktopView.jsx
@@ -1,24 +1,17 @@
+import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
 
 const DesktopView = ({ children }) => {
+  const { isDesktop } = useDevice()
   const [view, setView] = useState(<></>)
 
   useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= 768) {
-        setView(children)
-      } else {
-        setView(<></>)
-      }
+    if (isDesktop) {
+      setView(children)
+    } else {
+      setView(<></>)
     }
-
-    handleResize()
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [children])
+  }, [isDesktop, children])
 
   return view
 }
diff --git a/src/core/components/views/MobileView.jsx b/src/core/components/views/MobileView.jsx
index 348572c6..0c8a806c 100644
--- a/src/core/components/views/MobileView.jsx
+++ b/src/core/components/views/MobileView.jsx
@@ -1,24 +1,17 @@
+import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
 
 const MobileView = ({ children }) => {
+  const { isMobile } = useDevice()
   const [view, setView] = useState(<></>)
 
   useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 768) {
-        setView(children)
-      } else {
-        setView(<></>)
-      }
+    if (isMobile) {
+      setView(children)
+    } else {
+      setView(<></>)
     }
-
-    handleResize()
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [children])
+  }, [isMobile, children])
 
   return view
 }