IO-2311 fixed tile height

client/src/components/chat-conversation-list/chat-conversation-list.component.jsx

@@ -7,7 +7,12 @@ import { selectSelectedConversation } from "../../redux/messaging/messaging.sele
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
-import { List as VirtualizedList, AutoSizer } from "react-virtualized";
+import {
+  List as VirtualizedList,
+  AutoSizer,
+  CellMeasurerCache,
+  CellMeasurer,
+} from "react-virtualized";
 
 import "./chat-conversation-list.styles.scss";
 
@@ -33,12 +38,23 @@ function ChatConversationListComponent({
     []
   );
 
-  const rowRenderer = ({ index, key, style }) => {
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 60,
+  });
+
+  const rowRenderer = ({ index, key, style, parent }) => {
     const item = conversationList[index];
 
     return (
-      <List.Item
+      <CellMeasurer
         key={key}
+        cache={cache}
+        parent={parent}
+        columnIndex={0}
+        rowIndex={index}
+      >
+        <List.Item
           onClick={() => setSelectedConversation(item.id)}
           className={`chat-list-item ${
             item.id === selectedConversation
@@ -47,7 +63,11 @@ function ChatConversationListComponent({
           }`}
           style={style}
         >
-        <div sryle={{ display: "inline-block" }}>
+          <div
+            style={{
+              display: "inline-block",
+            }}
+          >
             {item.label && <div className="chat-name">{item.label}</div>}
             {item.job_conversations.length > 0 ? (
               <div className="chat-name">
@@ -61,7 +81,7 @@ function ChatConversationListComponent({
               <PhoneFormatter>{item.phone_num}</PhoneFormatter>
             )}
           </div>
-        <div sryle={{ display: "inline-block" }}>
+          <div style={{ display: "inline-block" }}>
             <div>
               {item.job_conversations.length > 0
                 ? item.job_conversations.map((j, idx) => (
@@ -75,6 +95,7 @@ function ChatConversationListComponent({
           </div>
           <Badge count={item.messages_aggregate.aggregate.count || 0} />
         </List.Item>
+      </CellMeasurer>
     );
   };
 
@@ -86,7 +107,7 @@ function ChatConversationListComponent({
             height={height}
             width={width}
             rowCount={conversationList.length}
-            rowHeight={60}
+            rowHeight={cache.rowHeight}
             rowRenderer={rowRenderer}
             onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
               if (scrollTop + clientHeight === scrollHeight) {