Add modal state provider, replace usage except methods (#1833)

* Add modal state provider, replace usage except methods

* Replace easy spots

* Fix sticky spots

* Replace final usages

* Memorize context objects

* Add more warnings

src/view/shell/Drawer.tsx

@@ -44,6 +44,7 @@ import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
 import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
 import {useSetDrawerOpen} from '#/state/shell'
+import {useModalControls} from '#/state/modals'
 
 export const DrawerContent = observer(function DrawerContentImpl() {
   const theme = useTheme()
@@ -442,11 +443,12 @@ const InviteCodes = observer(function InviteCodesImpl({
   const setDrawerOpen = useSetDrawerOpen()
   const pal = usePalette('default')
   const {invitesAvailable} = store.me
+  const {openModal} = useModalControls()
   const onPress = React.useCallback(() => {
     track('Menu:ItemClicked', {url: '#invite-codes'})
     setDrawerOpen(false)
-    store.shell.openModal({name: 'invite-codes'})
-  }, [store, track, setDrawerOpen])
+    openModal({name: 'invite-codes'})
+  }, [openModal, track, setDrawerOpen])
   return (
     <TouchableOpacity
       testID="menuItemInviteCodes"

src/view/shell/bottom-bar/BottomBar.tsx

@@ -24,12 +24,14 @@ import {styles} from './BottomBarStyles'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {UserAvatar} from 'view/com/util/UserAvatar'
+import {useModalControls} from '#/state/modals'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
 export const BottomBar = observer(function BottomBarImpl({
   navigation,
 }: BottomTabBarProps) {
+  const {openModal} = useModalControls()
   const store = useStores()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
@@ -72,8 +74,8 @@ export const BottomBar = observer(function BottomBarImpl({
     onPressTab('MyProfile')
   }, [onPressTab])
   const onLongPressProfile = React.useCallback(() => {
-    store.shell.openModal({name: 'switch-account'})
-  }, [store])
+    openModal({name: 'switch-account'})
+  }, [openModal])
 
   return (
     <Animated.View

src/view/shell/desktop/RightNav.tsx

@@ -13,6 +13,7 @@ import {useStores} from 'state/index'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
+import {useModalControls} from '#/state/modals'
 
 export const DesktopRightNav = observer(function DesktopRightNavImpl() {
   const store = useStores()
@@ -83,12 +84,13 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
 const InviteCodes = observer(function InviteCodesImpl() {
   const store = useStores()
   const pal = usePalette('default')
+  const {openModal} = useModalControls()
 
   const {invitesAvailable} = store.me
 
   const onPress = React.useCallback(() => {
-    store.shell.openModal({name: 'invite-codes'})
-  }, [store])
+    openModal({name: 'invite-codes'})
+  }, [openModal])
   return (
     <TouchableOpacity
       style={[styles.inviteCodes, pal.border]}

src/view/shell/index.tsx

@@ -32,12 +32,14 @@ import {
   useIsDrawerSwipeDisabled,
 } from '#/state/shell'
 import {isAndroid} from 'platform/detection'
+import {useModalControls} from '#/state/modals'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
   const isDrawerOpen = useIsDrawerOpen()
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
   const setIsDrawerOpen = useSetDrawerOpen()
+  const {closeModal} = useModalControls()
   useOTAUpdate() // this hook polls for OTA updates every few seconds
   const winDim = useWindowDimensions()
   const safeAreaInsets = useSafeAreaInsets()
@@ -60,13 +62,14 @@ const ShellInner = observer(function ShellInnerImpl() {
     if (isAndroid) {
       listener = BackHandler.addEventListener('hardwareBackPress', () => {
         setIsDrawerOpen(false)
+        closeModal()
         return store.shell.closeAnyActiveElement()
       })
     }
     return () => {
       listener.remove()
     }
-  }, [store, setIsDrawerOpen])
+  }, [store, setIsDrawerOpen, closeModal])
 
   return (
     <>

src/view/shell/index.web.tsx

@@ -22,11 +22,13 @@ import {
   useSetDrawerOpen,
   useOnboardingState,
 } from '#/state/shell'
+import {useModalControls} from '#/state/modals'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
   const isDrawerOpen = useIsDrawerOpen()
   const setDrawerOpen = useSetDrawerOpen()
+  const {closeModal} = useModalControls()
   const onboardingState = useOnboardingState()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
@@ -35,9 +37,10 @@ const ShellInner = observer(function ShellInnerImpl() {
   useEffect(() => {
     navigator.addListener('state', () => {
       setDrawerOpen(false)
+      closeModal()
       store.shell.closeAnyActiveElement()
     })
-  }, [navigator, store.shell, setDrawerOpen])
+  }, [navigator, store.shell, setDrawerOpen, closeModal])
 
   const showBottomBar = isMobile && !onboardingState.isActive
   const showSideNavs =