Skip to content

WIP: feat: use LLC message pagination and message list state optimistic updates #2909

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.

Sign up for GitHub

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

Draft
MartinCupela wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

WIP: feat: use LLC message pagination and message list state optimistic updates #2909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1,155 changes: 577 additions & 578 deletions src/components/Channel/Channel.tsx
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/components/Channel/channelState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,17 +272,24 @@ export const initialState = {
hasMoreNewer: false,
loading: true,
loadingMore: false,
// todo: add reactive state to Channel class
members: {},
messages: [],
// todo: add reactive state to Channel class
pinnedMessages: [],
// todo: add reactive state to Channel class
read: {},
// todo: could be moved as a prop to MessageList / VML
suppressAutoscroll: false,
thread: null,
threadHasMore: true,
threadLoadingMore: false,
threadMessages: [],
// todo: could be moved as a prop to MessageList / VML
threadSuppressAutoscroll: false,
// todo: add reactive state to Channel class
typing: {},
// todo: add reactive state to Channel class
watcherCount: 0,
watchers: {},
};
231 changes: 119 additions & 112 deletions src/components/Channel/hooks/useCreateChannelStateContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,150 +14,157 @@ export const useCreateChannelStateContext = (
channel,
channelCapabilitiesArray = [],
channelConfig,
channelUnreadUiState,
error,
// channelUnreadUiState,
// error,
giphyVersion,
hasMore,
hasMoreNewer,
highlightedMessageId,
// hasMore,
// hasMoreNewer,
// highlightedMessageId,
imageAttachmentSizeHandler,
loading,
loadingMore,
members,
messages = [],
// loading,
// loadingMore,
// members,
// messages = [],
mutes,
notifications,
pinnedMessages,
read = {},
// pinnedMessages,
// read = {},
shouldGenerateVideoThumbnail,
skipMessageDataMemoization,
suppressAutoscroll,
thread,
threadHasMore,
threadLoadingMore,
threadMessages = [],
// skipMessageDataMemoization,
// suppressAutoscroll,
// thread,
// threadHasMore,
// threadLoadingMore,
// threadMessages = [],
videoAttachmentSizeHandler,
watcher_count,
watcherCount,
watchers,
// watcher_count,
// watcherCount,
// watchers,
} = value;

const channelId = channel.cid;
const lastRead = channel.initialized && channel.lastRead()?.getTime();
const membersLength = Object.keys(members || []).length;
const notificationsLength = notifications.length;
const readUsers = Object.values(read);
const readUsersLength = readUsers.length;
const readUsersLastReadDateStrings: string[] = [];
for (const { last_read } of readUsers) {
if (!lastRead) continue;
readUsersLastReadDateStrings.push(last_read?.toISOString());
}
const readUsersLastReads = readUsersLastReadDateStrings.join();
const threadMessagesLength = threadMessages?.length;
// const channelId = channel.cid;
// const lastRead = channel.initialized && channel.lastRead()?.getTime();
// const membersLength = Object.keys(members || []).length;
// const notificationsLength = notifications.length;
// const readUsers = Object.values(read);
// const readUsersLength = readUsers.length;
// const readUsersLastReadDateStrings: string[] = [];
// for (const { last_read } of readUsers) {
// if (!lastRead) continue;
// readUsersLastReadDateStrings.push(last_read?.toISOString());
// }
// const readUsersLastReads = readUsersLastReadDateStrings.join();
// const threadMessagesLength = threadMessages?.length;

const channelCapabilities: Record<string, boolean> = {};
const channelCapabilities: Record<string, boolean> = useMemo(() => ({}), []);

channelCapabilitiesArray.forEach((capability) => {
channelCapabilities[capability] = true;
});

// FIXME: this is crazy - I could not find out why the messages were not getting updated when only message properties that are not part
// of this serialization has been changed. A great example of memoization gone wrong.
const memoizedMessageData = skipMessageDataMemoization
? messages
: messages
.map(
({
deleted_at,
latest_reactions,
pinned,
reply_count,
status,
type,
updated_at,
user,
}) =>
`${type}${deleted_at}${
latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
}${pinned}${reply_count}${status}${
updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
? updated_at.toISOString()
: updated_at || ''
}${user?.updated_at}`,
)
.join();
// const memoizedMessageData = skipMessageDataMemoization
// ? messages
// : messages
// .map(
// ({
// deleted_at,
// latest_reactions,
// pinned,
// reply_count,
// status,
// type,
// updated_at,
// user,
// }) =>
// `${type}${deleted_at}${
// latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
// }${pinned}${reply_count}${status}${
// updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
// ? updated_at.toISOString()
// : updated_at || ''
// }${user?.updated_at}`,
// )
// .join();

