change non-lifecycle using component classes into function components

src/ensembl/src/content/Content.tsx

-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import { Route, withRouter } from 'react-router-dom';
 import { RouteComponentProps } from 'react-router';
 import { connect } from 'react-redux';
@@ -18,19 +18,19 @@ type OwnProps = {};
 
 type ContentProps = RouteComponentProps & StateProps & OwnProps;
 
-export class Content extends Component<ContentProps> {
-  public render() {
-    return (
-      <main className={`${styles.content} ${this.getExpandClass()}`}>
-        <Route path="/app" component={App} />
-      </main>
-    );
-  }
-
-  private getExpandClass(): string {
-    return this.props.launchbarExpanded ? '' : styles.expanded;
-  }
-}
+export const Content: FunctionComponent<ContentProps> = (
+  props: ContentProps
+) => {
+  const getExpandClass = (): string => {
+    return props.launchbarExpanded ? '' : styles.expanded;
+  };
+
+  return (
+    <main className={`${styles.content} ${getExpandClass()}`}>
+      <Route path="/app" component={App} />
+    </main>
+  );
+};
 
 const mapStateToProps = (state: RootState): StateProps => ({
   launchbarExpanded: getLaunchbarExpanded(state)

src/ensembl/src/content/app/browser/Browser.tsx

-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 
@@ -29,46 +29,40 @@ type BrowserProps = {
   toggleBrowserNav: () => void;
 };
 
-export class Browser extends Component<BrowserProps> {
-  constructor(props: BrowserProps) {
-    super(props);
-
-    this.closeTrack = this.closeTrack.bind(this);
-  }
-
-  public closeTrack() {
-    if (this.props.drawerOpened === false) {
+export const Browser: FunctionComponent<BrowserProps> = (
+  props: BrowserProps
+) => {
+  const closeTrack = () => {
+    if (props.drawerOpened === false) {
       return;
     }
 
-    this.props.closeDrawer();
-  }
+    props.closeDrawer();
+  };
 
-  public render() {
-    return (
-      <section className={styles.browser}>
-        <BrowserBar
-          browserNavOpened={this.props.browserNavOpened}
-          expanded={true}
-          toggleBrowserNav={this.props.toggleBrowserNav}
-        />
-        <div className={styles.browserInnerWrapper}>
-          <div
-            className={`${styles.browserImageWrapper} ${
-              styles[this.props.browserOpenState]
-            }`}
-            onClick={this.closeTrack}
-          >
-            {this.props.browserNavOpened && <BrowserNavBar />}
-            <BrowserImage />
-          </div>
-          <TrackPanel />
-          {this.props.drawerOpened && <Drawer />}
+  return (
+    <section className={styles.browser}>
+      <BrowserBar
+        browserNavOpened={props.browserNavOpened}
+        expanded={true}
+        toggleBrowserNav={props.toggleBrowserNav}
+      />
+      <div className={styles.browserInnerWrapper}>
+        <div
+          className={`${styles.browserImageWrapper} ${
+            styles[props.browserOpenState]
+          }`}
+          onClick={closeTrack}
+        >
+          {props.browserNavOpened && <BrowserNavBar />}
+          <BrowserImage />
         </div>
-      </section>
-    );
-  }
-}
+        <TrackPanel />
+        {props.drawerOpened && <Drawer />}
+      </div>
+    </section>
+  );
+};
 
 const mapStateToProps = (state: RootState) => ({
   browserNavOpened: getBrowserNavOpened(state),

src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.tsx

-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 
 import { browserNavConfig, BrowserNavItem } from '../browserConfig';
 
@@ -8,18 +8,14 @@ import styles from './BrowserNavBar.scss';
 
 type BrowserNavBarProps = {};
 
-class BrowserNavBar extends Component<BrowserNavBarProps> {
-  public render() {
-    return (
-      <div className={styles.browserNavBar}>
-        <dl>
-          {browserNavConfig.map((item: BrowserNavItem) => (
-            <BrowserNavIcon key={item.name} browserNavItem={item} />
-          ))}
-        </dl>
-      </div>
-    );
-  }
-}
+const BrowserNavBar: FunctionComponent<BrowserNavBarProps> = () => (
+  <div className={styles.browserNavBar}>
+    <dl>
+      {browserNavConfig.map((item: BrowserNavItem) => (
+        <BrowserNavIcon key={item.name} browserNavItem={item} />
+      ))}
+    </dl>
+  </div>
+);
 
 export default BrowserNavBar;

src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.tsx

-import React, { PureComponent } from 'react';
+import React, { FunctionComponent, memo } from 'react';
 
 import { BrowserNavItem } from '../browserConfig';
 
@@ -8,40 +8,31 @@ type BrowserNavIconProps = {
   browserNavItem: BrowserNavItem;
 };
 
-class BrowserNavIcon extends PureComponent<BrowserNavIconProps> {
-  constructor(props: BrowserNavIconProps) {
-    super(props);
+const BrowserNavIcon: FunctionComponent<BrowserNavIconProps> = memo(
+  (props: BrowserNavIconProps) => {
+    const navigateBrowser = () => {
+      const { detail } = props.browserNavItem;
 
-    this.navigateBrowser = this.navigateBrowser.bind(this);
-  }
+      const navEvent = new CustomEvent('bpane', {
+        bubbles: true,
+        detail
+      });
+
+      const browserCanvas = document.querySelector('.bpane-canv') as Element;
 
-  public render() {
-    const { browserNavItem } = this.props;
+      browserCanvas.dispatchEvent(navEvent);
+    };
+
+    const { browserNavItem } = props;
 
     return (
       <dd className={styles.browserNavIcon}>
-        <button
-          title={browserNavItem.description}
-          onClick={this.navigateBrowser}
-        >
+        <button title={browserNavItem.description} onClick={navigateBrowser}>
           <img src={browserNavItem.icon.on} alt={browserNavItem.description} />
         </button>
       </dd>
     );
   }
-
-  private navigateBrowser() {
-    const { detail } = this.props.browserNavItem;
-
-    const navEvent = new CustomEvent('bpane', {
-      bubbles: true,
-      detail
-    });
-
-    const browserCanvas = document.querySelector('#bpane-canv') as Element;
-
-    browserCanvas.dispatchEvent(navEvent);
-  }
-}
+);
 
 export default BrowserNavIcon;

src/ensembl/src/content/app/browser/drawer/DrawerBar.tsx

-import React, { Component, ReactEventHandler } from 'react';
+import React, { FunctionComponent, ReactEventHandler } from 'react';
 
 import { DrawerSection } from './drawerSectionConfig';
 import { EventHandlers } from 'src/objects';
@@ -14,44 +14,43 @@ type DrawerBarProps = {
   drawerSections: DrawerSection[];
 };
 
-class DrawerBar extends Component<DrawerBarProps> {
-  public drawerSections: DrawerSection[] = [];
-  public clickHandlers: EventHandlers = {};
-
-  public render() {
-    return (
-      <div className={styles.drawerBar}>
-        <dl className={styles.pageList}>
-          <dt>
-            <button onClick={this.getClickHandler('main')}>{'Main'}</button>
-          </dt>
-          {this.props.drawerSections &&
-            this.props.drawerSections.map((section: DrawerSection) => (
-              <dt key={section.name}>
-                <button onClick={this.getClickHandler(section.name)}>
-                  {section.label}
-                </button>
-              </dt>
-            ))}
-        </dl>
-        <button className={styles.closeButton} onClick={this.props.closeDrawer}>
-          <img src={closeIcon} alt="close drawer" />
-        </button>
-      </div>
-    );
-  }
-
-  private getClickHandler(key: string) {
-    if (!this.clickHandlers.hasOwnProperty(key)) {
+const DrawerBar: FunctionComponent<DrawerBarProps> = (
+  props: DrawerBarProps
+) => {
+  const clickHandlers: EventHandlers = {};
+
+  const getClickHandler = (key: string) => {
+    if (!clickHandlers.hasOwnProperty(key)) {
       const handler: ReactEventHandler = () => {
-        this.props.changeCurrentDrawerSection(key);
+        props.changeCurrentDrawerSection(key);
       };
 
-      this.clickHandlers[key] = handler;
+      clickHandlers[key] = handler;
     }
 
-    return this.clickHandlers[key];
-  }
-}
+    return clickHandlers[key];
+  };
+
+  return (
+    <div className={styles.drawerBar}>
+      <dl className={styles.pageList}>
+        <dt>
+          <button onClick={getClickHandler('main')}>{'Main'}</button>
+        </dt>
+        {props.drawerSections &&
+          props.drawerSections.map((section: DrawerSection) => (
+            <dt key={section.name}>
+              <button onClick={getClickHandler(section.name)}>
+                {section.label}
+              </button>
+            </dt>
+          ))}
+      </dl>
+      <button className={styles.closeButton} onClick={props.closeDrawer}>
+        <img src={closeIcon} alt="close drawer" />
+      </button>
+    </div>
+  );
+};
 
 export default DrawerBar;

src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import { connect } from 'react-redux';
 
 import TrackPanelBar from './track-panel-bar/TrackPanelBar';
@@ -12,6 +12,7 @@ import {
   openDrawer,
   closeDrawer
 } from '../browserActions';
+
 import {
   getCurrentTrack,
   getDrawerOpened,
@@ -33,28 +34,28 @@ type TrackPanelProps = {
   trackPanelOpened: boolean;
 };
 
-class TrackPanel extends Component<TrackPanelProps> {
-  public render() {
-    return (
-      <section className={`${styles.trackPanel} reactSlideDrawer`}>
-        <TrackPanelBar
-          closeDrawer={this.props.closeDrawer}
-          drawerOpened={this.props.drawerOpened}
-          launchbarExpanded={this.props.launchbarExpanded}
-          trackPanelOpened={this.props.trackPanelOpened}
-          toggleTrackPanel={this.props.toggleTrackPanel}
+const TrackPanel: FunctionComponent<TrackPanelProps> = (
+  props: TrackPanelProps
+) => {
+  return (
+    <section className={`${styles.trackPanel} reactSlideDrawer`}>
+      <TrackPanelBar
+        closeDrawer={props.closeDrawer}
+        drawerOpened={props.drawerOpened}
+        launchbarExpanded={props.launchbarExpanded}
+        trackPanelOpened={props.trackPanelOpened}
+        toggleTrackPanel={props.toggleTrackPanel}
+      />
+      {props.trackPanelOpened ? (
+        <TrackPanelList
+          currentTrack={props.currentTrack}
+          openDrawer={props.openDrawer}
+          updateTrack={props.changeCurrentTrack}
         />
-        {this.props.trackPanelOpened ? (
-          <TrackPanelList
-            currentTrack={this.props.currentTrack}
-            openDrawer={this.props.openDrawer}
-            updateTrack={this.props.changeCurrentTrack}
-          />
-        ) : null}
-      </section>
-    );
-  }
-}
+      ) : null}
+    </section>
+  );
+};
 
 const mapStateToProps = (state: RootState) => ({
   currentTrack: getCurrentTrack(state),

src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx

-import React, { PureComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 
 import { trackPanelBarConfig, TrackPanelBarItem } from './trackPanelBarConfig';
 
@@ -17,49 +17,41 @@ type TrackPanelBarProps = {
   toggleTrackPanel: () => void;
 };
 
-class TrackPanelBar extends PureComponent<TrackPanelBarProps> {
-  constructor(props: TrackPanelBarProps) {
-    super(props);
-
-    this.moveTrackPanel = this.moveTrackPanel.bind(this);
-  }
-
-  public moveTrackPanel() {
-    if (this.props.drawerOpened === true) {
-      this.props.closeDrawer();
+const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
+  props: TrackPanelBarProps
+) => {
+  const moveTrackPanel = () => {
+    if (props.drawerOpened === true) {
+      props.closeDrawer();
     } else {
-      this.props.toggleTrackPanel();
+      props.toggleTrackPanel();
     }
-  }
+  };
 
-  public render() {
-    return (
-      <div className={this.getClassNames()}>
-        <dl>
-          <dt className={styles.sliderButton}>
-            <button onClick={this.moveTrackPanel}>
-              {this.props.trackPanelOpened ? (
-                <img src={chevronRightIcon} alt="collapse" />
-              ) : (
-                <img src={chevronLeftIcon} alt="expand" />
-              )}
-            </button>
-          </dt>
-          {trackPanelBarConfig.map((item: TrackPanelBarItem) => (
-            <TrackPanelBarIcon key={item.name} iconConfig={item} />
-          ))}
-        </dl>
-      </div>
-    );
-  }
-
-  private getClassNames() {
-    const expandClass: string = this.props.launchbarExpanded
-      ? ''
-      : styles.expanded;
+  const getClassNames = () => {
+    const expandClass: string = props.launchbarExpanded ? '' : styles.expanded;
 
     return `${styles.trackPanelBar} ${expandClass}`;
-  }
-}
+  };
+
+  return (
+    <div className={getClassNames()}>
+      <dl>
+        <dt className={styles.sliderButton}>
+          <button onClick={moveTrackPanel}>
+            {props.trackPanelOpened ? (
+              <img src={chevronRightIcon} alt="collapse" />
+            ) : (
+              <img src={chevronLeftIcon} alt="expand" />
+            )}
+          </button>
+        </dt>
+        {trackPanelBarConfig.map((item: TrackPanelBarItem) => (
+          <TrackPanelBarIcon key={item.name} iconConfig={item} />
+        ))}
+      </dl>
+    </div>
+  );
+};
 
 export default TrackPanelBar;

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx

-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 
 import TrackPanelListItem from './TrackPanelListItem';
 import {
@@ -15,59 +15,53 @@ type TrackPanelListProps = {
   updateTrack: (currentTrack: string) => void;
 };
 
-class TrackPanelList extends Component<TrackPanelListProps> {
-  constructor(props: TrackPanelListProps) {
-    super(props);
-
-    this.changeTrack = this.changeTrack.bind(this);
-  }
-
-  public changeTrack(currentTrack: string) {
-    const { openDrawer, updateTrack } = this.props;
+const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
+  props: TrackPanelListProps
+) => {
+  const changeTrack = (currentTrack: string) => {
+    const { openDrawer, updateTrack } = props;
 
     updateTrack(currentTrack);
     openDrawer();
-  }
-
-  public render() {
-    return (
-      <div className={styles.trackPanelList}>
-        <section>
-          <dl>
-            <TrackPanelListItem
-              className="main"
-              track={trackPanelConfig.main}
-              changeTrack={this.changeTrack}
-              additionalInfo="MANE Select transcript /7"
-            />
-          </dl>
-        </section>
-        {trackPanelConfig.categories.map((category: TrackPanelCategory) => (
-          <section>
-            <h4>{category.name}</h4>
-            <dl>
-              {category.trackList.map((track: TrackPanelItem) => (
-                <TrackPanelListItem
-                  key={track.id}
-                  className={this.getTrackClass(track.name)}
-                  track={track}
-                  changeTrack={this.changeTrack}
-                />
-              ))}
-            </dl>
-          </section>
-        ))}
-      </div>
-    );
-  }
+  };
 
-  private getTrackClass(trackName: string): string {
-    if (this.props.currentTrack === trackName) {
+  const getTrackClass = (trackName: string): string => {
+    if (props.currentTrack === trackName) {
       return 'currentTrack';
     } else {
       return '';
     }
-  }
-}
+  };
+
+  return (
+    <div className={styles.trackPanelList}>
+      <section>
+        <dl>
+          <TrackPanelListItem
+            className="main"
+            track={trackPanelConfig.main}
+            changeTrack={changeTrack}
+            additionalInfo="MANE Select transcript /7"
+          />
+        </dl>
+      </section>
+      {trackPanelConfig.categories.map((category: TrackPanelCategory) => (
+        <section key={category.name}>
+          <h4>{category.name}</h4>
+          <dl>
+            {category.trackList.map((track: TrackPanelItem) => (
+              <TrackPanelListItem
+                key={track.id}
+                className={getTrackClass(track.name)}
+                track={track}
+                changeTrack={changeTrack}
+              />
+            ))}
+          </dl>
+        </section>
+      ))}
+    </div>
+  );
+};
 
 export default TrackPanelList;

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx

-import React, { PureComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 import { TrackPanelItem, trackPanelIconConfig } from '../trackPanelConfig';
 
 import chevronDownIcon from 'static/img/track-panel/chevron-down.svg';
@@ -13,56 +13,49 @@ type TrackPanelListItemProps = {
   additionalInfo?: string;
 };
 
-class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
-  private expanded: boolean = false;
-
-  constructor(props: TrackPanelListItemProps) {
-    super(props);
-
-    this.changeTrackHandler = this.changeTrackHandler.bind(this);
-  }