Rework composer to use RQ

src/lib/api/index.ts

@@ -82,12 +82,11 @@ interface PostOpts {
   extLink?: ExternalEmbedDraft
   images?: ImageModel[]
   labels?: string[]
-  knownHandles?: Set<string>
   onStateChange?: (state: string) => void
   langs?: string[]
 }
 
-export async function post(store: RootStoreModel, opts: PostOpts) {
+export async function post(agent: BskyAgent, opts: PostOpts) {
   let embed:
     | AppBskyEmbedImages.Main
     | AppBskyEmbedExternal.Main
@@ -103,7 +102,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
   )
 
   opts.onStateChange?.('Processing...')
-  await rt.detectFacets(store.agent)
+  await rt.detectFacets(agent)
   rt = shortenLinks(rt)
 
   // filter out any mention facets that didn't map to a user
@@ -136,7 +135,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
       await image.compress()
       const path = image.compressed?.path ?? image.path
       const {width, height} = image.compressed || image
-      const res = await uploadBlob(store.agent, path, 'image/jpeg')
+      const res = await uploadBlob(agent, path, 'image/jpeg')
       images.push({
         image: res.data.blob,
         alt: image.altText ?? '',
@@ -186,7 +185,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
         }
         if (encoding) {
           const thumbUploadRes = await uploadBlob(
-            store.agent,
+            agent,
             opts.extLink.localThumb.path,
             encoding,
           )
@@ -225,7 +224,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
   // add replyTo if post is a reply to another post
   if (opts.replyTo) {
     const replyToUrip = new AtUri(opts.replyTo)
-    const parentPost = await store.agent.getPost({
+    const parentPost = await agent.getPost({
       repo: replyToUrip.host,
       rkey: replyToUrip.rkey,
     })
@@ -258,7 +257,7 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
 
   try {
     opts.onStateChange?.('Posting...')
-    return await store.agent.post({
+    return await agent.post({
       text: rt.text,
       facets: rt.facets,
       reply,

src/lib/media/picker.tsx

@@ -3,7 +3,6 @@ import {
   openCropper as openCropperFn,
   Image as RNImage,
 } from 'react-native-image-crop-picker'
-import {RootStoreModel} from 'state/index'
 import {CameraOpts, CropperOptions} from './types'
 export {openPicker} from './picker.shared'
 
@@ -16,10 +15,7 @@ export {openPicker} from './picker.shared'
  * -prf
  */
 
-export async function openCamera(
-  _store: RootStoreModel,
-  opts: CameraOpts,
-): Promise<RNImage> {
+export async function openCamera(opts: CameraOpts): Promise<RNImage> {
   const item = await openCameraFn({
     width: opts.width,
     height: opts.height,
@@ -39,10 +35,7 @@ export async function openCamera(
   }
 }
 
-export async function openCropper(
-  _store: RootStoreModel,
-  opts: CropperOptions,
-) {
+export async function openCropper(opts: CropperOptions) {
   const item = await openCropperFn({
     ...opts,
     forceJpg: true, // ios only

src/lib/media/picker.web.tsx

@@ -1,23 +1,16 @@
 /// <reference lib="dom" />
 
 import {CameraOpts, CropperOptions} from './types'
-import {RootStoreModel} from 'state/index'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 export {openPicker} from './picker.shared'
 import {unstable__openModal} from '#/state/modals'
 
-export async function openCamera(
-  _store: RootStoreModel,
-  _opts: CameraOpts,
-): Promise<RNImage> {
+export async function openCamera(_opts: CameraOpts): Promise<RNImage> {
   // const mediaType = opts.mediaType || 'photo' TODO
   throw new Error('TODO')
 }
 
-export async function openCropper(
-  _store: RootStoreModel,
-  opts: CropperOptions,
-): Promise<RNImage> {
+export async function openCropper(opts: CropperOptions): Promise<RNImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
     unstable__openModal({

src/state/models/media/gallery.ts

@@ -1,5 +1,4 @@
 import {makeAutoObservable, runInAction} from 'mobx'
-import {RootStoreModel} from 'state/index'
 import {ImageModel} from './image'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import {openPicker} from 'lib/media/picker'
@@ -8,10 +7,8 @@ import {getImageDim} from 'lib/media/manip'
 export class GalleryModel {
   images: ImageModel[] = []
 
-  constructor(public rootStore: RootStoreModel) {
-    makeAutoObservable(this, {
-      rootStore: false,
-    })
+  constructor() {
+    makeAutoObservable(this)
   }
 
   get isEmpty() {
@@ -33,7 +30,7 @@ export class GalleryModel {
 
     // Temporarily enforce uniqueness but can eventually also use index
     if (!this.images.some(i => i.path === image_.path)) {
-      const image = new ImageModel(this.rootStore, image_)
+      const image = new ImageModel(image_)
 
       // Initial resize
       image.manipulate({})

src/state/models/media/image.ts

@@ -1,5 +1,4 @@
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {RootStoreModel} from 'state/index'
 import {makeAutoObservable, runInAction} from 'mobx'
 import {POST_IMG_MAX} from 'lib/constants'
 import * as ImageManipulator from 'expo-image-manipulator'
@@ -42,10 +41,8 @@ export class ImageModel implements Omit<RNImage, 'size'> {
   }
   prevAttributes: ImageManipulationAttributes = {}
 
-  constructor(public rootStore: RootStoreModel, image: Omit<RNImage, 'size'>) {
-    makeAutoObservable(this, {
-      rootStore: false,
-    })
+  constructor(image: Omit<RNImage, 'size'>) {
+    makeAutoObservable(this)
 
     this.path = image.path
     this.width = image.width
@@ -178,7 +175,7 @@ export class ImageModel implements Omit<RNImage, 'size'> {
         height: this.height,
       })
 
-      const cropped = await openCropper(this.rootStore, {
+      const cropped = await openCropper({
         mediaType: 'photo',
         path: this.path,
         freeStyleCropEnabled: true,

src/state/queries/actor-autocomplete.ts

@@ -1,7 +1,8 @@
-import {AppBskyActorDefs} from '@atproto/api'
+import {AppBskyActorDefs, BskyAgent} from '@atproto/api'
 import {useQuery} from '@tanstack/react-query'
 import {useSession} from '../session'
 import {useMyFollowsQuery} from './my-follows'
+import AwaitLock from 'await-lock'
 
 export const RQKEY = (prefix: string) => ['actor-autocomplete', prefix]
 
@@ -21,6 +22,57 @@ export function useActorAutocompleteQuery(prefix: string) {
   })
 }
 
+export class ActorAutocomplete {
+  // state
+  isLoading = false
+  isActive = false
+  prefix = ''
+  lock = new AwaitLock()
+
+  // data
+  suggestions: AppBskyActorDefs.ProfileViewBasic[] = []
+
+  constructor(
+    public agent: BskyAgent,
+    public follows?: AppBskyActorDefs.ProfileViewBasic[] | undefined,
+  ) {}
+
+  setFollows(follows: AppBskyActorDefs.ProfileViewBasic[]) {
+    this.follows = follows
+  }
+
+  async query(prefix: string) {
+    const origPrefix = prefix.trim().toLocaleLowerCase()
+    this.prefix = origPrefix
+    await this.lock.acquireAsync()
+    try {
+      if (this.prefix) {
+        if (this.prefix !== origPrefix) {
+          return // another prefix was set before we got our chance
+        }
+
+        // start with follow results
+        this.suggestions = computeSuggestions(this.prefix, this.follows)
+
+        // ask backend
+        const res = await this.agent.searchActorsTypeahead({
+          term: this.prefix,
+          limit: 8,
+        })
+        this.suggestions = computeSuggestions(
+          this.prefix,
+          this.follows,
+          res.data.actors,
+        )
+      } else {
+        this.suggestions = computeSuggestions(this.prefix, this.follows)
+      }
+    } finally {
+      this.lock.release()
+    }
+  }
+}
+
 function computeSuggestions(
   prefix: string,
   follows: AppBskyActorDefs.ProfileViewBasic[] = [],

src/view/com/composer/Composer.tsx

@@ -16,7 +16,6 @@ import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {RichText} from '@atproto/api'
 import {useAnalytics} from 'lib/analytics/analytics'
-import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
 import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {ExternalEmbed} from './ExternalEmbed'
 import {Text} from '../util/text/Text'
@@ -57,6 +56,9 @@ import {
   useLanguagePrefsApi,
   toPostLanguages,
 } from '#/state/preferences/languages'
+import {useSession} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useComposerControls} from '#/state/shell/composer'
 
 type Props = ComposerOpts
 export const ComposePost = observer(function ComposePost({
@@ -65,12 +67,14 @@ export const ComposePost = observer(function ComposePost({
   quote: initQuote,
   mention: initMention,
 }: Props) {
+  const {agent, currentAccount} = useSession()
+  const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
   const {activeModals} = useModals()
   const {openModal, closeModal} = useModalControls()
+  const {closeComposer} = useComposerControls()
   const {track} = useAnalytics()
   const pal = usePalette('default')
   const {isDesktop, isMobile} = useWebMediaQueries()
-  const store = useStores()
   const {_} = useLingui()
   const requireAltTextEnabled = useRequireAltTextEnabled()
   const langPrefs = useLanguagePrefs()
@@ -100,15 +104,10 @@ export const ComposePost = observer(function ComposePost({
   const {extLink, setExtLink} = useExternalLinkFetch({setQuote})
   const [labels, setLabels] = useState<string[]>([])
   const [suggestedLinks, setSuggestedLinks] = useState<Set<string>>(new Set())
-  const gallery = useMemo(() => new GalleryModel(store), [store])
+  const gallery = useMemo(() => new GalleryModel(), [])
   const onClose = useCallback(() => {
-    store.shell.closeComposer()
-  }, [store])
-
-  const autocompleteView = useMemo<UserAutocompleteModel>(
-    () => new UserAutocompleteModel(store),
-    [store],
-  )
+    closeComposer()
+  }, [closeComposer])
 
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(
@@ -161,11 +160,6 @@ export const ComposePost = observer(function ComposePost({
     }
   }, [onPressCancel])
 
-  // initial setup
-  useEffect(() => {
-    autocompleteView.setup()
-  }, [autocompleteView])
-
   // listen to escape key on desktop web
   const onEscape = useCallback(
     (e: KeyboardEvent) => {
@@ -215,15 +209,14 @@ export const ComposePost = observer(function ComposePost({
     setIsProcessing(true)
 
     try {
-      await apilib.post(store, {
+      await apilib.post(agent, {
         rawText: richtext.text,
         replyTo: replyTo?.uri,
         images: gallery.images,
         quote,
         extLink,
         labels,
         onStateChange: setProcessingState,
-        knownHandles: autocompleteView.knownHandles,
         langs: toPostLanguages(langPrefs.postLanguage),
       })
     } catch (e: any) {
@@ -380,13 +373,12 @@ export const ComposePost = observer(function ComposePost({
               styles.textInputLayout,
               isNative && styles.textInputLayoutMobile,
             ]}>
-            <UserAvatar avatar={store.me.avatar} size={50} />
+            <UserAvatar avatar={currentProfile?.avatar} size={50} />
             <TextInput
               ref={textInput}
               richtext={richtext}
               placeholder={selectTextInputPlaceholder}
               suggestedLinks={suggestedLinks}
-              autocompleteView={autocompleteView}
               autoFocus={true}
               setRichText={setRichText}
               onPhotoPasted={onPhotoPasted}