refactor(web): dependency management (#2386)

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

@@ -1,6 +1,6 @@
-import { isIOS } from '@/Utils'
 import { RefObject, useCallback, useEffect } from 'react'
 import { useLongPressEvent } from './useLongPress'
+import { isIOS } from '@standardnotes/ui-services'
 
 export const useContextMenuEvent = (elementRef: RefObject<HTMLElement>, listener: (x: number, y: number) => void) => {
   const { attachEvents, cleanupEvents } = useLongPressEvent(elementRef, listener)

packages/web/src/javascripts/Hooks/useDocumentRect.ts

@@ -1,4 +1,4 @@
-import { isIOS } from '@/Utils'
+import { isIOS } from '@standardnotes/ui-services'
 import { useEffect, useState } from 'react'
 
 const DebounceTimeInMs = 100

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
 }

packages/web/src/javascripts/Hooks/useItem.ts

@@ -12,7 +12,7 @@ const useItem = <T extends DecryptedItemInterface>(uuid: string | undefined) =>
       return
     }
 
-    const live = new LiveItem<T>(uuid, application, (item) => {
+    const live = new LiveItem<T>(uuid, application.items, (item) => {
       setItem(item)
     })
 

packages/web/src/javascripts/Hooks/useItemLinks.ts

@@ -17,7 +17,7 @@ export const useItemLinks = (item: DecryptedItem | undefined) => {
 
   useEffect(
     () =>
-      application.streamItems([ContentType.TYPES.Note, ContentType.TYPES.File, ContentType.TYPES.Tag], () => {
+      application.items.streamItems([ContentType.TYPES.Note, ContentType.TYPES.File, ContentType.TYPES.Tag], () => {
         refresh(Date.now())
       }),
     [application],

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

@@ -2,7 +2,6 @@ import { WebApplication } from '@/Application/WebApplication'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, createContext, useCallback, useContext, ReactNode } from 'react'
 import PremiumFeaturesModal from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
-import { FeaturesController } from '@/Controllers/FeaturesController'
 
 type PremiumModalContextData = {
   activate: (featureName: string) => void
@@ -24,53 +23,46 @@ export const usePremiumModal = (): PremiumModalContextData => {
 
 interface Props {
   application: WebApplication
-  featuresController: FeaturesController
   children: ReactNode
 }
 
-const PremiumModalProvider: FunctionComponent<Props> = observer(
-  ({ application, featuresController, children }: Props) => {
-    const featureName = featuresController.premiumAlertFeatureName || ''
+const PremiumModalProvider: FunctionComponent<Props> = observer(({ application, children }: Props) => {
+  const featureName = application.featuresController.premiumAlertFeatureName || ''
 
-    const hasSubscription = application.hasValidFirstPartySubscription()
+  const hasSubscription = application.hasValidFirstPartySubscription()
 
-    const activate = useCallback(
-      (feature: string) => {
-        featuresController.showPremiumAlert(feature).catch(console.error)
-      },
-      [featuresController],
-    )
+  const activate = useCallback(
+    (feature: string) => {
+      application.featuresController.showPremiumAlert(feature).catch(console.error)
+    },
+    [application.featuresController],
+  )
 
-    const close = useCallback(() => {
-      featuresController.closePremiumAlert()
-    }, [featuresController])
+  const close = useCallback(() => {
+    application.featuresController.closePremiumAlert()
+  }, [application.featuresController])
 
-    return (
-      <>
-        {featuresController.premiumAlertType != undefined && (
-          <PremiumFeaturesModal
-            application={application}
-            featureName={featureName}
-            hasSubscription={hasSubscription}
-            onClose={close}
-            showModal={featuresController.premiumAlertType != undefined}
-            type={featuresController.premiumAlertType}
-          />
-        )}
-        <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
-      </>
-    )
-  },
-)
+  return (
+    <>
+      {application.featuresController.premiumAlertType != undefined && (
+        <PremiumFeaturesModal
+          application={application}
+          featureName={featureName}
+          hasSubscription={hasSubscription}
+          onClose={close}
+          showModal={application.featuresController.premiumAlertType != undefined}
+          type={application.featuresController.premiumAlertType}
+        />
+      )}
+      <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
+    </>
+  )
+})
 
 PremiumModalProvider.displayName = 'PremiumModalProvider'
 
-const PremiumModalProviderWithDeallocateHandling: FunctionComponent<Props> = ({
-  application,
-  featuresController,
-  children,
-}) => {
-  return <PremiumModalProvider application={application} featuresController={featuresController} children={children} />
+const PremiumModalProviderWithDeallocateHandling: FunctionComponent<Props> = ({ application, children }) => {
+  return <PremiumModalProvider application={application} children={children} />
 }
 
 export default observer(PremiumModalProviderWithDeallocateHandling)