Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: memoize & add highlightDuration parameter to jumpTo[FirstUnread]Message #2414

Merged
merged 1 commit into from
Jun 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 40 additions & 27 deletions src/components/Channel/Channel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
import { TypingProvider } from '../../context/TypingContext';

import {
DEFAULT_HIGHLIGHT_DURATION,
DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
DEFAULT_JUMP_TO_PAGE_SIZE,
DEFAULT_NEXT_CHANNEL_PAGE_SIZE,
Expand Down Expand Up @@ -753,46 +754,58 @@

const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);

const jumpToMessage = async (messageId: string, messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE) => {
dispatch({ loadingMore: true, type: 'setLoadingMore' });
await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
const jumpToMessage = useCallback(
async (
messageId: string,
messageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
) => {
dispatch({ loadingMore: true, type: 'setLoadingMore' });
await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);

Check warning on line 764 in src/components/Channel/Channel.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Channel/Channel.tsx#L763-L764

Added lines #L763 - L764 were not covered by tests

/**
* if the message we are jumping to has less than half of the page size older messages,
* we have jumped to the beginning of the channel.
*/
const indexOfMessage = channel.state.messages.findIndex((message) => message.id === messageId);
const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);
/**
* if the message we are jumping to has less than half of the page size older messages,
* we have jumped to the beginning of the channel.
*/
const indexOfMessage = channel.state.messages.findIndex(
(message) => message.id === messageId,

Check warning on line 771 in src/components/Channel/Channel.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Channel/Channel.tsx#L770-L771

Added lines #L770 - L771 were not covered by tests
);
const hasMoreMessages = indexOfMessage >= Math.floor(messageLimit / 2);

Check warning on line 773 in src/components/Channel/Channel.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Channel/Channel.tsx#L773

Added line #L773 was not covered by tests

loadMoreFinished(hasMoreMessages, channel.state.messages);
dispatch({
hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
highlightedMessageId: messageId,
type: 'jumpToMessageFinished',
});
loadMoreFinished(hasMoreMessages, channel.state.messages);
dispatch({

Check warning on line 776 in src/components/Channel/Channel.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Channel/Channel.tsx#L775-L776

Added lines #L775 - L776 were not covered by tests
hasMoreNewer: channel.state.messages !== channel.state.latestMessages,
highlightedMessageId: messageId,
type: 'jumpToMessageFinished',
});

if (clearHighlightedMessageTimeoutId.current) {
clearTimeout(clearHighlightedMessageTimeoutId.current);
}
if (clearHighlightedMessageTimeoutId.current) {
clearTimeout(clearHighlightedMessageTimeoutId.current);

Check warning on line 783 in src/components/Channel/Channel.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Channel/Channel.tsx#L783

Added line #L783 was not covered by tests
}

clearHighlightedMessageTimeoutId.current = setTimeout(() => {
clearHighlightedMessageTimeoutId.current = null;
dispatch({ type: 'clearHighlightedMessage' });
}, 500);
};
clearHighlightedMessageTimeoutId.current = setTimeout(() => {
clearHighlightedMessageTimeoutId.current = null;
dispatch({ type: 'clearHighlightedMessage' });

Check warning on line 788 in src/components/Channel/Channel.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/Channel/Channel.tsx#L786-L788

Added lines #L786 - L788 were not covered by tests
}, highlightDuration);
},
[channel, loadMoreFinished],
);

const jumpToLatestMessage = async () => {
const jumpToLatestMessage = useCallback(async () => {
await channel.state.loadMessageIntoState('latest');
// FIXME: we cannot rely on constant value 25 as the page size can be customized by integrators
const hasMoreOlder = channel.state.messages.length >= 25;
loadMoreFinished(hasMoreOlder, channel.state.messages);
dispatch({
type: 'jumpToLatestMessage',
});
};
}, [channel, loadMoreFinished]);

const jumpToFirstUnreadMessage = useCallback(
async (queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE) => {
async (
queryMessageLimit = DEFAULT_JUMP_TO_PAGE_SIZE,
highlightDuration = DEFAULT_HIGHLIGHT_DURATION,
) => {
if (!channelUnreadUiState?.unread_messages) return;
let lastReadMessageId = channelUnreadUiState?.last_read_message_id;
let firstUnreadMessageId = channelUnreadUiState?.first_unread_message_id;
Expand Down Expand Up @@ -914,7 +927,7 @@
clearHighlightedMessageTimeoutId.current = setTimeout(() => {
clearHighlightedMessageTimeoutId.current = null;
dispatch({ type: 'clearHighlightedMessage' });
}, 500);
}, highlightDuration);
},
[addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
);
Expand Down
1 change: 1 addition & 0 deletions src/constants/limits.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ export const DEFAULT_JUMP_TO_PAGE_SIZE = 100;
export const DEFAULT_THREAD_PAGE_SIZE = 50;
export const DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD = 250;
export const DEFAULT_UPLOAD_SIZE_LIMIT_BYTES = 100 * 1024 * 1024; // 100 MB
export const DEFAULT_HIGHLIGHT_DURATION = 500;
Loading