-
-
- {relationshipPrompt}
-
- {messages}
-
+ return (
+
+ {relationshipPrompt}
+
+ {messages}
-
-
,
+
);
}
- containerRef = (container: ?HTMLDivElement) => {
- if (container) {
- container.addEventListener('paste', this.onPaste);
- }
- this.container = container;
- };
-
- onPaste = (e: ClipboardEvent) => {
- const { inputState } = this.props;
- if (!inputState) {
- return;
- }
- const { clipboardData } = e;
- if (!clipboardData) {
- return;
- }
- const { files } = clipboardData;
- if (files.length === 0) {
- return;
- }
- e.preventDefault();
- inputState.appendFiles([...files]);
- };
-
messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer;
// In case we already have all the most recent messages,
// but they're not enough
this.possiblyLoadMoreMessages();
if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll);
}
};
onScroll = () => {
if (!this.messageContainer) {
return;
}
if (this.state.mouseOverMessagePosition) {
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages();
};
possiblyLoadMoreMessages() {
if (!this.messageContainer) {
return;
}
const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
if (
this.props.startReached ||
Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
) {
return;
}
if (this.loadingFromScroll) {
return;
}
this.loadingFromScroll = true;
const threadID = this.props.activeChatThreadID;
invariant(threadID, 'should be set');
const oldestMessageServerID = this.oldestMessageServerID();
if (oldestMessageServerID) {
this.props.dispatchActionPromise(
fetchMessagesBeforeCursorActionTypes,
this.props.fetchMessagesBeforeCursor(threadID, oldestMessageServerID),
);
} else {
this.props.dispatchActionPromise(
fetchMostRecentMessagesActionTypes,
this.props.fetchMostRecentMessages(threadID),
);
}
}
oldestMessageServerID(): ?string {
const data = this.props.messageListData;
invariant(data, 'should be set');
for (let i = data.length - 1; i >= 0; i--) {
if (data[i].itemType === 'message' && data[i].messageInfo.id) {
return data[i].messageInfo.id;
}
}
return null;
}
}
registerFetchKey(fetchMessagesBeforeCursorActionTypes);
registerFetchKey(fetchMostRecentMessagesActionTypes);
-const ConnectedChatMessageList: React.ComponentType<{}> = React.memo<{}>(
- function ConnectedChatMessageList(): React.Node {
+const ConnectedChatMessageList: React.ComponentType
= React.memo(
+ function ConnectedChatMessageList(props: BaseProps): React.Node {
+ const { threadInfo } = props;
const userAgent = useSelector(state => state.userAgent);
const supportsReverseFlex = React.useMemo(() => {
const browser = detectBrowser(userAgent);
return (
!browser ||
browser.name !== 'firefox' ||
parseInt(browser.version) >= 81
);
}, [userAgent]);
const timeZone = useSelector(state => state.timeZone);
- const activeChatThreadID = useSelector(
- state => state.navInfo.activeChatThreadID,
- );
- const baseThreadInfo = useSelector(state => {
- const activeID = state.navInfo.activeChatThreadID;
- if (!activeID) {
- return null;
- }
- return threadInfoSelector(state)[activeID] ?? state.navInfo.pendingThread;
- });
- const existingThreadInfoFinder = useExistingThreadInfoFinder(
- baseThreadInfo,
- );
- const threadInfo = React.useMemo(
- () =>
- existingThreadInfoFinder({
- searching: false,
- userInfoInputArray: [],
- }),
- [existingThreadInfoFinder],
- );
-
const messageListData = useMessageListData({
threadInfo,
searching: false,
userInfoInputArray: [],
});
- const startReached = useSelector(state => {
- const activeID = state.navInfo.activeChatThreadID;
+ const startReached = !!useSelector(state => {
+ const activeID = threadInfo.id;
if (!activeID) {
return null;
}
- if (threadIsPending(threadInfo?.id)) {
+ if (threadIsPending(activeID)) {
return true;
}
const threadMessageInfo = state.messageStore.threads[activeID];
if (!threadMessageInfo) {
return null;
}
return threadMessageInfo.startReached;
});
const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor,
);
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext);
- const [dndProps, connectDropTarget] = useDrop({
- accept: NativeTypes.FILE,
- drop: item => {
- const { files } = item;
- if (inputState && files.length > 0) {
- inputState.appendFiles(files);
- }
- },
- collect: monitor => ({
- isActive: monitor.isOver() && monitor.canDrop(),
- }),
- });
- const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo?.id);
+ const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) {
return undefined;
}
return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]);
- useWatchThread(threadInfo);
-
return (
);
},
);
export default ConnectedChatMessageList;
diff --git a/web/chat/chat.react.js b/web/chat/chat.react.js
index 022dcd643..e064ab097 100644
--- a/web/chat/chat.react.js
+++ b/web/chat/chat.react.js
@@ -1,22 +1,22 @@
// @flow
import * as React from 'react';
-import ChatMessageList from './chat-message-list.react';
+import ChatMessageListContainer from './chat-message-list-container.react';
import ChatTabs from './chat-tabs.react';
import { ThreadListProvider } from './thread-list-provider';
function Chat(): React.Node {
return (
<>
-
+
);
}
const MemoizedChat: React.ComponentType<{}> = React.memo<{}>(Chat);
export default MemoizedChat;