Refactor useMessageList usage

Author: nicodh

packages/frontend/src/components/message/MessageList.tsx

@@ -128,33 +128,35 @@ type Props = {
   chat: T.FullChat
   refComposer: any
   messageListStore: MessageListStore
+  messageListState: ReturnType<MessageListStore['getState']>
+  fetchMoreBottom: () => void
+  fetchMoreTop: () => void
 }
 
 export default function MessageList({
   accountId,
   chat,
   refComposer,
   messageListStore,
+  messageListState,
+  fetchMoreBottom,
+  fetchMoreTop,
 }: Props) {
   const {
-    store: {
-      scheduler,
-      effect: { jumpToMessage, loadMissingMessages },
-      reducer: { unlockScroll, clearJumpStack },
-      activeView,
-    },
-    state: {
-      oldestFetchedMessageListItemIndex,
-      newestFetchedMessageListItemIndex,
-      messageCache,
-      messageListItems,
-      viewState,
-      jumpToMessageStack,
-      loaded,
-    },
-    fetchMoreBottom,
-    fetchMoreTop,
-  } = useMessageList(messageListStore, accountId, chat.id)
+    scheduler,
+    effect: { jumpToMessage, loadMissingMessages },
+    reducer: { unlockScroll, clearJumpStack },
+    activeView,
+  } = messageListStore
+  const {
+    oldestFetchedMessageListItemIndex,
+    newestFetchedMessageListItemIndex,
+    messageCache,
+    messageListItems,
+    viewState,
+    jumpToMessageStack,
+    loaded,
+  } = messageListState
   const { hideReactionsBar, isReactionsBarShown } = useReactionsBar()
 
   const messageListRef = useRef<HTMLDivElement | null>(null)

packages/frontend/src/components/message/MessageListAndComposer.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback, useMemo } from 'react'
+import React, { useRef, useEffect, useCallback } from 'react'
 import { join, parse, ParsedPath } from 'path'
 import { T } from '@deltachat/jsonrpc-client'
 
@@ -16,7 +16,7 @@ import { ReactionsBarProvider } from '../ReactionsBar'
 import useDialog from '../../hooks/dialog/useDialog'
 import useMessage from '../../hooks/chat/useMessage'
 import { Viewtype } from '@deltachat/jsonrpc-client/dist/generated/types'
-import { MessageListStore } from '../../stores/messagelist'
+import { useMessageList } from '../../stores/messagelist'
 
 const log = getLogger('renderer/MessageListAndComposer')
 
