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/shell/Composer.tsx

@@ -2,30 +2,21 @@ import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {Animated, Easing, Platform, StyleSheet, View} from 'react-native'
 import {ComposePost} from '../com/composer/Composer'
-import {ComposerOpts} from 'state/models/ui/shell'
+import {useComposerState} from 'state/shell/composer'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
 
 export const Composer = observer(function ComposerImpl({
-  active,
   winHeight,
-  replyTo,
-  onPost,
-  quote,
-  mention,
 }: {
-  active: boolean
   winHeight: number
-  replyTo?: ComposerOpts['replyTo']
-  onPost?: ComposerOpts['onPost']
-  quote?: ComposerOpts['quote']
-  mention?: ComposerOpts['mention']
 }) {
+  const state = useComposerState()
   const pal = usePalette('default')
   const initInterp = useAnimatedValue(0)
 
   useEffect(() => {
-    if (active) {
+    if (state) {
       Animated.timing(initInterp, {
         toValue: 1,
         duration: 300,
@@ -35,7 +26,7 @@ export const Composer = observer(function ComposerImpl({
     } else {
       initInterp.setValue(0)
     }
-  }, [initInterp, active])
+  }, [initInterp, state])
   const wrapperAnimStyle = {
     transform: [
       {
@@ -50,7 +41,7 @@ export const Composer = observer(function ComposerImpl({
   // rendering
   // =
 
-  if (!active) {
+  if (!state) {
     return <View />
   }
 
@@ -60,10 +51,10 @@ export const Composer = observer(function ComposerImpl({
       aria-modal
       accessibilityViewIsModal>
       <ComposePost
-        replyTo={replyTo}
-        onPost={onPost}
-        quote={quote}
-        mention={mention}
+        replyTo={state.replyTo}
+        onPost={state.onPost}
+        quote={state.quote}
+        mention={state.mention}
       />
     </Animated.View>
   )

src/view/shell/Composer.web.tsx

@@ -1,34 +1,21 @@
 import React from 'react'
-import {observer} from 'mobx-react-lite'
 import {StyleSheet, View} from 'react-native'
 import {ComposePost} from '../com/composer/Composer'
-import {ComposerOpts} from 'state/models/ui/shell'
+import {useComposerState} from 'state/shell/composer'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 const BOTTOM_BAR_HEIGHT = 61
 
-export const Composer = observer(function ComposerImpl({
-  active,
-  replyTo,
-  quote,
-  onPost,
-  mention,
-}: {
-  active: boolean
-  winHeight: number
-  replyTo?: ComposerOpts['replyTo']
-  quote: ComposerOpts['quote']
-  onPost?: ComposerOpts['onPost']
-  mention?: ComposerOpts['mention']
-}) {
+export function Composer({}: {winHeight: number}) {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
+  const state = useComposerState()
 
   // rendering
   // =
 
-  if (!active) {
+  if (!state) {
     return <View />
   }
 
@@ -42,15 +29,15 @@ export const Composer = observer(function ComposerImpl({
           pal.border,
         ]}>
         <ComposePost
-          replyTo={replyTo}
-          quote={quote}
-          onPost={onPost}
-          mention={mention}
+          replyTo={state.replyTo}
+          quote={state.quote}
+          onPost={state.onPost}
+          mention={state.mention}
         />
       </View>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   mask: {

src/view/shell/desktop/LeftNav.tsx

@@ -44,6 +44,7 @@ import {Trans, msg} from '@lingui/macro'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useComposerControls} from '#/state/shell/composer'
 
 const ProfileCard = observer(function ProfileCardImpl() {
   const {currentAccount} = useSession()
@@ -195,6 +196,7 @@ const NavItem = observer(function NavItemImpl({
 function ComposeBtn() {
   const store = useStores()
   const {getState} = useNavigation()
+  const {openComposer} = useComposerControls()
   const {_} = useLingui()
   const {isTablet} = useWebMediaQueries()
 
@@ -224,7 +226,7 @@ function ComposeBtn() {
   }
 
   const onPressCompose = async () =>
-    store.shell.openComposer({mention: await getProfileHandle()})
+    openComposer({mention: await getProfileHandle()})
 
   if (isTablet) {
     return null

src/view/shell/index.tsx

@@ -89,14 +89,7 @@ const ShellInner = observer(function ShellInnerImpl() {
           </Drawer>
         </ErrorBoundary>
       </View>
-      <Composer
-        active={store.shell.isComposerActive}
-        winHeight={winDim.height}
-        replyTo={store.shell.composerOpts?.replyTo}
-        onPost={store.shell.composerOpts?.onPost}
-        quote={store.shell.composerOpts?.quote}
-        mention={store.shell.composerOpts?.mention}
-      />
+      <Composer winHeight={winDim.height} />
       <ModalsContainer />
       <Lightbox />
     </>

src/view/shell/index.web.tsx

@@ -61,14 +61,7 @@ const ShellInner = observer(function ShellInnerImpl() {
           <DesktopRightNav />
         </>
       )}
-      <Composer
-        active={store.shell.isComposerActive}
-        winHeight={0}
-        replyTo={store.shell.composerOpts?.replyTo}
-        quote={store.shell.composerOpts?.quote}
-        onPost={store.shell.composerOpts?.onPost}
-        mention={store.shell.composerOpts?.mention}
-      />
+      <Composer winHeight={0} />
       {showBottomBar && <BottomBarWeb />}
       <ModalsContainer />
       <Lightbox />