Clean up WIP, explore suspend/resume

src/screens/Messages/Conversation/MessagesList.tsx

@@ -89,7 +89,9 @@ export function MessagesList() {
   }, [])
 
   const onEndReached = useCallback(() => {
-    chat.service.fetchMessageHistory()
+    if (chat.status === ConvoStatus.Ready) {
+      chat.fetchMessageHistory()
+    }
   }, [chat])
 
   const onInputFocus = useCallback(() => {
@@ -102,9 +104,11 @@ export function MessagesList() {
 
   const onSendMessage = useCallback(
     (text: string) => {
-      chat.service.sendMessage({
+      if (chat.status === ConvoStatus.Ready) {
-        text,
+        chat.sendMessage({
-      })
+          text,
+        })
+      }
     },
     [chat],
   )
@@ -134,9 +138,7 @@ export function MessagesList() {
       contentContainerStyle={a.flex_1}>
       <FlatList
         ref={flatListRef}
-        data={
+        data={chat.status === ConvoStatus.Ready ? chat.items : undefined}
-          chat.state.status === ConvoStatus.Ready ? chat.state.items : undefined
-        }
         keyExtractor={keyExtractor}
         renderItem={renderItem}
         contentContainerStyle={{paddingHorizontal: 10}}
@@ -159,8 +161,7 @@ export function MessagesList() {
         ListFooterComponent={
           <MaybeLoader
             isLoading={
-              chat.state.status === ConvoStatus.Ready &&
+              chat.status === ConvoStatus.Ready && chat.isFetchingHistory
-              chat.state.isFetchingHistory
             }
           />
         }

src/screens/Messages/Conversation/index.tsx

@@ -46,16 +46,16 @@ function Inner() {
   const myDid = currentAccount?.did
 
   const otherProfile = React.useMemo(() => {
-    if (chat.state.status !== ConvoStatus.Ready) return
+    if (chat.status !== ConvoStatus.Ready) return
-    return chat.state.convo.members.find(m => m.did !== myDid)
+    return chat.convo.members.find(m => m.did !== myDid)
-  }, [chat.state, myDid])
+  }, [chat, myDid])
 
   // TODO whenever we have error messages, we should use them in here -hailey
-  if (chat.state.status !== ConvoStatus.Ready || !otherProfile) {
+  if (chat.status !== ConvoStatus.Ready || !otherProfile) {
     return (
       <ListMaybePlaceholder
         isLoading={true}
-        isError={chat.state.status === ConvoStatus.Error}
+        isError={chat.status === ConvoStatus.Error}
       />
     )
   }
@@ -77,7 +77,7 @@ let Header = ({
   const {_} = useLingui()
   const {gtTablet} = useBreakpoints()
   const navigation = useNavigation<NavigationProp>()
-  const {state} = useChat()
+  const chat = useChat()
 
   const onPressBack = useCallback(() => {
     if (isWeb) {
@@ -129,9 +129,9 @@ let Header = ({
         <PreviewableUserAvatar size={32} profile={profile} />
         <Text style={[a.text_lg, a.font_bold]}>{profile.displayName}</Text>
       </View>
-      {state.status === ConvoStatus.Ready && state.convo ? (
+      {chat.status === ConvoStatus.Ready ? (
         <ConvoMenu
-          convo={state.convo}
+          convo={chat.convo}
           profile={profile}
           onUpdateConvo={onUpdateConvo}
           currentScreen="conversation"

src/state/messages/convo.ts

@@ -17,9 +17,10 @@ export type ConvoParams = {
 export enum ConvoStatus {
   Uninitialized = 'uninitialized',
   Initializing = 'initializing',
+  Resuming = 'resuming',
   Ready = 'ready',
   Error = 'error',
-  Destroyed = 'destroyed',
+  Suspended = 'suspended',
 }
 
 export type ConvoItem =
@@ -59,25 +60,28 @@ export type ConvoState =
       items: ConvoItem[]
       convo: ChatBskyConvoDefs.ConvoView
       isFetchingHistory: boolean
+      deleteMessage: (messageId: string) => void
+      sendMessage: (
+        message: ChatBskyConvoSendMessage.InputSchema['message'],
+      ) => void
+      fetchMessageHistory: () => void
+    }
+  | {
+      status: ConvoStatus.Suspended
+      items: ConvoItem[]
+      convo: ChatBskyConvoDefs.ConvoView
+      isFetchingHistory: boolean
+    }
+  | {
+      status: ConvoStatus.Resuming
+      items: ConvoItem[]
+      convo: ChatBskyConvoDefs.ConvoView
+      isFetchingHistory: boolean
     }
   | {
       status: ConvoStatus.Error
       error: any
     }
-  | {
-      status: ConvoStatus.Destroyed
-    }
-
-export type ConvoInterface = {
-  state: ConvoState
-  service: {
-    deleteMessage: (messageId: string) => void
-    sendMessage: (
-      message: ChatBskyConvoSendMessage.InputSchema['message'],
-    ) => void
-    fetchMessageHistory: () => void
-  }
-}
 
 export function isConvoItemMessage(
   item: ConvoItem,
@@ -127,97 +131,98 @@ export class Convo {
     this.agent = params.agent
     this.__tempFromUserDid = params.__tempFromUserDid
 
+    /*
+     * Bind methods used by `useSyncExternalStore`
+     */
     this.subscribe = this.subscribe.bind(this)
     this.getSnapshot = this.getSnapshot.bind(this)
   }
 
-  private subscribers: (() => void)[] = []
+  async refreshConvo() {
-
+    const response = await this.agent.api.chat.bsky.convo.getConvo(
-  subscribe(subscriber: () => void) {
+      {
-    console.log('SUBSCRIBE')
+        convoId: this.convoId,
-    this.subscribers.push(subscriber)
+      },
-    this.initialize()
+      {
-    return () => {
+        headers: {
-      console.log('UN-SUBSCRIBE')
+          Authorization: this.__tempFromUserDid,
-      this.subscribers = this.subscribers.filter(s => s !== subscriber)
+        },
-    }
+      },
+    )
+    this.convo = response.data.convo
+    this.sender = this.convo.members.find(m => m.did === this.__tempFromUserDid)
   }
 
-  snapshot: ConvoInterface = {
+  async resume() {
-    state: {
-      status: ConvoStatus.Uninitialized,
-    },
-    service: {
-      deleteMessage: this.deleteMessage.bind(this),
-      sendMessage: this.sendMessage.bind(this),
-      fetchMessageHistory: this.fetchMessageHistory.bind(this),
-    },
-  }
-
-  getSnapshot(): ConvoInterface {
-    return this.snapshot
-  }
-
-  async initialize() {
-    if (this.status !== ConvoStatus.Uninitialized) return
-    this.status = ConvoStatus.Initializing
-
     try {
-      const response = await this.agent.api.chat.bsky.convo.getConvo(
+      if (this.status === ConvoStatus.Uninitialized) {
-        {
+        console.log('INITIALIZING')
-          convoId: this.convoId,
+        this.status = ConvoStatus.Initializing
-        },
+        this.generateSnapshot()
-        {
-          headers: {
-            Authorization: this.__tempFromUserDid,
-          },
-        },
-      )
-      const {convo} = response.data
 
-      this.convo = convo
+        await this.refreshConvo()
-      this.sender = this.convo.members.find(
+        this.status = ConvoStatus.Ready
-        m => m.did === this.__tempFromUserDid,
+        this.generateSnapshot()
-      )
-      this.status = ConvoStatus.Ready
 
-      this.commit()
+        await this.fetchMessageHistory()
 
-      await this.fetchMessageHistory()
+        this.pollEvents()
+      } else if (this.status === ConvoStatus.Suspended) {
+        console.log('RESUMING')
+        this.status = ConvoStatus.Resuming
+        this.generateSnapshot()
 
-      this.pollEvents()
+        await this.refreshConvo()
+        this.status = ConvoStatus.Ready
+        this.generateSnapshot()
+
+        await this.fetchMessageHistory()
+
+        this.pollEvents()
+      }
     } catch (e) {
       this.status = ConvoStatus.Error
       this.error = e
     }
   }
 
+  async suspend() {
+    this.status = ConvoStatus.Suspended
+    this.generateSnapshot()
+  }
+
   private async pollEvents() {
-    if (this.status === ConvoStatus.Destroyed) return
+    if (this.status !== ConvoStatus.Ready) return
     if (this.pendingEventIngestion) return
+
+    console.log('POLL')
     setTimeout(async () => {
       this.pendingEventIngestion = this.ingestLatestEvents()
       await this.pendingEventIngestion
       this.pendingEventIngestion = undefined
       this.pollEvents()
-    }, 5e3)
+    }, 1e3)
   }
 
   async fetchMessageHistory() {
-    if (this.status === ConvoStatus.Destroyed) return
+    if (this.status !== ConvoStatus.Ready) return
-    // reached end
+
+    /*
+     * If historyCursor is null, we've fetched all history.
+     */
     if (this.historyCursor === null) return
+
+    /*
+     * Don't fetch again if a fetch is already in progress
+     */
     if (this.isFetchingHistory) return
 
     this.isFetchingHistory = true
-    this.commit()
+    this.generateSnapshot()
 
     /*
-     * Delay if paginating while scrolled.
+     * Delay if paginating while scrolled to prevent momentum scrolling from
-     *
+     * jerking the list around, plus makes it feel a little more human.
-     * TODO why does the FlatList jump without this delay?
-     *
-     * Tbh it feels a little more natural with a slight delay.
      */
     if (this.pastMessages.size > 0) {
       await new Promise(y => setTimeout(y, 500))
@@ -256,11 +261,11 @@ export class Convo {
     }
 
     this.isFetchingHistory = false
-    this.commit()
+    this.generateSnapshot()
   }
 
   async ingestLatestEvents() {
-    if (this.status === ConvoStatus.Destroyed) return
+    if (this.status === ConvoStatus.Suspended) return
 
     const response = await this.agent.api.chat.bsky.convo.getLog(
       {
@@ -327,7 +332,7 @@ export class Convo {
       }
     }
 
-    this.commit()
+    this.generateSnapshot()
   }
 
   async processPendingMessages() {
@@ -374,20 +379,20 @@ export class Convo {
 
       await this.processPendingMessages()
 
-      this.commit()
+      this.generateSnapshot()
     } catch (e) {
       this.footerItems.set('pending-retry', {
         type: 'pending-retry',
         key: 'pending-retry',
         retry: this.batchRetryPendingMessages.bind(this),
       })
-      this.commit()
+      this.generateSnapshot()
     }
   }
 
   async batchRetryPendingMessages() {
     this.footerItems.delete('pending-retry')
-    this.commit()
+    this.generateSnapshot()
 
     try {
       const messageArray = Array.from(this.pendingMessages.values())
@@ -425,19 +430,19 @@ export class Convo {
         this.pendingMessages.delete(pendingMessage.id)
       }
 
-      this.commit()
+      this.generateSnapshot()
     } catch (e) {
       this.footerItems.set('pending-retry', {
         type: 'pending-retry',
         key: 'pending-retry',
         retry: this.batchRetryPendingMessages.bind(this),
       })
-      this.commit()
+      this.generateSnapshot()
     }
   }
 
   async sendMessage(message: ChatBskyConvoSendMessage.InputSchema['message']) {
-    if (this.status === ConvoStatus.Destroyed) return
+    if (this.status === ConvoStatus.Suspended) return
     // Ignore empty messages for now since they have no other purpose atm
     if (!message.text.trim()) return
 
@@ -447,7 +452,7 @@ export class Convo {
       id: tempId,
       message,
     })
-    this.commit()
+    this.generateSnapshot()
 
     if (!this.isProcessingPendingMessages) {
       this.processPendingMessages()
@@ -456,7 +461,7 @@ export class Convo {
 
   async deleteMessage(messageId: string) {
     this.deletedMessages.add(messageId)
-    this.commit()
+    this.generateSnapshot()
 
     try {
       await this.agent.api.chat.bsky.convo.deleteMessageForSelf(
@@ -473,7 +478,7 @@ export class Convo {
       )
     } catch (e) {
       this.deletedMessages.delete(messageId)
-      this.commit()
+      this.generateSnapshot()
       throw e
     }
   }
@@ -481,7 +486,7 @@ export class Convo {
   /*
    * Items in reverse order, since FlatList inverts
    */
-  get items(): ConvoItem[] {
+  getItems(): ConvoItem[] {
     const items: ConvoItem[] = []
 
     // `newMessages` is in insertion order, unshift to reverse
@@ -580,55 +585,84 @@ export class Convo {
       })
   }
 
-  destroy() {
+  snapshot: ConvoState = {
-    this.status = ConvoStatus.Destroyed
+    status: ConvoStatus.Uninitialized,
-    this.commit()
   }
 
-  private commit() {
+  private generateSnapshot() {
     switch (this.status) {
       case ConvoStatus.Initializing: {
-        this.snapshot.state = {
+        this.snapshot = {
           status: ConvoStatus.Initializing,
         }
         break
       }
       case ConvoStatus.Ready: {
-        this.snapshot.state = {
+        this.snapshot = {
-          status: ConvoStatus.Ready,
+          status: this.status,
-          items: this.items,
+          items: this.getItems(),
+          convo: this.convo!,
+          isFetchingHistory: this.isFetchingHistory,
+          deleteMessage: this.deleteMessage.bind(this),
+          sendMessage: this.sendMessage.bind(this),
+          fetchMessageHistory: this.fetchMessageHistory.bind(this),
+        }
+        break
+      }
+      case ConvoStatus.Suspended: {
+        this.snapshot = {
+          status: this.status,
+          items: this.getItems(),
+          convo: this.convo!,
+          isFetchingHistory: this.isFetchingHistory,
+        }
+        break
+      }
+      case ConvoStatus.Resuming: {
+        this.snapshot = {
+          status: this.status,
+          items: this.getItems(),
           convo: this.convo!,
           isFetchingHistory: this.isFetchingHistory,
         }
         break
       }
       case ConvoStatus.Error: {
-        this.snapshot.state = {
+        this.snapshot = {
           status: ConvoStatus.Error,
           error: this.error,
         }
         break
       }
-      case ConvoStatus.Destroyed: {
-        this.snapshot.state = {
-          status: ConvoStatus.Destroyed,
-        }
-        break
-      }
       default: {
-        this.snapshot.state = {
+        this.snapshot = {
           status: ConvoStatus.Uninitialized,
         }
         break
       }
     }
 
-    this.snapshot = Object.assign({}, this.snapshot)
+    this.emitNewSnapshot()
-
-    this.alertSubscribers()
   }
 
-  private alertSubscribers() {
+  private emitNewSnapshot() {
     this.subscribers.forEach(subscriber => subscriber())
   }
+
+  private subscribers: (() => void)[] = []
+
+  subscribe(subscriber: () => void) {
+    console.log('SUBSCRIBED')
+    this.subscribers.push(subscriber)
+    this.resume()
+    return () => {
+      console.log('UN-SUBSCRIBED')
+      this.suspend()
+      this.subscribers = this.subscribers.filter(s => s !== subscriber)
+    }
+  }
+
+  getSnapshot(): ConvoState {
+    return this.snapshot
+  }
 }

src/state/messages/index.tsx

@@ -1,11 +1,12 @@
 import React, {useContext, useState, useSyncExternalStore} from 'react'
 import {BskyAgent} from '@atproto-labs/api'
+import {useFocusEffect} from '@react-navigation/native'
 
-import {Convo, ConvoInterface, ConvoParams} from '#/state/messages/convo'
+import {Convo, ConvoParams, ConvoState} from '#/state/messages/convo'
 import {useAgent} from '#/state/session'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 
-const ChatContext = React.createContext<ConvoInterface | null>(null)
+const ChatContext = React.createContext<ConvoState | null>(null)
 
 export function useChat() {
   const ctx = useContext(ChatContext)
@@ -33,5 +34,15 @@ export function ChatProvider({
   )
   const service = useSyncExternalStore(convo.subscribe, convo.getSnapshot)
 
+  useFocusEffect(
+    React.useCallback(() => {
+      convo.resume()
+
+      return () => {
+        convo.suspend()
+      }
+    }, [convo]),
+  )
+
   return <ChatContext.Provider value={service}>{children}</ChatContext.Provider>
 }