@@ -100,17 +100,16 @@ export default function MessageListAndComposer({ accountId, chat }: Props) {
   const { openDialog, hasOpenDialogs } = useDialog()
   const { sendMessage } = useMessage()
 
-  // Create a store instance and share it between
-  // useMessageList and useDraft to avoid redundant data loading
-  const messageListStore = useMemo(() => {
-    const store = new MessageListStore(accountId, chat.id)
-    // Initialize the store
-    store.effect.loadChat()
-    return store
-  }, [accountId, chat.id])
-
   const regularMessageInputRef = useRef<ComposerMessageInput>(null)
   const editMessageInputRef = useRef<ComposerMessageInput>(null)
+
+  const {
+    store: messageListStore,
+    state: messageListState,
+    fetchMoreBottom,
+    fetchMoreTop,
+  } = useMessageList(accountId, chat.id)
+
   const {
     draftState,
     updateDraftText,
@@ -122,7 +121,7 @@ export default function MessageListAndComposer({ accountId, chat }: Props) {
     clearDraftStateAndUpdateTextareaValue,
     setDraftStateAndUpdateTextareaValue,
   } = useDraft(
-    messageListStore,
+    messageListState,
     accountId,
     chat.id,
     chat.isContactRequest,
@@ -307,6 +306,9 @@ export default function MessageListAndComposer({ accountId, chat }: Props) {
               chat={chat}
               refComposer={refComposer}
               messageListStore={messageListStore}
+              messageListState={messageListState}
+              fetchMoreBottom={fetchMoreBottom}
+              fetchMoreTop={fetchMoreTop}
             />
           </ReactionsBarProvider>
         </RecoverableCrashScreen>

packages/frontend/src/hooks/chat/useDraft.ts

@@ -9,7 +9,7 @@ import { MessageTypeAttachmentSubset } from '../../components/attachment/Attachm
 import { KeybindAction } from '../../keybindings'
 import useMessage from './useMessage'
 import ComposerMessageInput from '../../components/composer/ComposerMessageInput'
-import { MessageListStore, useMessageListStore } from '../../stores/messagelist'
+import { MessageListStore } from '../../stores/messagelist'
 
 const log = getLogger('renderer/composer')
 
@@ -35,7 +35,7 @@ function emptyDraft(chatId: number | null): DraftObject {
 }
 
 export function useDraft(
-  messageListStore: MessageListStore,
+  messageListState: MessageListStore['state'],
   accountId: number,
   chatId: number | null,
   isContactRequest: boolean,
@@ -71,10 +71,6 @@ export function useDraft(
     _setDraftStateButKeepTextareaValue,
   ] = useState<DraftObject>(emptyDraft(chatId))
 
-  // Use the shared store to access the message cache and list of messages
-  const { messageCache, messageListItems } =
-    useMessageListStore(messageListStore)
-
   /**
    * `draftRef.current` gets set to `draftState` on every render.
    * That is, when you mutate the value of this ref,
@@ -266,14 +262,12 @@ export function useDraft(
     if (chatId == undefined || !canSend) {
       return
     }
-    const quoteMessage = (messageId: number, jumpToOnly = false) => {
-      if (!jumpToOnly) {
-        draftRef.current.quote = {
-          kind: 'WithMessage',
-          messageId,
-        } as Type.MessageQuote
-        saveDraft()
-      }
+    const quoteMessage = (messageId: number) => {
+      draftRef.current.quote = {
+        kind: 'WithMessage',
+        messageId,
+      } as Type.MessageQuote
+      saveDraft()
 
       // TODO perf: jumpToMessage is not instant, but it should be
       // since the message is (almost?) always already rendered.
@@ -294,12 +288,12 @@ export function useDraft(
      *
      * see https://github.com/deltachat/deltachat-desktop/blob/77a1f88a351df49e5df38a14c3a1704a76ecdcb3/packages/frontend/src/components/message/Message.tsx#L274-L278
      */
-    const messageIds = Object.keys(messageCache)
+    const messageIds = Object.keys(messageListState.messageCache)
       .map(Number)
       .filter(
         id =>
-          messageCache[id]?.kind === 'message' &&
-          messageCache[id]?.isInfo === false
+          messageListState.messageCache[id]?.kind === 'message' &&
+          messageListState.messageCache[id]?.isInfo === false
       )
     const currQuote = draftRef.current.quote
     if (!currQuote) {
@@ -317,7 +311,7 @@ export function useDraft(
       // maybe the message is just not in the cache (yet)
       // but still in the full list of messages
       // -> check if it's there
-      const isQuoteInMessagelist = messageListItems.some(
+      const isQuoteInMessagelist = messageListState.messageListItems.some(
         m => m.kind === 'message' && m.msg_id === currQuote.messageId
       )
       if (isQuoteInMessagelist) {

packages/frontend/src/stores/messagelist.ts

@@ -10,7 +10,7 @@ import {
   defaultChatViewState,
 } from './chat/chat_view_reducer'
 import { ChatStoreScheduler } from './chat/chat_scheduler'
-import { useEffect, useReducer, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useMemo } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { debounce } from 'debounce'
 import { getLogger } from '@deltachat-desktop/shared/logger'
@@ -58,7 +58,6 @@ const defaultState = () =>
  * of messages as per PAGE_SIZE constant. The store is also used in useDraft to avoid redundant data loading.
  */
 export function useMessageList(
-  store: MessageListStore,
   accountId: number,
   chatId: number
 ): {
@@ -67,6 +66,12 @@ export function useMessageList(
   fetchMoreBottom: () => void
   fetchMoreTop: () => void
 } {
+  const store = useMemo(() => {
+    const store = new MessageListStore(accountId, chatId)
+    store.effect.loadChat()
+    return store
+  }, [accountId, chatId])
+
   // PERF: It's a shame that we have to re-render on settings changes
   // even though we only depend on `volume`,
   // but let's hope the React compiler will take care of this
@@ -1190,20 +1195,3 @@ async function loadMessages(
 
   return await BackendRemote.rpc.getMessages(accountId, view)
 }
-
-// Custom hook to reactively access message list store state
-export const useMessageListStore = (messageListStore: MessageListStore) => {
-  const [, forceUpdate] = useReducer(x => x + 1, 0)
-
-  useEffect(() => {
-    const unsubscribe = messageListStore.subscribe(() => {
-      forceUpdate()
-    })
-    return unsubscribe
-  }, [messageListStore])
-
-  return {
-    messageCache: messageListStore.state.messageCache,
-    messageListItems: messageListStore.state.messageListItems,
-  }
-}