fix(replay): update rtm message when replaying (#534)

netless-io · Apr 15, 2021 · 6c4ef42 · 6c4ef42
1 parent 2917819
commit 6c4ef42
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/desktop/renderer-app/src/components/ChatPanel/ChatMessageList.tsx b/desktop/renderer-app/src/components/ChatPanel/ChatMessageList.tsx
@@ -148,17 +148,21 @@ export const ChatMessageList = observer<ChatMessageListProps>(function ChatMessa
             {({ onRowsRendered, registerChild }) => (
                 <AutoSizer>
                     {({ height, width }) => (
-                        <List
-                            ref={registerChild}
-                            height={height}
-                            width={width}
-                            rowCount={classRoomStore.messages.length}
-                            rowHeight={cellCache.rowHeight}
-                            rowRenderer={rowRenderer}
-                            scrollToIndex={scrollToIndex}
-                            scrollToAlignment="start"
-                            onRowsRendered={onRowsRendered}
-                        />
+                        <Observer>
+                            {() => (
+                                <List
+                                    ref={registerChild}
+                                    height={height}
+                                    width={width}
+                                    rowCount={classRoomStore.messages.length}
+                                    rowHeight={cellCache.rowHeight}
+                                    rowRenderer={rowRenderer}
+                                    scrollToIndex={scrollToIndex}
+                                    scrollToAlignment="start"
+                                    onRowsRendered={onRowsRendered}
+                                />
+                            )}
+                        </Observer>
                     )}
                 </AutoSizer>
             )}

diff --git a/desktop/renderer-app/src/components/ChatPanelReplay/ChatMessageListReplay.tsx b/desktop/renderer-app/src/components/ChatPanelReplay/ChatMessageListReplay.tsx
@@ -59,15 +59,19 @@ export const ChatMessageListReplay = observer<ChatMessageListReplayProps>(
         return (
             <AutoSizer>
                 {({ height, width }) => (
-                    <List
-                        height={height}
-                        width={width}
-                        rowCount={classRoomReplayStore.messages.length}
-                        rowHeight={cellCache.rowHeight}
-                        rowRenderer={rowRenderer}
-                        scrollToIndex={classRoomReplayStore.messages.length - 1}
-                        scrollToAlignment="start"
-                    />
+                    <Observer>
+                        {() => (
+                            <List
+                                height={height}
+                                width={width}
+                                rowCount={classRoomReplayStore.messages.length}
+                                rowHeight={cellCache.rowHeight}
+                                rowRenderer={rowRenderer}
+                                scrollToIndex={classRoomReplayStore.messages.length - 1}
+                                scrollToAlignment="start"
+                            />
+                        )}
+                    </Observer>
                 )}
             </AutoSizer>
         );

diff --git a/desktop/renderer-app/src/stores/ClassRoomReplayStore.ts b/desktop/renderer-app/src/stores/ClassRoomReplayStore.ts
@@ -256,8 +256,6 @@ export class ClassRoomReplayStore {
         runInAction(() => {
             this.messages.push(...this.cachedMessages.slice(this.messages.length, start));
         });
-
-        this.users.syncExtraUsersInfo(this.messages.map(msg => msg.userUUID)).catch(console.warn);
     };
 
     private getHistory = async (newestTimestamp: number): Promise<RTMessage[]> => {
@@ -282,6 +280,11 @@ export class ClassRoomReplayStore {
             histories = messages.filter(
                 (message): message is RTMessage => message.type === RTMessageType.ChannelMessage,
             );
+
+            // fetch user name first to avoid flashing
+            await this.users
+                .syncExtraUsersInfo(histories.map(msg => msg.userUUID))
+                .catch(console.warn); // swallow error
         } catch (e) {
             console.warn(e);
         }