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