Fix message collapsing incorrectly. Closes #2001

This commit is contained in:
Gabe Kangas 2022-08-09 20:58:10 -07:00
parent 423ed88fbd
commit 2c1624127a
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA

View file

@ -1,6 +1,6 @@
import { Button } from 'antd';
import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useRef } from 'react';
import { useState, useMemo, useRef, CSSProperties } from 'react';
import { EditFilled, VerticalAlignBottomOutlined } from '@ant-design/icons';
import {
ConnectedClientInfoEvent,
@ -63,7 +63,10 @@ export default function ChatContainer(props: Props) {
const getConnectedInfoMessage = (message: ConnectedClientInfoEvent) => {
const modStatusUpdate = checkIsModerator(message);
if (!modStatusUpdate) {
return null;
// Important note: We can't return null or an element with zero width
// or zero height. So to work around this we return a very small 1x1 div.
const st: CSSProperties = { width: '1px', height: '1px' };
return <div style={st} />;
}
// Alert the user that they are a moderator.
@ -146,12 +149,15 @@ export default function ChatContainer(props: Props) {
);
}
function isSameUserAsLast(messages: ChatMessage[], index: number) {
function isSameUserAsLast(messages: ChatMessage[], index: number): boolean {
const message = messages[index];
const {
user: { id },
} = message;
const lastMessage = messages[index - 1];
if (lastMessage.type !== MessageType.CHAT) {
return false;
}
return id === lastMessage?.user.id;
}