const memoizedThreadMessageData = threadMessages
.map(
({ deleted_at, latest_reactions, pinned, status, updated_at, user }) =>
`${deleted_at}${
latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
}${pinned}${status}${
updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
? updated_at.toISOString()
: updated_at || ''
}${user?.updated_at}`,
)
.join();
// const memoizedThreadMessageData = threadMessages
// .map(
// ({ deleted_at, latest_reactions, pinned, status, updated_at, user }) =>
// `${deleted_at}${
// latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
// }${pinned}${status}${
// updated_at && (isDayOrMoment(updated_at) || isDate(updated_at))
// ? updated_at.toISOString()
// : updated_at || ''
// }${user?.updated_at}`,
// )
// .join();

const channelStateContext: ChannelStateContextValue = useMemo(
() => ({
channel,
channelCapabilities,
channelConfig,
channelUnreadUiState,
error,
// channelUnreadUiState,
// error,
giphyVersion,
hasMore,
hasMoreNewer,
highlightedMessageId,
// hasMore,
// hasMoreNewer,
// highlightedMessageId,
imageAttachmentSizeHandler,
loading,
loadingMore,
members,
messages,
// loading,
// loadingMore,
// members,
// messages,
mutes,
notifications,
pinnedMessages,
read,
// pinnedMessages,
// read,
shouldGenerateVideoThumbnail,
suppressAutoscroll,
thread,
threadHasMore,
threadLoadingMore,
threadMessages,
// suppressAutoscroll,
// thread,
// threadHasMore,
// threadLoadingMore,
// threadMessages,
videoAttachmentSizeHandler,
watcher_count,
watcherCount,
watchers,
// watcher_count,
// watcherCount,
// watchers,
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[
channel.data?.name, // otherwise ChannelHeader will not be updated
channelId,
channelUnreadUiState,
error,
hasMore,
hasMoreNewer,
highlightedMessageId,
lastRead,
loading,
loadingMore,
membersLength,
memoizedMessageData,
memoizedThreadMessageData,
notificationsLength,
readUsersLength,
readUsersLastReads,
channel,
// channel.data?.name, // otherwise ChannelHeader will not be updated
channelCapabilities,
channelConfig,
// channelId,
// channelUnreadUiState,
giphyVersion,
// error,
// hasMore,
// hasMoreNewer,
// highlightedMessageId,
imageAttachmentSizeHandler,
// lastRead,
// loading,
// loadingMore,
// membersLength,
// memoizedMessageData,
// memoizedThreadMessageData,
mutes,
notifications,
// notificationsLength,
// readUsersLength,
// readUsersLastReads,
shouldGenerateVideoThumbnail,
skipMessageDataMemoization,
suppressAutoscroll,
thread,
threadHasMore,
threadLoadingMore,
threadMessagesLength,
watcherCount,
// skipMessageDataMemoization,
// suppressAutoscroll,
// thread,
// threadHasMore,
// threadLoadingMore,
// threadMessagesLength,
videoAttachmentSizeHandler,
// watcherCount,
],
);

Expand Down
5 changes: 3 additions & 2 deletions src/components/ChannelHeader/ChannelHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
title: overrideTitle,
} = props;

const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
const { channel } = useChannelStateContext('ChannelHeader');
const { openMobileNav } = useChatContext('ChannelHeader');
const { t } = useTranslationContext('ChannelHeader');
const { displayImage, displayTitle, groupChannelDisplayInfo } = useChannelPreviewInfo({
Expand Down Expand Up @@ -76,7 +76,8 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
,{' '}
</>
)}
{t('{{ watcherCount }} online', { watcherCount: watcher_count })}
{/*todo: get the watcher count from LLC reactive state */}
{/*{t('{{ watcherCount }} online', { watcherCount: watcher_count })}*/}
</p>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ChatView/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import type { PropsWithChildren } from 'react';
import type { Thread, ThreadManagerState } from 'stream-chat';
import clsx from 'clsx';

type ChatView = 'channels' | 'threads';
type ChatView = 'channels' | 'threads' | (string & {});

type ChatViewContextValue = {
activeChatView: ChatView;
Expand All @@ -37,6 +37,7 @@ export const ChatView = ({ children }: PropsWithChildren) => {
);
};

// todo: move channel list orchestrator here
const ChannelsView = ({ children }: PropsWithChildren) => {
const { activeChatView } = useContext(ChatViewContext);

Expand Down
Loading
Loading