Page MenuHomePhabricator
Differential D9086

[keyserver] Read calendar query directly from viewer.
ClosedPublic
Actions

Authored by tomek on Sep 5 2023, 8:31 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Apr 24, 8:14 PM
Unknown Object (File)
Fri, Apr 11, 9:50 PM
Unknown Object (File)
Tue, Apr 1, 11:35 PM
Unknown Object (File)
Fri, Mar 28, 8:07 PM
Unknown Object (File)
Mar 13 2025, 10:29 PM
Unknown Object (File)
Mar 1 2025, 3:25 PM
Unknown Object (File)
Mar 1 2025, 3:25 PM
Unknown Object (File)
Mar 1 2025, 3:23 PM
View All Files
Subscribers
ashoat

Details

Reviewers
kamil
bartek
inka
Commits
rCOMMa544318ebcdb: [keyserver] Read calendar query directly from viewer.
Summary

We were providing calendar query to a fetch from a spec as a separate parameter. Each time a value for this parameter was computed, it was taken from the viewer object. It means that we can simplify the code by reading the query inside specs that need it.

https://linear.app/comm/issue/ENG-4822/consider-using-calendarquery-from-viewer-inside-state-sync-specs

Depends on D9081

Test Plan

Modify server state and check if state check fixes client state.

Diff Detail

Repository
rCOMM Comm
Branch
state-sync
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

PathSize
keyserver/
src/
shared/
state-sync/
7 lines
6 lines
7 lines
7 lines
socket/
7 lines
9 lines

Diff 30779

View Options

keyserver/src/shared/state-sync/entries-state-sync-spec.js

Show All 26 Lines
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import { type InputState, InputStateContext } from '../input/input-state'; import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react'; import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react'; import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css'; import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types'; import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react'; import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt'; import RelationshipPrompt from './relationship-prompt/relationship-prompt';
import { useTooltipContext } from './tooltip-provider';
type BaseProps = { type BaseProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
Show All 9 Lines +fetchMessagesBeforeCursor: (
threadID: string, threadID: string,
beforeMessageID: string, beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: ( +fetchMostRecentMessages: (
threadID: string, threadID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
}; +clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
}; };
type Snapshot = { type Snapshot = {
+scrollTop: number, +scrollTop: number,
+scrollHeight: number, +scrollHeight: number,
}; };
class ChatMessageList extends React.PureComponent<Props, State> { class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement; container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement; messageContainer: ?HTMLDivElement;
loadingFromScroll = false; loadingFromScroll = false;
componentDidMount() { componentDidMount() {
this.scrollToBottom(); this.scrollToBottom();
} }
Show All 18 Lines if (!prevMessageListData || prevMessageListData.length === 0) {
return true; return true;
} }
return ( return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !== ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0]) ChatMessageList.keyExtractor(messageListData[0])
); );
} }
componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) { componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props; const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData; const prevMessageListData = prevProps.messageListData;
if ( if (
this.loadingFromScroll && this.loadingFromScroll &&
messageListData && messageListData &&
(!prevMessageListData || (!prevMessageListData ||
messageListData.length > prevMessageListData.length || messageListData.length > prevMessageListData.length ||
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines if (item.itemType === 'loader') {
); );
} }
const { threadInfo } = this.props; const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is'); invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return ( return (
<Message <Message
item={item} item={item}
threadInfo={threadInfo} threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone} timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)} key={ChatMessageList.keyExtractor(item)}
/> />
); );
}; };
setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};
render() { render() {
const { messageListData, threadInfo, inputState } = this.props; const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) { if (!messageListData) {
return <div className={css.container} />; return <div className={css.container} />;
} }
invariant(inputState, 'InputState should be set'); invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem); const messages = messageListData.map(this.renderItem);
let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}
let relationshipPrompt; let relationshipPrompt;
if (threadInfo) { if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />; relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
} }
const messageContainerStyle = classNames({ const messageContainerStyle = classNames({
[css.messageContainer]: true, [css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex, [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
}); });
return ( return (
<div className={css.outerMessageContainer}> <div className={css.outerMessageContainer}>
{relationshipPrompt} {relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}> <div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages} {messages}
</div> </div>
{tooltip}
</div> </div>
); );
} }
messageContainerRef = (messageContainer: ?HTMLDivElement) => { messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer; this.messageContainer = messageContainer;
// In case we already have all the most recent messages, // In case we already have all the most recent messages,
// but they're not enough // but they're not enough
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
if (messageContainer) { if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll); messageContainer.addEventListener('scroll', this.onScroll);
} }
}; };
onScroll = () => { onScroll = () => {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
if (this.state.mouseOverMessagePosition) { this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
}; };
possiblyLoadMoreMessages() { possiblyLoadMoreMessages() {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall( const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor, fetchMessagesBeforeCursor,
); );
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages); const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const { clearTooltip } = useTooltipContext();
const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id); const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => { const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) { if (!getTextMessageMarkdownRules) {
return undefined; return undefined;
} }
return { getTextMessageMarkdownRules }; return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]); }, [getTextMessageMarkdownRules]);
return ( return (
<MessageListContext.Provider value={messageListContext}> <MessageListContext.Provider value={messageListContext}>
<ChatMessageList <ChatMessageList
activeChatThreadID={threadInfo.id} activeChatThreadID={threadInfo.id}
threadInfo={threadInfo} threadInfo={threadInfo}
messageListData={messageListData} messageListData={messageListData}
startReached={startReached} startReached={startReached}
timeZone={timeZone} timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex} supportsReverseFlex={supportsReverseFlex}
inputState={inputState} inputState={inputState}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages} fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}
/> />
</MessageListContext.Provider> </MessageListContext.Provider>
); );
}, },
); );
export default ConnectedChatMessageList; export default ConnectedChatMessageList;
View Options

