From 84fa99a126ddd53594b504d913bd63a8c9932b09 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Tue, 26 Feb 2019 19:46:18 -0800
Subject: [PATCH] Icon, SeriesIndexFooter -> PureComponent

---
 frontend/src/Components/Icon.js               |  78 +++---
 frontend/src/Components/Page/PageJumpBar.js   |   7 +
 .../src/Series/Index/SeriesIndexFooter.js     | 253 +++++++++---------
 3 files changed, 179 insertions(+), 159 deletions(-)

diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
index ae3f01c10..d7748d2e7 100644
--- a/frontend/src/Components/Icon.js
+++ b/frontend/src/Components/Icon.js
@@ -1,49 +1,55 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { kinds } from 'Helpers/Props';
 import classNames from 'classnames';
 import styles from './Icon.css';
 
-function Icon(props) {
-  const {
-    containerClassName,
-    className,
-    name,
-    kind,
-    size,
-    title,
-    isSpinning,
-    ...otherProps
-  } = props;
+class Icon extends PureComponent {
 
-  const icon = (
-    <FontAwesomeIcon
-      className={classNames(
-        className,
-        styles[kind]
-      )}
-      icon={name}
-      spin={isSpinning}
-      style={{
-        fontSize: `${size}px`
-      }}
-      {...otherProps}
-    />
-  );
+  //
+  // Render
 
-  if (title) {
-    return (
-      <span
-        className={containerClassName}
-        title={title}
-      >
-        {icon}
-      </span>
+  render() {
+    const {
+      containerClassName,
+      className,
+      name,
+      kind,
+      size,
+      title,
+      isSpinning,
+      ...otherProps
+    } = this.props;
+
+    const icon = (
+      <FontAwesomeIcon
+        className={classNames(
+          className,
+          styles[kind]
+        )}
+        icon={name}
+        spin={isSpinning}
+        style={{
+          fontSize: `${size}px`
+        }}
+        {...otherProps}
+      />
     );
-  }
 
-  return icon;
+    if (title) {
+      return (
+        <span
+          className={containerClassName}
+          title={title}
+        >
+          {icon}
+        </span>
+      );
+    }
+
+    return icon;
+  }
 }
 
 Icon.propTypes = {
diff --git a/frontend/src/Components/Page/PageJumpBar.js b/frontend/src/Components/Page/PageJumpBar.js
index f7d44ae9a..f555d5426 100644
--- a/frontend/src/Components/Page/PageJumpBar.js
+++ b/frontend/src/Components/Page/PageJumpBar.js
@@ -26,6 +26,13 @@ class PageJumpBar extends Component {
     this.computeVisibleItems();
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      nextProps.items !== this.props.items ||
+      nextState.height !== this.state.height
+    );
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (
       prevProps.items !== this.props.items ||
diff --git a/frontend/src/Series/Index/SeriesIndexFooter.js b/frontend/src/Series/Index/SeriesIndexFooter.js
index 92480c721..712937dc6 100644
--- a/frontend/src/Series/Index/SeriesIndexFooter.js
+++ b/frontend/src/Series/Index/SeriesIndexFooter.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import formatBytes from 'Utilities/Number/formatBytes';
 import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
@@ -7,141 +7,148 @@ import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import styles from './SeriesIndexFooter.css';
 
-function SeriesIndexFooter({ series }) {
-  const count = series.length;
-  let episodes = 0;
-  let episodeFiles = 0;
-  let ended = 0;
-  let continuing = 0;
-  let monitored = 0;
-  let totalFileSize = 0;
+class SeriesIndexFooter extends PureComponent {
 
-  series.forEach((s) => {
-    const { statistics = {} } = s;
+  //
+  // Render
 
-    const {
-      episodeCount = 0,
-      episodeFileCount = 0,
-      sizeOnDisk = 0
-    } = statistics;
+  render() {
+    const { series } = this.props;
+    const count = series.length;
+    let episodes = 0;
+    let episodeFiles = 0;
+    let ended = 0;
+    let continuing = 0;
+    let monitored = 0;
+    let totalFileSize = 0;
 
-    episodes += episodeCount;
-    episodeFiles += episodeFileCount;
+    series.forEach((s) => {
+      const { statistics = {} } = s;
 
-    if (s.status === 'ended') {
-      ended++;
-    } else {
-      continuing++;
-    }
+      const {
+        episodeCount = 0,
+        episodeFileCount = 0,
+        sizeOnDisk = 0
+      } = statistics;
 
-    if (s.monitored) {
-      monitored++;
-    }
+      episodes += episodeCount;
+      episodeFiles += episodeFileCount;
 
-    totalFileSize += sizeOnDisk;
-  });
+      if (s.status === 'ended') {
+        ended++;
+      } else {
+        continuing++;
+      }
 
-  return (
-    <ColorImpairedConsumer>
-      {(enableColorImpairedMode) => {
-        return (
-          <div className={styles.footer}>
-            <div>
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.continuing,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Continuing (All episodes downloaded)</div>
+      if (s.monitored) {
+        monitored++;
+      }
+
+      totalFileSize += sizeOnDisk;
+    });
+
+    return (
+      <ColorImpairedConsumer>
+        {(enableColorImpairedMode) => {
+          return (
+            <div className={styles.footer}>
+              <div>
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.continuing,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Continuing (All episodes downloaded)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.ended,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Ended (All episodes downloaded)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.missingMonitored,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Missing Episodes (Series monitored)</div>
+                </div>
+
+                <div className={styles.legendItem}>
+                  <div
+                    className={classNames(
+                      styles.missingUnmonitored,
+                      enableColorImpairedMode && 'colorImpaired'
+                    )}
+                  />
+                  <div>Missing Episodes (Series not monitored)</div>
+                </div>
               </div>
 
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.ended,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Ended (All episodes downloaded)</div>
-              </div>
+              <div className={styles.statistics}>
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Series"
+                    data={count}
+                  />
 
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.missingMonitored,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Missing Episodes (Series monitored)</div>
-              </div>
+                  <DescriptionListItem
+                    title="Ended"
+                    data={ended}
+                  />
 
-              <div className={styles.legendItem}>
-                <div
-                  className={classNames(
-                    styles.missingUnmonitored,
-                    enableColorImpairedMode && 'colorImpaired'
-                  )}
-                />
-                <div>Missing Episodes (Series not monitored)</div>
+                  <DescriptionListItem
+                    title="Continuing"
+                    data={continuing}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Monitored"
+                    data={monitored}
+                  />
+
+                  <DescriptionListItem
+                    title="Unmonitored"
+                    data={count - monitored}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Episodes"
+                    data={episodes}
+                  />
+
+                  <DescriptionListItem
+                    title="Files"
+                    data={episodeFiles}
+                  />
+                </DescriptionList>
+
+                <DescriptionList>
+                  <DescriptionListItem
+                    title="Total File Size"
+                    data={formatBytes(totalFileSize)}
+                  />
+                </DescriptionList>
               </div>
             </div>
-
-            <div className={styles.statistics}>
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Series"
-                  data={count}
-                />
-
-                <DescriptionListItem
-                  title="Ended"
-                  data={ended}
-                />
-
-                <DescriptionListItem
-                  title="Continuing"
-                  data={continuing}
-                />
-              </DescriptionList>
-
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Monitored"
-                  data={monitored}
-                />
-
-                <DescriptionListItem
-                  title="Unmonitored"
-                  data={count - monitored}
-                />
-              </DescriptionList>
-
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Episodes"
-                  data={episodes}
-                />
-
-                <DescriptionListItem
-                  title="Files"
-                  data={episodeFiles}
-                />
-              </DescriptionList>
-
-              <DescriptionList>
-                <DescriptionListItem
-                  title="Total File Size"
-                  data={formatBytes(totalFileSize)}
-                />
-              </DescriptionList>
-            </div>
-          </div>
-        );
-      }}
-    </ColorImpairedConsumer>
-  );
+          );
+        }}
+      </ColorImpairedConsumer>
+    );
+  }
 }
 
 SeriesIndexFooter.propTypes = {