fix: replace convo list render functions with components

package.json

@@ -166,7 +166,7 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-redux": "^7.1.24",
-    "@types/react-virtualized": "9.18.12",
+    "@types/react-virtualized": "^9.21.30",
     "@types/redux-logger": "3.0.7",
     "@types/rimraf": "2.0.2",
     "@types/semver": "5.5.0",

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -63,46 +63,49 @@ const ClosableOverlay = () => {
   }
 };
 
-export const LeftPaneMessageSection = () => {
+const ConversationRow = (
-  const conversationIds = useSelector(getLeftPaneConversationIds);
+  conversationIds: Array<string>,
-  const leftOverlayMode = useSelector(getLeftOverlayMode);
+  { index, key, style }: ListRowProps
-  const searchTerm = useSelector(getSearchTerm);
+): JSX.Element | null => {
-
-  const renderRow = ({ index, key, style }: ListRowProps): JSX.Element | null => {
   // assume conversations that have been marked unapproved should be filtered out by selector.
   if (!conversationIds) {
-      throw new Error('renderRow: Tried to render without conversations');
+    throw new Error('ConversationRow: Tried to render without conversations');
   }
 
   const conversationId = conversationIds[index];
   if (!conversationId) {
-      throw new Error('renderRow: conversations selector returned element containing falsy value.');
+    throw new Error(
+      'ConversationRow: conversations selector returned element containing falsy value.'
+    );
   }
 
   return <ConversationListItem key={key} style={style} conversationId={conversationId} />;
 };
 
-  const renderList = () => {
+const ConversationList = () => {
+  const searchTerm = useSelector(getSearchTerm);
+  const conversationIds = useSelector(getLeftPaneConversationIds);
+
   if (!isEmpty(searchTerm)) {
     return <SearchResults />;
   }
 
   if (!conversationIds) {
-      throw new Error('render: must provided conversations if no search results are provided');
+    throw new Error(
+      'ConversationList: must provided conversations if no search results are provided'
+    );
   }
 
-    const length = conversationIds.length;
-
   return (
-      <StyledLeftPaneList key={0}>
+    <StyledLeftPaneList key={`conversation-list-0`}>
       <AutoSizer>
         {({ height, width }) => (
           <List
             className="module-left-pane__virtual-list"
             height={height}
-              rowCount={length}
+            rowCount={conversationIds.length}
             rowHeight={64}
-              rowRenderer={renderRow}
+            rowRenderer={props => ConversationRow(conversationIds, props)}
             width={width}
             autoHeight={false}
             conversationIds={conversationIds}
@@ -113,8 +116,15 @@ export const LeftPaneMessageSection = () => {
   );
 };
 
-  const renderConversations = () => {
+export const LeftPaneMessageSection = () => {
+  const leftOverlayMode = useSelector(getLeftOverlayMode);
+
   return (
+    <StyledLeftPaneContent>
+      <LeftPaneSectionHeader />
+      {leftOverlayMode ? (
+        <ClosableOverlay />
+      ) : (
         <StyledConversationListContent>
           <SessionSearchInput />
           <MessageRequestsBanner
@@ -122,15 +132,9 @@ export const LeftPaneMessageSection = () => {
               window.inboxStore?.dispatch(setLeftOverlayMode('message-requests'));
             }}
           />
-        {renderList()}
+          <ConversationList />
         </StyledConversationListContent>
-    );
+      )}
-  };
-
-  return (
-    <StyledLeftPaneContent>
-      <LeftPaneSectionHeader />
-      {leftOverlayMode ? <ClosableOverlay /> : renderConversations()}
     </StyledLeftPaneContent>
   );
 };

yarn.lock

@@ -994,10 +994,10 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-virtualized@9.18.12":
+"@types/react-virtualized@^9.21.30":
-  version "9.18.12"
+  version "9.21.30"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.12.tgz#541e65c5e0b4629d6a1c6f339171c7943e016ecb"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.30.tgz#ba39821bcb2487512a8a2cdd9fbdb5e6fc87fedb"
-  integrity sha512-Msdpt9zvYlb5Ul4PA339QUkJ0/z2O+gaFxed1rG+2rZjbe6XdYo7jWfJe206KBnjj84DwPPIbPFQCtoGuNwNTQ==
+  integrity sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/react" "*"