keyserver/src/shared/state-sync/state-sync-spec.js

Show All 26 Lines
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import { type InputState, InputStateContext } from '../input/input-state'; import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react'; import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react'; import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css'; import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types'; import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react'; import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt'; import RelationshipPrompt from './relationship-prompt/relationship-prompt';
import { useTooltipContext } from './tooltip-provider';
type BaseProps = { type BaseProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
Show All 9 Lines +fetchMessagesBeforeCursor: (
threadID: string, threadID: string,
beforeMessageID: string, beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: ( +fetchMostRecentMessages: (
threadID: string, threadID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
}; +clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
}; };
type Snapshot = { type Snapshot = {
+scrollTop: number, +scrollTop: number,
+scrollHeight: number, +scrollHeight: number,
}; };
class ChatMessageList extends React.PureComponent<Props, State> { class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement; container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement; messageContainer: ?HTMLDivElement;
loadingFromScroll = false; loadingFromScroll = false;
componentDidMount() { componentDidMount() {
this.scrollToBottom(); this.scrollToBottom();
} }
Show All 18 Lines if (!prevMessageListData || prevMessageListData.length === 0) {
return true; return true;
} }
return ( return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !== ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0]) ChatMessageList.keyExtractor(messageListData[0])
); );
} }
componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) { componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props; const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData; const prevMessageListData = prevProps.messageListData;
if ( if (
this.loadingFromScroll && this.loadingFromScroll &&
messageListData && messageListData &&
(!prevMessageListData || (!prevMessageListData ||
messageListData.length > prevMessageListData.length || messageListData.length > prevMessageListData.length ||
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines if (item.itemType === 'loader') {
); );
} }
const { threadInfo } = this.props; const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is'); invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return ( return (
<Message <Message
item={item} item={item}
threadInfo={threadInfo} threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone} timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)} key={ChatMessageList.keyExtractor(item)}
/> />
); );
}; };
setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};
render() { render() {
const { messageListData, threadInfo, inputState } = this.props; const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) { if (!messageListData) {
return <div className={css.container} />; return <div className={css.container} />;
} }
invariant(inputState, 'InputState should be set'); invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem); const messages = messageListData.map(this.renderItem);
let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}
let relationshipPrompt; let relationshipPrompt;
if (threadInfo) { if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />; relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
} }
const messageContainerStyle = classNames({ const messageContainerStyle = classNames({
[css.messageContainer]: true, [css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex, [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
}); });
return ( return (
<div className={css.outerMessageContainer}> <div className={css.outerMessageContainer}>
{relationshipPrompt} {relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}> <div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages} {messages}
</div> </div>
{tooltip}
</div> </div>
); );
} }
messageContainerRef = (messageContainer: ?HTMLDivElement) => { messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer; this.messageContainer = messageContainer;
// In case we already have all the most recent messages, // In case we already have all the most recent messages,
// but they're not enough // but they're not enough
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
if (messageContainer) { if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll); messageContainer.addEventListener('scroll', this.onScroll);
} }
}; };
onScroll = () => { onScroll = () => {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
if (this.state.mouseOverMessagePosition) { this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
}; };
possiblyLoadMoreMessages() { possiblyLoadMoreMessages() {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall( const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor, fetchMessagesBeforeCursor,
); );
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages); const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const { clearTooltip } = useTooltipContext();
const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id); const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => { const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) { if (!getTextMessageMarkdownRules) {
return undefined; return undefined;
} }
return { getTextMessageMarkdownRules }; return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]); }, [getTextMessageMarkdownRules]);
return ( return (
<MessageListContext.Provider value={messageListContext}> <MessageListContext.Provider value={messageListContext}>
<ChatMessageList <ChatMessageList
activeChatThreadID={threadInfo.id} activeChatThreadID={threadInfo.id}
threadInfo={threadInfo} threadInfo={threadInfo}
messageListData={messageListData} messageListData={messageListData}
startReached={startReached} startReached={startReached}
timeZone={timeZone} timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex} supportsReverseFlex={supportsReverseFlex}
inputState={inputState} inputState={inputState}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages} fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}
/> />
</MessageListContext.Provider> </MessageListContext.Provider>
); );
}, },
); );
export default ConnectedChatMessageList; export default ConnectedChatMessageList;
View Options

