Do not show headers in LeftPane without multiple Conversation types

ts/components/LeftPane.stories.tsx

@@ -89,14 +89,24 @@ story.add('Conversation States (Active, Selected, Archived)', () => {
   return <LeftPane {...props} />;
 });
 
-story.add('Pinned Conversations', () => {
+story.add('Pinned and Non-pinned Conversations', () => {
   const props = createProps({
     pinnedConversations,
   });
 
   return <LeftPane {...props} />;
 });
 
+story.add('Only Pinned Conversations', () => {
+  const props = createProps({
+    archivedConversations: [],
+    conversations: [],
+    pinnedConversations,
+  });
+
+  return <LeftPane {...props} />;
+});
+
 story.add('Archived Conversations Shown', () => {
   const props = createProps({
     showArchived: true,

ts/components/LeftPane.tsx

@@ -52,7 +52,7 @@ type RowRendererParamsType = {
   style: CSSProperties;
 };
 
-enum RowType {
+export enum RowType {
   ArchiveButton,
   ArchivedConversation,
   Conversation,
@@ -61,7 +61,7 @@ enum RowType {
   Undefined,
 }
 
-enum HeaderType {
+export enum HeaderType {
   Pinned,
   Chats,
 }
@@ -127,28 +127,35 @@ export class LeftPane extends React.Component<PropsType> {
     let conversationIndex = index;
 
     if (pinnedConversations.length) {
-      if (index === 0) {
-        return {
-          headerType: HeaderType.Pinned,
-          type: RowType.Header,
-        };
-      }
+      if (conversations.length) {
+        if (index === 0) {
+          return {
+            headerType: HeaderType.Pinned,
+            type: RowType.Header,
+          };
+        }
 
-      if (index <= pinnedConversations.length) {
-        return {
-          index: index - 1,
-          type: RowType.PinnedConversation,
-        };
-      }
+        if (index <= pinnedConversations.length) {
+          return {
+            index: index - 1,
+            type: RowType.PinnedConversation,
+          };
+        }
+
+        if (index === pinnedConversations.length + 1) {
+          return {
+            headerType: HeaderType.Chats,
+            type: RowType.Header,
+          };
+        }
 
-      if (index === pinnedConversations.length + 1) {
+        conversationIndex -= pinnedConversations.length + 2;
+      } else {
         return {
-          headerType: HeaderType.Chats,
-          type: RowType.Header,
+          index,
+          type: RowType.PinnedConversation,
         };
       }
-
-      conversationIndex -= pinnedConversations.length + 2;
     }
 
     if (conversationIndex === conversations.length) {
@@ -453,9 +460,12 @@ export class LeftPane extends React.Component<PropsType> {
 
     let { length } = conversations;
 
-    // includes two additional rows for pinned/chats headers
     if (pinnedConversations.length) {
-      length += pinnedConversations.length + 2;
+      if (length) {
+        // includes two additional rows for pinned/chats headers
+        length += 2;
+      }
+      length += pinnedConversations.length;
     }
 
     // includes one additional row for 'archived conversations' button

ts/test/components/LeftPane_test.tsx

@@ -0,0 +1,223 @@
+import { expect } from 'chai';
+
+import {
+  LeftPane,
+  RowType,
+  PropsType,
+  HeaderType,
+} from '../../components/LeftPane';
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+
+const i18n = setupI18n('en', enMessages);
+
+describe('LeftPane', () => {
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const defaultProps = {
+    archivedConversations: [],
+    conversations: [],
+    i18n,
+    openConversationInternal: () => null,
+    pinnedConversations: [],
+    renderExpiredBuildDialog: () => '<div />' as any,
+    renderMainHeader: () => '<div />' as any,
+    renderMessageSearchResult: () => '<div />' as any,
+    renderNetworkStatus: () => '<div />' as any,
+    renderRelinkDialog: () => '<div />' as any,
+    renderUpdateDialog: () => '<div />' as any,
+    showArchivedConversations: () => null,
+    showInbox: () => null,
+    startNewConversation: () => null,
+  };
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+
+  describe('getRowFromIndex', () => {
+    let leftPane: LeftPane;
+
+    describe('given only pinned chats', () => {
+      beforeEach(function beforeEach() {
+        const props: PropsType = {
+          ...defaultProps,
+          pinnedConversations: [
+            {
+              id: 'philly-convo',
+              isPinned: true,
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Philip Glass',
+              type: 'direct',
+            },
+            {
+              id: 'robbo-convo',
+              isPinned: true,
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Robert Moog',
+              type: 'direct',
+            },
+          ],
+        };
+        leftPane = new LeftPane(props);
+      });
+
+      it('return pinned chats, not headers', () => {
+        expect(leftPane.getRowFromIndex(0)).to.eql({
+          index: 0,
+          type: RowType.PinnedConversation,
+        });
+
+        expect(leftPane.getRowFromIndex(1)).to.eql({
+          index: 1,
+          type: RowType.PinnedConversation,
+        });
+      });
+    });
+
+    describe('given only non-pinned chats', () => {
+      it('returns conversations, not headers', () => {
+        const props: PropsType = {
+          ...defaultProps,
+          conversations: [
+            {
+              id: 'fred-convo',
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Fred Willard',
+              type: 'direct',
+            },
+            {
+              id: 'robbo-convo',
+              isPinned: false,
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Robert Moog',
+              type: 'direct',
+            },
+          ],
+        };
+        leftPane = new LeftPane(props);
+
+        expect(leftPane.getRowFromIndex(0)).to.eql({
+          index: 0,
+          type: RowType.Conversation,
+        });
+
+        expect(leftPane.getRowFromIndex(1)).to.eql({
+          index: 1,
+          type: RowType.Conversation,
+        });
+      });
+    });
+
+    describe('given only pinned and non-pinned chats', () => {
+      beforeEach(function beforeEach() {
+        const props: PropsType = {
+          ...defaultProps,
+          conversations: [
+            {
+              id: 'fred-convo',
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Fred Willard',
+              type: 'direct',
+            },
+          ],
+          pinnedConversations: [
+            {
+              id: 'philly-convo',
+              isPinned: true,
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Philip Glass',
+              type: 'direct',
+            },
+          ],
+        };
+        leftPane = new LeftPane(props);
+      });
+
+      it('returns headers and conversations', () => {
+        expect(leftPane.getRowFromIndex(0)).to.eql({
+          headerType: HeaderType.Pinned,
+          type: RowType.Header,
+        });
+
+        expect(leftPane.getRowFromIndex(1)).to.eql({
+          index: 0,
+          type: RowType.PinnedConversation,
+        });
+
+        expect(leftPane.getRowFromIndex(2)).to.eql({
+          headerType: HeaderType.Chats,
+          type: RowType.Header,
+        });
+
+        expect(leftPane.getRowFromIndex(3)).to.eql({
+          index: 0,
+          type: RowType.Conversation,
+        });
+      });
+    });
+    describe('given not showing archive with archived conversation', () => {
+      beforeEach(function beforeEach() {
+        const props: PropsType = {
+          ...defaultProps,
+          archivedConversations: [
+            {
+              id: 'jerry-convo',
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Jerry Jordan',
+              type: 'direct',
+            },
+          ],
+          conversations: [
+            {
+              id: 'fred-convo',
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Fred Willard',
+              type: 'direct',
+            },
+          ],
+          showArchived: false,
+        };
+
+        leftPane = new LeftPane(props);
+      });
+
+      it('returns an archive button last', () => {
+        expect(leftPane.getRowFromIndex(1)).to.eql({
+          type: RowType.ArchiveButton,
+        });
+      });
+    });
+
+    describe('given showing archive and archive chats', () => {
+      beforeEach(function beforeEach() {
+        const props: PropsType = {
+          ...defaultProps,
+          archivedConversations: [
+            {
+              id: 'fred-convo',
+              isSelected: false,
+              lastUpdated: Date.now(),
+              title: 'Fred Willard',
+              type: 'direct',
+            },
+          ],
+          showArchived: true,
+        };
+
+        leftPane = new LeftPane(props);
+      });
+
+      it('returns archived conversations', () => {
+        expect(leftPane.getRowFromIndex(0)).to.eql({
+          index: 0,
+          type: RowType.ArchivedConversation,
+        });
+      });
+    });
+  });
+});