Fix chat history

src/components/chat-history/ChatHistoryView.tsx

@@ -1,6 +1,6 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer, Size } from 'react-virtualized';
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
 import { AddEventLinkTracker, ChatEntryType, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useChatHistory } from '../../hooks';
@@ -8,61 +8,25 @@ import { useChatHistory } from '../../hooks';
 export const ChatHistoryView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
+    const [ searchText, setSearchText ] = useState<string>('');
     const { chatHistory = [] } = useChatHistory();
     const elementRef = useRef<List>(null);
 
-    const [ searchText, setSearchText ] = useState<string>('');
+    const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 35, fixedWidth: true }), []);
-
-    const cache = useMemo(() => new CellMeasurerCache({ defaultHeight: 25, fixedWidth: true }), []);
 
     const filteredChatHistory = useMemo(() => 
     {
         if (searchText.length === 0) return chatHistory;
 
-        return chatHistory.filter((i) => (i.message && i.message.includes(searchText)) || i.name.includes(searchText));
+        let text = searchText.toLowerCase();
+
+        return chatHistory.filter(entry => (entry.message.toLowerCase().includes(text)) || entry.name.includes(text));
     }, [ chatHistory, searchText ]);
 
-    useEffect(() => 
+    useEffect(() =>
     {
-        cache.clearAll();
+        if(elementRef && elementRef.current && isVisible) elementRef.current.scrollToRow(-1);
-    }, [ filteredChatHistory ]);
+    }, [ isVisible ]);
-
-    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
-    {
-        const item = filteredChatHistory[props.index];
-
-        if (!item) return null;
-
-        return (
-            <CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
-                <Flex key={ props.key } style={ props.style } className="p-1" gap={ 2 }>
-                    <Text variant="muted">{ item.timestamp }</Text>
-                    { (item.type === ChatEntryType.TYPE_CHAT) &&
-                        <div className="bubble-container" style={ { position: 'relative' } }>
-                            { (item.style === 0) &&
-                            <div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
-                            <div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
-                                <div className="user-container">
-                                    { item.imageUrl && (item.imageUrl.length > 0) &&
-                        <div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
-                                </div>
-                                <div className="chat-content">
-                                    <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
-                                    <span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
-                                </div>
-                            </div>
-                        </div> }
-                    { (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
-                        <>
-                            <i className="icon icon-small-room" />
-                            <Text textBreak wrap grow>{ item.name }</Text>
-                        </> }
-                </Flex>
-            </CellMeasurer>
-        );
-    };
-
-    const onResize = (info: Size) => cache.clearAll();
 
     useEffect(() =>
     {
@@ -94,30 +58,62 @@ export const ChatHistoryView: FC<{}> = props =>
         return () => RemoveLinkEventTracker(linkTracker);
     }, []);
 
-    useEffect(() =>
-    {
-        if(elementRef && elementRef.current && isVisible) elementRef.current.scrollToRow(-1);
-    }, [ isVisible ]);
-
     if(!isVisible) return null;
 
+    const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
+    {
+        const item = filteredChatHistory[props.index];
+
+        if (!item) return null;
+
+        return (
+            <CellMeasurer cache={ cache } columnIndex={ 0 } key={ props.key } parent={ props.parent } rowIndex={ props.index }>
+                <Flex alignItems="center" style={ props.style } className="p-1" gap={ 2 }>
+                    <Text variant="muted">{ item.timestamp }</Text>
+                    { (item.type === ChatEntryType.TYPE_CHAT) &&
+                        <div className="bubble-container" style={ { position: 'relative' } }>
+                            { (item.style === 0) &&
+                            <div className="user-container-bg" style={ { backgroundColor: item.color } } /> }
+                            <div className={ `chat-bubble bubble-${ item.style } type-${ item.chatType }` } style={ { maxWidth: '100%' } }>
+                                <div className="user-container">
+                                    { item.imageUrl && (item.imageUrl.length > 0) &&
+                        <div className="user-image" style={ { backgroundImage: `url(${ item.imageUrl })` } } /> }
+                                </div>
+                                <div className="chat-content">
+                                    <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ item.name }: ` } } />
+                                    <span className="message" dangerouslySetInnerHTML={ { __html: `${ item.message }` } } />
+                                </div>
+                            </div>
+                        </div> }
+                    { (item.type === ChatEntryType.TYPE_ROOM_INFO) &&
+                        <>
+                            <i className="icon icon-small-room" />
+                            <Text textBreak wrap grow>{ item.name }</Text>
+                        </> }
+                </Flex>
+            </CellMeasurer>
+        );
+    };
+
     return (
         <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
-            <NitroCardContentView>
+            <NitroCardContentView overflow="hidden">
                 <Flex column fullHeight gap={ 2 }>
                     <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
                     <div className="h-100">
-                        <AutoSizer defaultWidth={ 300 } defaultHeight={ 170 } onResize={ onResize }>
+                        <AutoSizer defaultWidth={ 300 } defaultHeight={ 170 }>
                             { ({ height, width }) => 
                             {
+                                cache.clearAll();
+
                                 return (
                                     <List
                                         ref={ elementRef }
                                         width={ width }
                                         height={ height }
-                                        rowCount={ chatHistory.length }
+                                        rowCount={ filteredChatHistory.length }
-                                        rowHeight={ cache.rowHeight }
+                                        rowHeight={ 35 }
                                         className={ 'chat-history-list' }
                                         rowRenderer={ RowRenderer }
                                         deferredMeasurementCache={ cache } />