keyserver/src/shared/state-sync/threads-state-sync-spec.js

Show All 26 Lines
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import { type InputState, InputStateContext } from '../input/input-state'; import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react'; import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react'; import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css'; import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types'; import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react'; import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt'; import RelationshipPrompt from './relationship-prompt/relationship-prompt';
import { useTooltipContext } from './tooltip-provider';
type BaseProps = { type BaseProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
Show All 9 Lines +fetchMessagesBeforeCursor: (
threadID: string, threadID: string,
beforeMessageID: string, beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: ( +fetchMostRecentMessages: (
threadID: string, threadID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
}; +clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
}; };
type Snapshot = { type Snapshot = {
+scrollTop: number, +scrollTop: number,
+scrollHeight: number, +scrollHeight: number,
}; };
class ChatMessageList extends React.PureComponent<Props, State> { class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement; container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement; messageContainer: ?HTMLDivElement;
loadingFromScroll = false; loadingFromScroll = false;
componentDidMount() { componentDidMount() {
this.scrollToBottom(); this.scrollToBottom();
} }
Show All 18 Lines if (!prevMessageListData || prevMessageListData.length === 0) {
return true; return true;
} }
return ( return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !== ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0]) ChatMessageList.keyExtractor(messageListData[0])
); );
} }
componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) { componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props; const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData; const prevMessageListData = prevProps.messageListData;
if ( if (
this.loadingFromScroll && this.loadingFromScroll &&
messageListData && messageListData &&
(!prevMessageListData || (!prevMessageListData ||
messageListData.length > prevMessageListData.length || messageListData.length > prevMessageListData.length ||
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines if (item.itemType === 'loader') {
); );
} }
const { threadInfo } = this.props; const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is'); invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return ( return (
<Message <Message
item={item} item={item}
threadInfo={threadInfo} threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone} timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)} key={ChatMessageList.keyExtractor(item)}
/> />
); );
}; };
setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};
render() { render() {
const { messageListData, threadInfo, inputState } = this.props; const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) { if (!messageListData) {
return <div className={css.container} />; return <div className={css.container} />;
} }
invariant(inputState, 'InputState should be set'); invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem); const messages = messageListData.map(this.renderItem);
let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}
let relationshipPrompt; let relationshipPrompt;
if (threadInfo) { if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />; relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
} }
const messageContainerStyle = classNames({ const messageContainerStyle = classNames({
[css.messageContainer]: true, [css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex, [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
}); });
return ( return (
<div className={css.outerMessageContainer}> <div className={css.outerMessageContainer}>
{relationshipPrompt} {relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}> <div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages} {messages}
</div> </div>
{tooltip}
</div> </div>
); );
} }
messageContainerRef = (messageContainer: ?HTMLDivElement) => { messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer; this.messageContainer = messageContainer;
// In case we already have all the most recent messages, // In case we already have all the most recent messages,
// but they're not enough // but they're not enough
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
if (messageContainer) { if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll); messageContainer.addEventListener('scroll', this.onScroll);
} }
}; };
onScroll = () => { onScroll = () => {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
if (this.state.mouseOverMessagePosition) { this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
}; };
possiblyLoadMoreMessages() { possiblyLoadMoreMessages() {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall( const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor, fetchMessagesBeforeCursor,
); );
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages); const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const { clearTooltip } = useTooltipContext();
const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id); const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => { const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) { if (!getTextMessageMarkdownRules) {
return undefined; return undefined;
} }
return { getTextMessageMarkdownRules }; return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]); }, [getTextMessageMarkdownRules]);
return ( return (
<MessageListContext.Provider value={messageListContext}> <MessageListContext.Provider value={messageListContext}>
<ChatMessageList <ChatMessageList
activeChatThreadID={threadInfo.id} activeChatThreadID={threadInfo.id}
threadInfo={threadInfo} threadInfo={threadInfo}
messageListData={messageListData} messageListData={messageListData}
startReached={startReached} startReached={startReached}
timeZone={timeZone} timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex} supportsReverseFlex={supportsReverseFlex}
inputState={inputState} inputState={inputState}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages} fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}
/> />
</MessageListContext.Provider> </MessageListContext.Provider>
); );
}, },
); );
export default ConnectedChatMessageList; export default ConnectedChatMessageList;
View Options

