Differential D8011 Diff 27741 web/chat/chat-message-list-container.react.js

Changeset View

Standalone View

web/chat/chat-message-list-container.react.js

// @flow		// @flow

import classNames from 'classnames';		import classNames from 'classnames';
import invariant from 'invariant';		import invariant from 'invariant';
import _isEqual from 'lodash/fp/isEqual.js';
import * as React from 'react';		import * as React from 'react';
import { useDrop } from 'react-dnd';		import { useDrop } from 'react-dnd';
import { NativeTypes } from 'react-dnd-html5-backend';		import { NativeTypes } from 'react-dnd-html5-backend';
import { useDispatch } from 'react-redux';		import { useDispatch } from 'react-redux';

import { useWatchThread, threadIsPending } from 'lib/shared/thread-utils.js';		import { useWatchThread, threadIsPending } from 'lib/shared/thread-utils.js';

import ChatInputBar from './chat-input-bar.react.js';		import ChatInputBar from './chat-input-bar.react.js';
Show All 9 Lines
} from '../utils/thread-utils.js';		} from '../utils/thread-utils.js';

type Props = {		type Props = {
+activeChatThreadID: ?string,		+activeChatThreadID: ?string,
};		};

function ChatMessageListContainer(props: Props): React.Node {		function ChatMessageListContainer(props: Props): React.Node {
const { activeChatThreadID } = props;		const { activeChatThreadID } = props;
const {		const { isChatCreation, selectedUserInfos, otherUserInfos } =
isChatCreation,		useInfosForPendingThread();
selectedUserIDs,
otherUserInfos,
userInfoInputArray,
} = useInfosForPendingThread();

const threadInfo = useThreadInfoForPossiblyPendingThread(activeChatThreadID);		const threadInfo = useThreadInfoForPossiblyPendingThread(activeChatThreadID);
invariant(threadInfo, 'ThreadInfo should be set');		invariant(threadInfo, 'ThreadInfo should be set');

const dispatch = useDispatch();		const dispatch = useDispatch();

// The effect removes members from list in navInfo
// if some of the user IDs don't exist in redux store
React.useEffect(() => {
if (!isChatCreation) {
return;
}
const existingSelectedUsersSet = new Set(
userInfoInputArray.map(userInfo => userInfo.id),
);
if (
selectedUserIDs?.length !== existingSelectedUsersSet.size \|\|
!_isEqual(new Set(selectedUserIDs), existingSelectedUsersSet)
) {
dispatch({
type: updateNavInfoActionType,
payload: {
selectedUserList: Array.from(existingSelectedUsersSet),
},
});
}
}, [
dispatch,
isChatCreation,
otherUserInfos,
selectedUserIDs,
userInfoInputArray,
]);

React.useEffect(() => {		React.useEffect(() => {
if (isChatCreation && activeChatThreadID !== threadInfo?.id) {		if (isChatCreation && activeChatThreadID !== threadInfo?.id) {
let payload = {		let payload = {
activeChatThreadID: threadInfo?.id,		activeChatThreadID: threadInfo?.id,
};		};
if (threadIsPending(threadInfo?.id)) {		if (threadIsPending(threadInfo?.id)) {
payload = {		payload = {
...payload,		...payload,
▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines	if (!isChatCreation) {
<>		<>
{topBar}		{topBar}
{messageListAndInput}		{messageListAndInput}
</>		</>
);		);
}		}
const chatUserSelection = (		const chatUserSelection = (
<ChatThreadComposer		<ChatThreadComposer
userInfoInputArray={userInfoInputArray}		userInfoInputArray={selectedUserInfos}
otherUserInfos={otherUserInfos}		otherUserInfos={otherUserInfos}
threadID={threadInfo.id}		threadID={threadInfo.id}
inputState={inputState}		inputState={inputState}
/>		/>
);		);

if (!userInfoInputArray.length) {		if (!selectedUserInfos.length) {
return chatUserSelection;		return chatUserSelection;
}		}
return (		return (
<>		<>
{topBar}		{topBar}
{chatUserSelection}		{chatUserSelection}
{messageListAndInput}		{messageListAndInput}
</>		</>
);		);
}, [		}, [
inputState,		inputState,
isChatCreation,		isChatCreation,
otherUserInfos,		otherUserInfos,
		selectedUserInfos,
threadInfo,		threadInfo,
userInfoInputArray,
]);		]);

return connectDropTarget(		return connectDropTarget(
<div className={containerStyle} ref={containerRef}>		<div className={containerStyle} ref={containerRef}>
{content}		{content}
</div>,		</div>,
);		);
}		}

export default ChatMessageListContainer;		export default ChatMessageListContainer;