diff --git a/lib/actions/message-actions.js b/lib/actions/message-actions.js --- a/lib/actions/message-actions.js +++ b/lib/actions/message-actions.js @@ -3,6 +3,7 @@ import invariant from 'invariant'; import * as React from 'react'; +import { useOldestMessageServerID } from '../hooks/message-hooks.js'; import type { CallSingleKeyserverEndpointResultInfo } from '../keyserver-conn/call-single-keyserver-endpoint.js'; import { extractKeyserverIDFromIDOptional, @@ -11,6 +12,7 @@ } from '../keyserver-conn/keyserver-call-utils.js'; import { useKeyserverCall } from '../keyserver-conn/keyserver-call.js'; import type { CallKeyserverEndpoint } from '../keyserver-conn/keyserver-conn-types.js'; +import { registerFetchKey } from '../reducers/loading-reducer.js'; import type { FetchMessageInfosPayload, SendMessageResult, @@ -29,12 +31,15 @@ } from '../types/message-types.js'; import { defaultNumberPerThread } from '../types/message-types.js'; import type { MediaMessageServerDBContent } from '../types/messages/media.js'; +import type { ThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js'; +import { threadTypeIsThick } from '../types/thread-types-enum.js'; import type { ToggleMessagePinRequest, ToggleMessagePinResult, } from '../types/thread-types.js'; import { getConfig } from '../utils/config.js'; import { translateClientDBMessageInfoToRawMessageInfo } from '../utils/message-ops-utils.js'; +import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; const fetchMessagesBeforeCursorActionTypes = Object.freeze({ started: 'FETCH_MESSAGES_BEFORE_CURSOR_STARTED', @@ -540,6 +545,46 @@ return useKeyserverCall(toggleMessagePin); } +function useFetchMessages(threadInfo: ThreadInfo): () => Promise { + const oldestMessageServerID = useOldestMessageServerID(threadInfo.id); + const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor(); + const callFetchMostRecentMessages = useFetchMostRecentMessages(); + const dispatchActionPromise = useDispatchActionPromise(); + + React.useEffect(() => { + registerFetchKey(fetchMessagesBeforeCursorActionTypes); + registerFetchKey(fetchMostRecentMessagesActionTypes); + }, []); + + return React.useCallback(async () => { + const threadID = threadInfo.id; + if (threadTypeIsThick(threadInfo.type)) { + return; + } + if (oldestMessageServerID) { + await dispatchActionPromise( + fetchMessagesBeforeCursorActionTypes, + callFetchMessagesBeforeCursor({ + threadID, + beforeMessageID: oldestMessageServerID, + }), + ); + } else { + await dispatchActionPromise( + fetchMostRecentMessagesActionTypes, + callFetchMostRecentMessages({ threadID }), + ); + } + }, [ + callFetchMessagesBeforeCursor, + callFetchMostRecentMessages, + dispatchActionPromise, + oldestMessageServerID, + threadInfo.id, + threadInfo.type, + ]); +} + export { fetchMessagesBeforeCursorActionTypes, useFetchMessagesBeforeCursor, @@ -566,4 +611,5 @@ fetchPinnedMessageActionTypes, toggleMessagePinActionTypes, useToggleMessagePin, + useFetchMessages, }; diff --git a/native/chat/message-list.react.js b/native/chat/message-list.react.js --- a/native/chat/message-list.react.js +++ b/native/chat/message-list.react.js @@ -6,25 +6,11 @@ import { TouchableWithoutFeedback, View } from 'react-native'; import { createSelector } from 'reselect'; -import { - fetchMessagesBeforeCursorActionTypes, - type FetchMessagesBeforeCursorInput, - fetchMostRecentMessagesActionTypes, - type FetchMostRecentMessagesInput, - useFetchMessagesBeforeCursor, - useFetchMostRecentMessages, -} from 'lib/actions/message-actions.js'; -import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js'; -import { registerFetchKey } from 'lib/reducers/loading-reducer.js'; +import { useFetchMessages } from 'lib/actions/message-actions.js'; import { messageKey } from 'lib/shared/message-utils.js'; import { useWatchThread } from 'lib/shared/watch-thread-utils.js'; -import type { FetchMessageInfosPayload } from 'lib/types/message-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; -import { - type DispatchActionPromise, - useDispatchActionPromise, -} from 'lib/utils/redux-promise-utils.js'; import ChatList from './chat-list.react.js'; import type { ChatNavigationProp } from './chat.react.js'; @@ -78,16 +64,9 @@ +startReached: boolean, +styles: $ReadOnly, +indicatorStyle: IndicatorStyle, - +dispatchActionPromise: DispatchActionPromise, - +fetchMessagesBeforeCursor: ( - input: FetchMessagesBeforeCursorInput, - ) => Promise, - +fetchMostRecentMessages: ( - input: FetchMostRecentMessagesInput, - ) => Promise, +overlayContext: ?OverlayContextType, +keyboardState: ?KeyboardState, - +oldestMessageServerID: ?string, + +fetchMessages: () => Promise, }; type State = { +focusedMessageKey: ?string, @@ -300,25 +279,10 @@ } this.setState({ loadingFromScroll: true }); - const { oldestMessageServerID } = this.props; - const threadID = this.props.threadInfo.id; void (async () => { try { - if (oldestMessageServerID) { - await this.props.dispatchActionPromise( - fetchMessagesBeforeCursorActionTypes, - this.props.fetchMessagesBeforeCursor({ - threadID, - beforeMessageID: oldestMessageServerID, - }), - ); - } else { - await this.props.dispatchActionPromise( - fetchMostRecentMessagesActionTypes, - this.props.fetchMostRecentMessages({ threadID }), - ); - } + await this.props.fetchMessages(); } finally { this.setState({ loadingFromScroll: false }); } @@ -326,9 +290,6 @@ }; } -registerFetchKey(fetchMessagesBeforeCursorActionTypes); -registerFetchKey(fetchMostRecentMessagesActionTypes); - const ConnectedMessageList: React.ComponentType = React.memo(function ConnectedMessageList(props: BaseProps) { const keyboardState = React.useContext(KeyboardContext); @@ -346,11 +307,7 @@ const styles = useStyles(unboundStyles); const indicatorStyle = useIndicatorStyle(); - const dispatchActionPromise = useDispatchActionPromise(); - const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor(); - const callFetchMostRecentMessages = useFetchMostRecentMessages(); - - const oldestMessageServerID = useOldestMessageServerID(threadID); + const fetchMessages = useFetchMessages(props.threadInfo); useWatchThread(props.threadInfo); @@ -360,12 +317,9 @@ startReached={startReached} styles={styles} indicatorStyle={indicatorStyle} - dispatchActionPromise={dispatchActionPromise} - fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} - fetchMostRecentMessages={callFetchMostRecentMessages} overlayContext={overlayContext} keyboardState={keyboardState} - oldestMessageServerID={oldestMessageServerID} + fetchMessages={fetchMessages} /> ); }); diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js --- a/web/chat/chat-message-list.react.js +++ b/web/chat/chat-message-list.react.js @@ -6,19 +6,8 @@ import _debounce from 'lodash/debounce.js'; import * as React from 'react'; -import type { - FetchMessagesBeforeCursorInput, - FetchMostRecentMessagesInput, -} from 'lib/actions/message-actions.js'; -import { - fetchMessagesBeforeCursorActionTypes, - fetchMostRecentMessagesActionTypes, - useFetchMessagesBeforeCursor, - useFetchMostRecentMessages, -} from 'lib/actions/message-actions.js'; +import { useFetchMessages } from 'lib/actions/message-actions.js'; import { useThreadChatMentionCandidates } from 'lib/hooks/chat-mention-hooks.js'; -import { useOldestMessageServerID } from 'lib/hooks/message-hooks.js'; -import { registerFetchKey } from 'lib/reducers/loading-reducer.js'; import { type ChatMessageItem, useMessageListData, @@ -28,13 +17,8 @@ threadIsPending, threadOtherMembers, } from 'lib/shared/thread-utils.js'; -import type { FetchMessageInfosPayload } from 'lib/types/message-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; -import { - type DispatchActionPromise, - useDispatchActionPromise, -} from 'lib/utils/redux-promise-utils.js'; import { defaultMaxTextAreaHeight, editBoxHeight } from './chat-constants.js'; import css from './chat-message-list.css'; @@ -66,20 +50,13 @@ +activeChatThreadID: ?string, +messageListData: ?$ReadOnlyArray, +startReached: boolean, - +dispatchActionPromise: DispatchActionPromise, - +fetchMessagesBeforeCursor: ( - input: FetchMessagesBeforeCursorInput, - ) => Promise, - +fetchMostRecentMessages: ( - input: FetchMostRecentMessagesInput, - ) => Promise, +inputState: ?InputState, +clearTooltip: () => mixed, - +oldestMessageServerID: ?string, +isEditState: boolean, +addScrollToMessageListener: ScrollToMessageCallback => mixed, +removeScrollToMessageListener: ScrollToMessageCallback => mixed, +viewerID: ?string, + +fetchMessages: () => Promise, }; type Snapshot = { +scrollTop: number, @@ -401,33 +378,14 @@ } this.loadingFromScroll = true; - const threadID = this.props.activeChatThreadID; - invariant(threadID, 'should be set'); - try { - const { oldestMessageServerID } = this.props; - if (oldestMessageServerID) { - await this.props.dispatchActionPromise( - fetchMessagesBeforeCursorActionTypes, - this.props.fetchMessagesBeforeCursor({ - threadID, - beforeMessageID: oldestMessageServerID, - }), - ); - } else { - await this.props.dispatchActionPromise( - fetchMostRecentMessagesActionTypes, - this.props.fetchMostRecentMessages({ threadID }), - ); - } + await this.props.fetchMessages(); } finally { this.loadingFromScroll = false; } } } -registerFetchKey(fetchMessagesBeforeCursorActionTypes); -registerFetchKey(fetchMostRecentMessagesActionTypes); const ConnectedChatMessageList: React.ComponentType = React.memo(function ConnectedChatMessageList( props: BaseProps, @@ -456,9 +414,7 @@ return threadMessageInfo.startReached; }); - const dispatchActionPromise = useDispatchActionPromise(); - const callFetchMessagesBeforeCursor = useFetchMessagesBeforeCursor(); - const callFetchMostRecentMessages = useFetchMostRecentMessages(); + const fetchMessages = useFetchMessages(threadInfo); const inputState = React.useContext(InputStateContext); @@ -476,8 +432,6 @@ return { getTextMessageMarkdownRules }; }, [getTextMessageMarkdownRules]); - const oldestMessageServerID = useOldestMessageServerID(threadInfo.id); - const { editState, addScrollToMessageListener, @@ -495,15 +449,12 @@ messageListData={messageListData} startReached={startReached} inputState={inputState} - dispatchActionPromise={dispatchActionPromise} - fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} - fetchMostRecentMessages={callFetchMostRecentMessages} clearTooltip={clearTooltip} - oldestMessageServerID={oldestMessageServerID} isEditState={isEditState} addScrollToMessageListener={addScrollToMessageListener} removeScrollToMessageListener={removeScrollToMessageListener} viewerID={viewerID} + fetchMessages={fetchMessages} /> );