keyserver/src/shared/state-sync/users-state-sync-spec.js

Show All 26 Lines
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import { type InputState, InputStateContext } from '../input/input-state'; import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react'; import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react'; import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css'; import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types'; import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react'; import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt'; import RelationshipPrompt from './relationship-prompt/relationship-prompt';
import { useTooltipContext } from './tooltip-provider';
type BaseProps = { type BaseProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
Show All 9 Lines +fetchMessagesBeforeCursor: (
threadID: string, threadID: string,
beforeMessageID: string, beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: ( +fetchMostRecentMessages: (
threadID: string, threadID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
}; +clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
}; };
type Snapshot = { type Snapshot = {
+scrollTop: number, +scrollTop: number,
+scrollHeight: number, +scrollHeight: number,
}; };
class ChatMessageList extends React.PureComponent<Props, State> { class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement; container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement; messageContainer: ?HTMLDivElement;
loadingFromScroll = false; loadingFromScroll = false;
componentDidMount() { componentDidMount() {
this.scrollToBottom(); this.scrollToBottom();
} }
Show All 18 Lines if (!prevMessageListData || prevMessageListData.length === 0) {
return true; return true;
} }
return ( return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !== ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0]) ChatMessageList.keyExtractor(messageListData[0])
); );
} }
componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) { componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props; const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData; const prevMessageListData = prevProps.messageListData;
if ( if (
this.loadingFromScroll && this.loadingFromScroll &&
messageListData && messageListData &&
(!prevMessageListData || (!prevMessageListData ||
messageListData.length > prevMessageListData.length || messageListData.length > prevMessageListData.length ||
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines if (item.itemType === 'loader') {
); );
} }
const { threadInfo } = this.props; const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is'); invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return ( return (
<Message <Message
item={item} item={item}
threadInfo={threadInfo} threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone} timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)} key={ChatMessageList.keyExtractor(item)}
/> />
); );
}; };
setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};
render() { render() {
const { messageListData, threadInfo, inputState } = this.props; const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) { if (!messageListData) {
return <div className={css.container} />; return <div className={css.container} />;
} }
invariant(inputState, 'InputState should be set'); invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem); const messages = messageListData.map(this.renderItem);
let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}
let relationshipPrompt; let relationshipPrompt;
if (threadInfo) { if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />; relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
} }
const messageContainerStyle = classNames({ const messageContainerStyle = classNames({
[css.messageContainer]: true, [css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex, [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
}); });
return ( return (
<div className={css.outerMessageContainer}> <div className={css.outerMessageContainer}>
{relationshipPrompt} {relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}> <div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages} {messages}
</div> </div>
{tooltip}
</div> </div>
); );
} }
messageContainerRef = (messageContainer: ?HTMLDivElement) => { messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer; this.messageContainer = messageContainer;
// In case we already have all the most recent messages, // In case we already have all the most recent messages,
// but they're not enough // but they're not enough
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
if (messageContainer) { if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll); messageContainer.addEventListener('scroll', this.onScroll);
} }
}; };
onScroll = () => { onScroll = () => {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
if (this.state.mouseOverMessagePosition) { this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
}; };
possiblyLoadMoreMessages() { possiblyLoadMoreMessages() {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall( const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor, fetchMessagesBeforeCursor,
); );
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages); const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const { clearTooltip } = useTooltipContext();
const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id); const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => { const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) { if (!getTextMessageMarkdownRules) {
return undefined; return undefined;
} }
return { getTextMessageMarkdownRules }; return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]); }, [getTextMessageMarkdownRules]);
return ( return (
<MessageListContext.Provider value={messageListContext}> <MessageListContext.Provider value={messageListContext}>
<ChatMessageList <ChatMessageList
activeChatThreadID={threadInfo.id} activeChatThreadID={threadInfo.id}
threadInfo={threadInfo} threadInfo={threadInfo}
messageListData={messageListData} messageListData={messageListData}
startReached={startReached} startReached={startReached}
timeZone={timeZone} timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex} supportsReverseFlex={supportsReverseFlex}
inputState={inputState} inputState={inputState}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages} fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}
/> />
</MessageListContext.Provider> </MessageListContext.Provider>
); );
}, },
); );
export default ConnectedChatMessageList; export default ConnectedChatMessageList;
View Options

