Extract shell state into separate context (#1824)

* WIP

* Add shell state

* Integrate new shell state for drawer and minimal shell mode

* Replace isDrawerSwipeDisabled

* Split shell state into separate contexts to avoid needless re-renders

* Fix typo

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 13 insertions, 10 deletions

diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index c2d307f59..7f5e6c5e5 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -43,11 +43,13 @@ import {NavigationProp} from 'lib/routes/types'
 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'
 
 export const DrawerContent = observer(function DrawerContentImpl() {
   const theme = useTheme()
   const pal = usePalette('default')
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
@@ -62,7 +64,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
     (tab: string) => {
       track('Menu:ItemClicked', {url: tab})
       const state = navigation.getState()
-      store.shell.closeDrawer()
+      setDrawerOpen(false)
       if (isWeb) {
         // hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
         if (tab === 'MyProfile') {
@@ -83,7 +85,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
         }
       }
     },
-    [store, track, navigation],
+    [store, track, navigation, setDrawerOpen],
   )
 
   const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
@@ -110,20 +112,20 @@ export const DrawerContent = observer(function DrawerContentImpl() {
   const onPressLists = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Lists'})
     navigation.navigate('Lists')
-    store.shell.closeDrawer()
-  }, [navigation, track, store.shell])
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])
 
   const onPressModeration = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Moderation'})
     navigation.navigate('Moderation')
-    store.shell.closeDrawer()
-  }, [navigation, track, store.shell])
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])
 
   const onPressSettings = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Settings'})
     navigation.navigate('Settings')
-    store.shell.closeDrawer()
-  }, [navigation, track, store.shell])
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])
 
   const onPressFeedback = React.useCallback(() => {
     track('Menu:FeedbackClicked')
@@ -437,13 +439,14 @@ const InviteCodes = observer(function InviteCodesImpl({
 }) {
   const {track} = useAnalytics()
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const pal = usePalette('default')
   const {invitesAvailable} = store.me
   const onPress = React.useCallback(() => {
     track('Menu:ItemClicked', {url: '#invite-codes'})
-    store.shell.closeDrawer()
+    setDrawerOpen(false)
     store.shell.openModal({name: 'invite-codes'})
-  }, [store, track])
+  }, [store, track, setDrawerOpen])
   return (
     <TouchableOpacity
       testID="menuItemInviteCodes"