refactor(web): dependency management (#2386)

packages/web/src/javascripts/Hooks/useIsTabletOrMobileScreen.tsx

@@ -1,28 +1,12 @@
-import { WebApplication } from '@/Application/WebApplication'
+import { IsTabletOrMobileScreen } from '@/Application/UseCase/IsTabletOrMobileScreen'
 import { useApplication } from '@/Components/ApplicationProvider'
-import { debounce, isMobileScreen, isTabletOrMobileScreen, isTabletScreen } from '@/Utils'
-import { useEffect, useState } from 'react'
-
-export function getIsTabletOrMobileScreen(application: WebApplication) {
-  const isNativeMobile = application.isNativeMobileWeb()
-  const isTabletOrMobile = isTabletOrMobileScreen() || isNativeMobile
-  const isTablet = isTabletScreen() || (isNativeMobile && !isMobileScreen())
-  const isMobile = isMobileScreen() || (isNativeMobile && !isTablet)
-
-  if (isTablet && isMobile) {
-    throw Error('isTablet and isMobile cannot both be true')
-  }
-
-  return {
-    isTabletOrMobile,
-    isTablet,
-    isMobile,
-  }
-}
+import { debounce } from '@/Utils'
+import { useEffect, useMemo, useState } from 'react'
 
 export default function useIsTabletOrMobileScreen() {
   const [_windowSize, setWindowSize] = useState(0)
   const application = useApplication()
+  const usecase = useMemo(() => new IsTabletOrMobileScreen(application.environment), [application])
 
   useEffect(() => {
     const handleResize = debounce(() => {
@@ -37,5 +21,6 @@ export default function useIsTabletOrMobileScreen() {
     }
   }, [])
 
-  return getIsTabletOrMobileScreen(application)
+  const isTabletOrMobileScreen = usecase.execute().getValue()
+  return isTabletOrMobileScreen
 }