keyserver/src/socket/session-utils.js

Show All 26 Lines
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import { type InputState, InputStateContext } from '../input/input-state'; import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react'; import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react'; import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css'; import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types'; import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react'; import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt'; import RelationshipPrompt from './relationship-prompt/relationship-prompt';
import { useTooltipContext } from './tooltip-provider';
type BaseProps = { type BaseProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
Show All 9 Lines +fetchMessagesBeforeCursor: (
threadID: string, threadID: string,
beforeMessageID: string, beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: ( +fetchMostRecentMessages: (
threadID: string, threadID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
}; +clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
}; };
type Snapshot = { type Snapshot = {
+scrollTop: number, +scrollTop: number,
+scrollHeight: number, +scrollHeight: number,
}; };
class ChatMessageList extends React.PureComponent<Props, State> { class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement; container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement; messageContainer: ?HTMLDivElement;
loadingFromScroll = false; loadingFromScroll = false;
componentDidMount() { componentDidMount() {
this.scrollToBottom(); this.scrollToBottom();
} }
Show All 18 Lines if (!prevMessageListData || prevMessageListData.length === 0) {
return true; return true;
} }
return ( return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !== ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0]) ChatMessageList.keyExtractor(messageListData[0])
); );
} }
componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) { componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props; const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData; const prevMessageListData = prevProps.messageListData;
if ( if (
this.loadingFromScroll && this.loadingFromScroll &&
messageListData && messageListData &&
(!prevMessageListData || (!prevMessageListData ||
messageListData.length > prevMessageListData.length || messageListData.length > prevMessageListData.length ||
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines if (item.itemType === 'loader') {
); );
} }
const { threadInfo } = this.props; const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is'); invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return ( return (
<Message <Message
item={item} item={item}
threadInfo={threadInfo} threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone} timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)} key={ChatMessageList.keyExtractor(item)}
/> />
); );
}; };
setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};
render() { render() {
const { messageListData, threadInfo, inputState } = this.props; const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) { if (!messageListData) {
return <div className={css.container} />; return <div className={css.container} />;
} }
invariant(inputState, 'InputState should be set'); invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem); const messages = messageListData.map(this.renderItem);
let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}
let relationshipPrompt; let relationshipPrompt;
if (threadInfo) { if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />; relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
} }
const messageContainerStyle = classNames({ const messageContainerStyle = classNames({
[css.messageContainer]: true, [css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex, [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
}); });
return ( return (
<div className={css.outerMessageContainer}> <div className={css.outerMessageContainer}>
{relationshipPrompt} {relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}> <div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages} {messages}
</div> </div>
{tooltip}
</div> </div>
); );
} }
messageContainerRef = (messageContainer: ?HTMLDivElement) => { messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer; this.messageContainer = messageContainer;
// In case we already have all the most recent messages, // In case we already have all the most recent messages,
// but they're not enough // but they're not enough
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
if (messageContainer) { if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll); messageContainer.addEventListener('scroll', this.onScroll);
} }
}; };
onScroll = () => { onScroll = () => {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
if (this.state.mouseOverMessagePosition) { this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
}; };
possiblyLoadMoreMessages() { possiblyLoadMoreMessages() {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall( const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor, fetchMessagesBeforeCursor,
); );
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages); const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const { clearTooltip } = useTooltipContext();
const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id); const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => { const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) { if (!getTextMessageMarkdownRules) {
return undefined; return undefined;
} }
return { getTextMessageMarkdownRules }; return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]); }, [getTextMessageMarkdownRules]);
return ( return (
<MessageListContext.Provider value={messageListContext}> <MessageListContext.Provider value={messageListContext}>
<ChatMessageList <ChatMessageList
activeChatThreadID={threadInfo.id} activeChatThreadID={threadInfo.id}
threadInfo={threadInfo} threadInfo={threadInfo}
messageListData={messageListData} messageListData={messageListData}
startReached={startReached} startReached={startReached}
timeZone={timeZone} timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex} supportsReverseFlex={supportsReverseFlex}
inputState={inputState} inputState={inputState}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages} fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}
/> />
</MessageListContext.Provider> </MessageListContext.Provider>
); );
}, },
); );
export default ConnectedChatMessageList; export default ConnectedChatMessageList;
View Options

