remove Section header rendering from static method, just render JSX

js/models/conversations.js

@@ -1782,13 +1782,6 @@
         _.map(oldUnread, async providedM => {
           const m = getMessageController().register(providedM.id, providedM);
 
-          if (!this.messageCollection.get(m.id)) {
-            window.log.warn(
-              'Marked a message as read in the database, but ' +
-                'it was not in messageCollection.'
-            );
-          }
-
           await m.markRead(options.readAt);
           const errors = m.get('errors');
           return {

ts/components/LeftPane.tsx

@@ -58,28 +58,6 @@ export class LeftPane extends React.Component<Props> {
     this.handleSectionSelected = this.handleSectionSelected.bind(this);
   }
 
-  // this static function is set here to be used by all subsections (message, contacts,...) to render their headers
-  public static RENDER_HEADER(
-    labels: Array<string>,
-    theme: DefaultTheme,
-    onTabSelected?: any,
-    buttonLabel?: string,
-    buttonIcon?: SessionIconType,
-    buttonClicked?: any
-  ): JSX.Element {
-    return (
-      <LeftPaneSectionHeader
-        onTabSelected={onTabSelected}
-        selectedTab={0}
-        labels={labels}
-        buttonLabel={buttonLabel}
-        buttonIcon={buttonIcon}
-        buttonClicked={buttonClicked}
-        theme={theme}
-      />
-    );
-  }
-
   public handleSectionSelected(section: SectionType) {
     this.props.clearSearch();
     this.props.focusSection(section);

ts/components/session/LeftPaneContactSection.tsx

@@ -16,6 +16,7 @@ import {
 } from './SessionClosableOverlay';
 import { ToastUtils } from '../../session/utils';
 import { DefaultTheme } from 'styled-components';
+import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 
 export interface Props {
   directContacts: Array<ConversationType>;
@@ -56,15 +57,11 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
   }
 
   public renderHeader(): JSX.Element | undefined {
-    const labels = [window.i18n('contactsHeader')];
-
-    return LeftPane.RENDER_HEADER(
-      labels,
-      this.props.theme,
-      null,
-      undefined,
-      undefined,
-      undefined
+    return (
+      <LeftPaneSectionHeader
+        label={window.i18n('contactsHeader')}
+        theme={this.props.theme}
+      />
     );
   }
 

ts/components/session/LeftPaneMessageSection.tsx

@@ -29,6 +29,7 @@ import {
 import { OpenGroup } from '../../session/types';
 import { ToastUtils } from '../../session/utils';
 import { DefaultTheme } from 'styled-components';
+import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 
 export interface Props {
   searchTerm: string;
@@ -187,15 +188,13 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
   }
 
   public renderHeader(): JSX.Element {
-    const labels = [window.i18n('messagesHeader')];
-
-    return LeftPane.RENDER_HEADER(
-      labels,
-      this.props.theme,
-      null,
-      undefined,
-      SessionIconType.Plus,
-      this.handleNewSessionButtonClick
+    return (
+      <LeftPaneSectionHeader
+        label={window.i18n('messagesHeader')}
+        theme={this.props.theme}
+        buttonIcon={SessionIconType.Plus}
+        buttonClicked={this.handleNewSessionButtonClick}
+      />
     );
   }
 

ts/components/session/LeftPaneSectionHeader.tsx

@@ -37,77 +37,37 @@ const Tab = ({
 };
 
 interface Props {
-  onTabSelected: any;
-  selectedTab: number;
-  labels: Array<string>;
-  buttonLabel?: string;
+  label?: string;
   buttonIcon?: SessionIconType;
   buttonClicked?: any;
   theme: DefaultTheme;
 }
 
-interface State {
-  selectedTab: number;
-}
+export const LeftPaneSectionHeader = (props: Props) => {
+  const { label, buttonIcon, buttonClicked } = props;
 
-export class LeftPaneSectionHeader extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props);
-    this.state = { selectedTab: 0 };
+  const children = [];
+  if (label) {
+    children.push(<Tab label={label} type={0} isSelected={true} key={label} />);
   }
 
-  public render() {
-    const { selectedTab } = this.state;
-    const { labels, buttonLabel, buttonIcon, buttonClicked } = this.props;
-
-    const hasButton = buttonLabel || buttonIcon;
-
-    const children = [];
-    //loop to create children
-    for (let i = 0; i < labels.length; i++) {
-      children.push(
-        <Tab
-          label={labels[i]}
-          type={i}
-          isSelected={selectedTab === i}
-          onSelect={this.handleTabSelect}
-          key={i}
-        />
-      );
-    }
-
-    if (hasButton) {
-      const buttonContent = buttonIcon ? (
+  if (buttonIcon) {
+    const button = (
+      <SessionButton
+        onClick={buttonClicked}
+        key="compose"
+        theme={inversedTheme(props.theme)}
+      >
         <SessionIcon
           iconType={buttonIcon}
           iconSize={SessionIconSize.Small}
-          theme={inversedTheme(this.props.theme)}
+          theme={props.theme}
         />
-      ) : (
-        buttonLabel
-      );
-      const button = (
-        <SessionButton
-          onClick={buttonClicked}
-          key="compose"
-          theme={inversedTheme(this.props.theme)}
-        >
-          {buttonContent}
-        </SessionButton>
-      );
+      </SessionButton>
+    );
 
-      children.push(button);
-    }
-    // Create the parent and add the children
-    return <div className="module-left-pane__header">{children}</div>;
+    children.push(button);
   }
-
-  private readonly handleTabSelect = (tabType: number): void => {
-    this.setState({
-      selectedTab: tabType,
-    });
-    if (this.props.onTabSelected) {
-      this.props.onTabSelected(tabType);
-    }
-  };
-}
+  // Create the parent and add the children
+  return <div className="module-left-pane__header">{children}</div>;
+};

ts/components/session/LeftPaneSettingSection.tsx

@@ -13,6 +13,7 @@ import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { SessionSearchInput } from './SessionSearchInput';
 import { SessionSettingCategory } from './settings/SessionSettings';
 import { DefaultTheme } from 'styled-components';
+import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 
 interface Props {
   isSecondaryDevice: boolean;
@@ -47,15 +48,11 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
   }
 
   public renderHeader(): JSX.Element | undefined {
-    const labels = [window.i18n('settingsHeader')];
-
-    return LeftPane.RENDER_HEADER(
-      labels,
-      this.props.theme,
-      null,
-      undefined,
-      undefined,
-      undefined
+    return (
+      <LeftPaneSectionHeader
+        label={window.i18n('settingsHeader')}
+        theme={this.props.theme}
+      />
     );
   }