From d26133d39e7d9cd510fdc72d239303f4ba918bdd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 11 Mar 2023 13:37:29 +0700
Subject: create useDevice hooks, optimize DesktopView and MobileView, and show
 category API data

---
 src/core/components/views/DesktopView.jsx | 21 +++++++--------------
 src/core/components/views/MobileView.jsx  | 21 +++++++--------------
 2 files changed, 14 insertions(+), 28 deletions(-)

(limited to 'src/core/components/views')

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
 }
-- 
cgit v1.2.3