keyserver/src/socket/socket.js

Show All 26 Lines
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import { type InputState, InputStateContext } from '../input/input-state'; import { type InputState, InputStateContext } from '../input/input-state';
import LoadingIndicator from '../loading-indicator.react'; import LoadingIndicator from '../loading-indicator.react';
import { useTextMessageRulesFunc } from '../markdown/rules.react'; import { useTextMessageRulesFunc } from '../markdown/rules.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css'; import css from './chat-message-list.css';
import { MessageListContext } from './message-list-types'; import { MessageListContext } from './message-list-types';
import MessageTimestampTooltip from './message-timestamp-tooltip.react';
import Message from './message.react'; import Message from './message.react';
import type {
OnMessagePositionWithContainerInfo,
MessagePositionInfo,
} from './position-types';
import RelationshipPrompt from './relationship-prompt/relationship-prompt'; import RelationshipPrompt from './relationship-prompt/relationship-prompt';
import { useTooltipContext } from './tooltip-provider';
type BaseProps = { type BaseProps = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
}; };
type Props = { type Props = {
...BaseProps, ...BaseProps,
// Redux state // Redux state
Show All 9 Lines +fetchMessagesBeforeCursor: (
threadID: string, threadID: string,
beforeMessageID: string, beforeMessageID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
+fetchMostRecentMessages: ( +fetchMostRecentMessages: (
threadID: string, threadID: string,
) => Promise<FetchMessageInfosPayload>, ) => Promise<FetchMessageInfosPayload>,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
}; +clearTooltip: () => mixed,
type State = {
+mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
}; };
type Snapshot = { type Snapshot = {
+scrollTop: number, +scrollTop: number,
+scrollHeight: number, +scrollHeight: number,
}; };
class ChatMessageList extends React.PureComponent<Props, State> { class ChatMessageList extends React.PureComponent<Props> {
state: State = {
mouseOverMessagePosition: null,
};
container: ?HTMLDivElement; container: ?HTMLDivElement;
messageContainer: ?HTMLDivElement; messageContainer: ?HTMLDivElement;
loadingFromScroll = false; loadingFromScroll = false;
componentDidMount() { componentDidMount() {
this.scrollToBottom(); this.scrollToBottom();
} }
Show All 18 Lines if (!prevMessageListData || prevMessageListData.length === 0) {
return true; return true;
} }
return ( return (
ChatMessageList.keyExtractor(prevMessageListData[0]) !== ChatMessageList.keyExtractor(prevMessageListData[0]) !==
ChatMessageList.keyExtractor(messageListData[0]) ChatMessageList.keyExtractor(messageListData[0])
); );
} }
componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) { componentDidUpdate(prevProps: Props, prevState, snapshot: ?Snapshot) {
const { messageListData } = this.props; const { messageListData } = this.props;
const prevMessageListData = prevProps.messageListData; const prevMessageListData = prevProps.messageListData;
if ( if (
this.loadingFromScroll && this.loadingFromScroll &&
messageListData && messageListData &&
(!prevMessageListData || (!prevMessageListData ||
messageListData.length > prevMessageListData.length || messageListData.length > prevMessageListData.length ||
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines if (item.itemType === 'loader') {
); );
} }
const { threadInfo } = this.props; const { threadInfo } = this.props;
invariant(threadInfo, 'ThreadInfo should be set if messageListData is'); invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
return ( return (
<Message <Message
item={item} item={item}
threadInfo={threadInfo} threadInfo={threadInfo}
setMouseOverMessagePosition={this.setMouseOverMessagePosition}
mouseOverMessagePosition={this.state.mouseOverMessagePosition}
timeZone={this.props.timeZone} timeZone={this.props.timeZone}
key={ChatMessageList.keyExtractor(item)} key={ChatMessageList.keyExtractor(item)}
/> />
); );
}; };
setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
if (!this.messageContainer) {
return;
}
if (messagePositionInfo.type === 'off') {
this.setState({ mouseOverMessagePosition: null });
return;
}
const {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
} = this.messageContainer.getBoundingClientRect();
const mouseOverMessagePosition = {
...messagePositionInfo,
messagePosition: {
...messagePositionInfo.messagePosition,
top: messagePositionInfo.messagePosition.top - containerTop,
bottom: messagePositionInfo.messagePosition.bottom - containerTop,
left: messagePositionInfo.messagePosition.left - containerLeft,
right: messagePositionInfo.messagePosition.right - containerLeft,
},
containerPosition: {
top: containerTop,
bottom: containerBottom,
left: containerLeft,
right: containerRight,
height: containerHeight,
width: containerWidth,
},
};
this.setState({ mouseOverMessagePosition });
};
render() { render() {
const { messageListData, threadInfo, inputState } = this.props; const { messageListData, threadInfo, inputState } = this.props;
if (!messageListData) { if (!messageListData) {
return <div className={css.container} />; return <div className={css.container} />;
} }
invariant(inputState, 'InputState should be set'); invariant(inputState, 'InputState should be set');
const messages = messageListData.map(this.renderItem); const messages = messageListData.map(this.renderItem);
let tooltip;
if (this.state.mouseOverMessagePosition) {
const messagePositionInfo = this.state.mouseOverMessagePosition;
tooltip = (
<MessageTimestampTooltip
messagePositionInfo={messagePositionInfo}
timeZone={this.props.timeZone}
/>
);
}
let relationshipPrompt; let relationshipPrompt;
if (threadInfo) { if (threadInfo) {
relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />; relationshipPrompt = <RelationshipPrompt threadInfo={threadInfo} />;
} }
const messageContainerStyle = classNames({ const messageContainerStyle = classNames({
[css.messageContainer]: true, [css.messageContainer]: true,
[css.mirroredMessageContainer]: !this.props.supportsReverseFlex, [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
}); });
return ( return (
<div className={css.outerMessageContainer}> <div className={css.outerMessageContainer}>
{relationshipPrompt} {relationshipPrompt}
<div className={messageContainerStyle} ref={this.messageContainerRef}> <div className={messageContainerStyle} ref={this.messageContainerRef}>
{messages} {messages}
</div> </div>
{tooltip}
</div> </div>
); );
} }
messageContainerRef = (messageContainer: ?HTMLDivElement) => { messageContainerRef = (messageContainer: ?HTMLDivElement) => {
this.messageContainer = messageContainer; this.messageContainer = messageContainer;
// In case we already have all the most recent messages, // In case we already have all the most recent messages,
// but they're not enough // but they're not enough
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
if (messageContainer) { if (messageContainer) {
messageContainer.addEventListener('scroll', this.onScroll); messageContainer.addEventListener('scroll', this.onScroll);
} }
}; };
onScroll = () => { onScroll = () => {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
if (this.state.mouseOverMessagePosition) { this.props.clearTooltip();
this.setState({ mouseOverMessagePosition: null });
}
this.possiblyLoadMoreMessages(); this.possiblyLoadMoreMessages();
}; };
possiblyLoadMoreMessages() { possiblyLoadMoreMessages() {
if (!this.messageContainer) { if (!this.messageContainer) {
return; return;
} }
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines function ConnectedChatMessageList(props: BaseProps): React.Node {
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callFetchMessagesBeforeCursor = useServerCall( const callFetchMessagesBeforeCursor = useServerCall(
fetchMessagesBeforeCursor, fetchMessagesBeforeCursor,
); );
const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages); const callFetchMostRecentMessages = useServerCall(fetchMostRecentMessages);
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const { clearTooltip } = useTooltipContext();
const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id); const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo.id);
const messageListContext = React.useMemo(() => { const messageListContext = React.useMemo(() => {
if (!getTextMessageMarkdownRules) { if (!getTextMessageMarkdownRules) {
return undefined; return undefined;
} }
return { getTextMessageMarkdownRules }; return { getTextMessageMarkdownRules };
}, [getTextMessageMarkdownRules]); }, [getTextMessageMarkdownRules]);
return ( return (
<MessageListContext.Provider value={messageListContext}> <MessageListContext.Provider value={messageListContext}>
<ChatMessageList <ChatMessageList
activeChatThreadID={threadInfo.id} activeChatThreadID={threadInfo.id}
threadInfo={threadInfo} threadInfo={threadInfo}
messageListData={messageListData} messageListData={messageListData}
startReached={startReached} startReached={startReached}
timeZone={timeZone} timeZone={timeZone}
supportsReverseFlex={supportsReverseFlex} supportsReverseFlex={supportsReverseFlex}
inputState={inputState} inputState={inputState}
dispatchActionPromise={dispatchActionPromise} dispatchActionPromise={dispatchActionPromise}
fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor} fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
fetchMostRecentMessages={callFetchMostRecentMessages} fetchMostRecentMessages={callFetchMostRecentMessages}
clearTooltip={clearTooltip}
/> />
</MessageListContext.Provider> </MessageListContext.Provider>
); );
}, },
); );
export default ConnectedChatMessageList; export default ConnectedChatMessageList;