Composer update (react-query refactor) (#1899)

* Move composer state to a context

* Rework composer to use RQ

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/screens/Feeds.tsx

@@ -8,7 +8,6 @@ import {FAB} from 'view/com/util/fab/FAB'
 import {Link} from 'view/com/util/Link'
 import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {ComposeIcon2, CogIcon} from 'lib/icons'
 import {s} from 'lib/styles'
@@ -34,6 +33,7 @@ import {
   useSearchPopularFeedsMutation,
 } from '#/state/queries/feed'
 import {cleanError} from 'lib/strings/errors'
+import {useComposerControls} from '#/state/shell/composer'
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 
@@ -90,8 +90,8 @@ type FlatlistSlice =
 export const FeedsScreen = withAuthRequired(function FeedsScreenImpl(
   _props: Props,
 ) {
-  const store = useStores()
   const pal = usePalette('default')
+  const {openComposer} = useComposerControls()
   const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
   const [query, setQuery] = React.useState('')
   const [isPTR, setIsPTR] = React.useState(false)
@@ -128,8 +128,8 @@ export const FeedsScreen = withAuthRequired(function FeedsScreenImpl(
     [search],
   )
   const onPressCompose = React.useCallback(() => {
-    store.shell.openComposer({})
-  }, [store])
+    openComposer({})
+  }, [openComposer])
   const onChangeQuery = React.useCallback(
     (text: string) => {
       setQuery(text)

src/view/screens/PostThread.tsx

@@ -10,7 +10,6 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {ComposePrompt} from 'view/com/composer/Prompt'
-import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
@@ -24,14 +23,15 @@ import {useSetMinimalShellMode} from '#/state/shell'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {ErrorMessage} from '../com/util/error/ErrorMessage'
 import {CenteredView} from '../com/util/Views'
+import {useComposerControls} from '#/state/shell/composer'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
 export const PostThreadScreen = withAuthRequired(
   observer(function PostThreadScreenImpl({route}: Props) {
-    const store = useStores()
     const queryClient = useQueryClient()
     const {fabMinimalShellTransform} = useMinimalShellMode()
     const setMinimalShellMode = useSetMinimalShellMode()
+    const {openComposer} = useComposerControls()
     const safeAreaInsets = useSafeAreaInsets()
     const {name, rkey} = route.params
     const {isMobile} = useWebMediaQueries()
@@ -54,7 +54,7 @@ export const PostThreadScreen = withAuthRequired(
       if (thread?.type !== 'post') {
         return
       }
-      store.shell.openComposer({
+      openComposer({
         replyTo: {
           uri: thread.post.uri,
           cid: thread.post.cid,
@@ -70,7 +70,7 @@ export const PostThreadScreen = withAuthRequired(
             queryKey: POST_THREAD_RQKEY(resolvedUri.uri || ''),
           }),
       })
-    }, [store, queryClient, resolvedUri])
+    }, [openComposer, queryClient, resolvedUri])
 
     return (
       <View style={s.hContentRegion}>

src/view/screens/Profile.tsx

@@ -36,6 +36,7 @@ import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
 import {cleanError} from '#/lib/strings/errors'
 import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
 import {useQueryClient} from '@tanstack/react-query'
+import {useComposerControls} from '#/state/shell/composer'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(function ProfileScreenImpl({
@@ -128,6 +129,7 @@ function ProfileScreenLoaded({
   const store = useStores()
   const {currentAccount} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()
+  const {openComposer} = useComposerControls()
   const {screen, track} = useAnalytics()
   const [currentPage, setCurrentPage] = React.useState(0)
   const {_} = useLingui()
@@ -193,8 +195,8 @@ function ProfileScreenLoaded({
       profile.handle === 'handle.invalid'
         ? undefined
         : profile.handle
-    store.shell.openComposer({mention})
-  }, [store, currentAccount, track, profile])
+    openComposer({mention})
+  }, [openComposer, currentAccount, track, profile])
 
   const onPageSelected = React.useCallback(
     i => {

src/view/screens/ProfileFeed.tsx

@@ -16,7 +16,6 @@ import {CommonNavigatorParams} from 'lib/routes/types'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {colors, s} from 'lib/styles'
 import {observer} from 'mobx-react-lite'
-import {useStores} from 'state/index'
 import {FeedDescriptor} from '#/state/queries/post-feed'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
@@ -62,6 +61,7 @@ import {
 } from '#/state/queries/preferences'
 import {useSession} from '#/state/session'
 import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
+import {useComposerControls} from '#/state/shell/composer'
 
 const SECTION_TITLES = ['Posts', 'About']
 
@@ -163,9 +163,9 @@ export const ProfileFeedScreenInner = function ProfileFeedScreenInnerImpl({
 }) {
   const {_} = useLingui()
   const pal = usePalette('default')
-  const store = useStores()
   const {currentAccount} = useSession()
   const {openModal} = useModalControls()
+  const {openComposer} = useComposerControls()
   const {track} = useAnalytics()
   const feedSectionRef = React.useRef<SectionRef>(null)
 
@@ -420,7 +420,7 @@ export const ProfileFeedScreenInner = function ProfileFeedScreenInnerImpl({
       </PagerWithHeader>
       <FAB
         testID="composeFAB"
-        onPress={() => store.shell.openComposer({})}
+        onPress={() => openComposer({})}
         icon={
           <ComposeIcon2 strokeWidth={1.5} size={29} style={{color: 'white'}} />
         }

src/view/screens/ProfileList.tsx

@@ -28,7 +28,6 @@ import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {FAB} from 'view/com/util/fab/FAB'
 import {Haptics} from 'lib/haptics'
 import {FeedDescriptor} from '#/state/queries/post-feed'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -55,6 +54,7 @@ import {
 } from '#/state/queries/list'
 import {cleanError} from '#/lib/strings/errors'
 import {useSession} from '#/state/session'
+import {useComposerControls} from '#/state/shell/composer'
 
 const SECTION_TITLES_CURATE = ['Posts', 'About']
 const SECTION_TITLES_MOD = ['About']
@@ -106,9 +106,9 @@ function ProfileListScreenLoaded({
   uri,
   list,
 }: Props & {uri: string; list: AppBskyGraphDefs.ListView}) {
-  const store = useStores()
   const {_} = useLingui()
   const queryClient = useQueryClient()
+  const {openComposer} = useComposerControls()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {rkey} = route.params
   const feedSectionRef = React.useRef<SectionRef>(null)
@@ -191,7 +191,7 @@ function ProfileListScreenLoaded({
         </PagerWithHeader>
         <FAB
           testID="composeFAB"
-          onPress={() => store.shell.openComposer({})}
+          onPress={() => openComposer({})}
           icon={
             <ComposeIcon2
               strokeWidth={1.5}
@@ -227,7 +227,7 @@ function ProfileListScreenLoaded({
       </PagerWithHeader>
       <FAB
         testID="composeFAB"
-        onPress={() => store.shell.openComposer({})}
+        onPress={() => openComposer({})}
         icon={
           <ComposeIcon2 strokeWidth={1.5} size={29} style={{color: 'white'}} />
         }