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, 10 insertions, 7 deletions

diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index d8bf4f637..c58175327 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -14,6 +14,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedPage} from 'view/com/feeds/FeedPage'
+import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
 
 export const POLL_FREQ = 30e3 // 30sec
 
@@ -21,6 +22,8 @@ type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
   observer(function HomeScreenImpl({}: Props) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
+    const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
     const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([])
@@ -61,21 +64,21 @@ export const HomeScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
-        store.shell.setIsDrawerSwipeDisabled(selectedPage > 0)
+        setMinimalShellMode(false)
+        setDrawerSwipeDisabled(selectedPage > 0)
         return () => {
-          store.shell.setIsDrawerSwipeDisabled(false)
+          setDrawerSwipeDisabled(false)
         }
-      }, [store, selectedPage]),
+      }, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]),
     )
 
     const onPageSelected = React.useCallback(
       (index: number) => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         setSelectedPage(index)
-        store.shell.setIsDrawerSwipeDisabled(index > 0)
+        setDrawerSwipeDisabled(index > 0)
       },
-      [store, setSelectedPage],
+      [setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode],
     )
 
     const onPressSelected = React.useCallback(() => {