Skip to content

Prevent duplicated ChatList events #92

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

Open
MattBillFred wants to merge 2 commits into
base: next/mgt-chat
Choose a base branch
from
Open

Prevent duplicated ChatList events #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c48e0b3
Prevent duplicated ChatList events
Aug 14, 2024
fc24d3d
Move placement of early exit to match the behavior of the previous code
Aug 14, 2024
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
115 changes: 54 additions & 61 deletions packages/mgt-chat/src/components/ChatList/ChatList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,62 @@ export const ChatList = ({
const [chatListState, setChatListState] = useState<GraphChatListClient | undefined>();

useEffect(() => {
chatListClient.onStateChange(setChatListState);
const handleStateChange = (newState: GraphChatListClient | undefined) => {
setChatListState(newState);

if (!newState) {
return;
}

// handle state changes
if (newState.status === 'chat message received' && onMessageReceived && newState.chatMessage) {
onMessageReceived(newState.chatMessage);
}

if (newState.status === 'chat selected' && onSelected && newState.internalSelectedChat) {
onSelected(newState.internalSelectedChat);
}

if (newState.status === 'chat unselected' && onUnselected && newState.internalPrevSelectedChat) {
onUnselected(newState.internalPrevSelectedChat);
}

if (newState.status === 'chats read' && onAllMessagesRead && newState.chatThreads) {
onAllMessagesRead(newState.chatThreads.map(c => c.id!));
}

if (newState.status === 'chats loaded' && onLoaded) {
onLoaded(newState?.chatThreads ?? []);
}

if (
newState.status === 'chats loaded' &&
newState.fireOnSelected &&
onSelected &&
newState.internalSelectedChat
) {
onSelected(newState.internalSelectedChat);
}

if (newState.status === 'no chats' && onLoaded) {
onLoaded([]);
}

if (newState.status === 'server connection established' && onConnectionChanged) {
onConnectionChanged(true);
void chatListClient.tryLoadChatThreads().catch(e => chatListClient.raiseFatalError(e as Error));
}

if (newState.status === 'server connection lost' && onConnectionChanged) {
onConnectionChanged(false);
}
};

chatListClient.onStateChange(handleStateChange);
return () => {
chatListClient.offStateChange(setChatListState);
chatListClient.offStateChange(handleStateChange);
};
}, [chatListClient]);
}, [chatListClient, onLoaded, onMessageReceived, onSelected, onUnselected, onAllMessagesRead, onConnectionChanged]);

useEffect(() => {
if (chatThreadsPerPage < 1) {
Expand Down Expand Up @@ -167,64 +218,6 @@ export const ChatList = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [chatListClient, lastReadTimeInterval]); // initialLastReadTimeInterval is used to ensure we only set interval once.

useEffect(() => {
if (!chatListState) {
return;
}

// handle state changes
if (chatListState.status === 'chat message received' && onMessageReceived && chatListState.chatMessage) {
onMessageReceived(chatListState.chatMessage);
}

if (chatListState.status === 'chat selected' && onSelected && chatListState.internalSelectedChat) {
onSelected(chatListState.internalSelectedChat);
}

if (chatListState.status === 'chat unselected' && onUnselected && chatListState.internalPrevSelectedChat) {
onUnselected(chatListState.internalPrevSelectedChat);
}

if (chatListState.status === 'chats read' && onAllMessagesRead && chatListState.chatThreads) {
onAllMessagesRead(chatListState.chatThreads.map(c => c.id!));
}

if (chatListState.status === 'chats loaded' && onLoaded) {
onLoaded(chatListState?.chatThreads ?? []);
}

if (
chatListState.status === 'chats loaded' &&
chatListState.fireOnSelected &&
onSelected &&
chatListState.internalSelectedChat
) {
onSelected(chatListState.internalSelectedChat);
}

if (chatListState.status === 'no chats' && onLoaded) {
onLoaded([]);
}

if (chatListState.status === 'server connection established' && onConnectionChanged) {
onConnectionChanged(true);
void chatListClient.tryLoadChatThreads().catch(e => chatListClient.raiseFatalError(e as Error));
}

if (chatListState.status === 'server connection lost' && onConnectionChanged) {
onConnectionChanged(false);
}
}, [
chatListClient,
chatListState,
onLoaded,
onMessageReceived,
onSelected,
onUnselected,
onAllMessagesRead,
onConnectionChanged
]);

// this only runs once when the component is unmounted
useEffect(() => {
// tear down
Expand Down
4 changes: 2 additions & 2 deletions packages/mgt-chat/src/statefulClient/StatefulGraphChatListClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ class StatefulGraphChatListClient implements StatefulClient<GraphChatListClient>
private readonly _eventEmitter: ThreadEventEmitter;
private readonly _cache: LastReadCache;
private readonly _graph: IGraph;
private _stateSubscribers: ((state: GraphChatListClient) => void)[] = [];
private readonly _stateSubscribers: ((state: GraphChatListClient) => void)[] = [];
private _initialSelectedChatId: string | undefined;
private _loadPromise: Promise<void> | undefined;
private _loadMorePromise: Promise<void> | undefined;
Expand Down Expand Up @@ -521,7 +521,7 @@ class StatefulGraphChatListClient implements StatefulClient<GraphChatListClient>
public offStateChange(handler: (state: GraphChatListClient) => void): void {
const index = this._stateSubscribers.indexOf(handler);
if (index !== -1) {
this._stateSubscribers = this._stateSubscribers.splice(index, 1);
this._stateSubscribers.splice(index, 1);
}
}

Expand Down