Extract some props into a functional version of Visualizer

This is a step toward making the whole component functional

js/components/Visualizer.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { connect } from "react-redux";
 
 import { toggleVisualizerStyle } from "../actionCreators";
@@ -14,6 +14,34 @@ import {
   PIXEL_DENSITY,
 } from "./visualizerUtils";
 
+function Wrapper(props) {
+  const renderWidth = props.canvasWidth;
+  const renderHeight = props.canvasHeight;
+  const height = props.canvasHeight * PIXEL_DENSITY;
+  const width = props.canvasWidth * PIXEL_DENSITY;
+
+  const bgCanvas = useMemo(() => {
+    return preRenderBg(
+      width,
+      height,
+      props.colors[0],
+      props.colors[1],
+      props.windowShade
+    );
+  }, [height, props.colors, props.windowShade, width]);
+
+  const visualizerProps = {
+    ...props,
+    renderHeight,
+    renderWidth,
+    height,
+    width,
+    bgCanvas,
+  };
+
+  return <Visualizer {...visualizerProps} />;
+}
+
 class Visualizer extends React.Component {
   componentDidMount() {
     this.barPeaks = new Array(NUM_BARS).fill(0);
@@ -51,29 +79,12 @@ class Visualizer extends React.Component {
     this.paintFrame();
   }
 
-  _renderWidth() {
-    return this.props.width;
-  }
-
-  _renderHeight() {
-    return this.props.height;
-  }
-
-  _height() {
-    return this.props.height * PIXEL_DENSITY;
-  }
-
-  _width() {
-    return this.props.width * PIXEL_DENSITY;
-  }
-
   setStyle() {
     if (!this.props.colors) {
       return;
     }
     // TODO: Split this into to methods. One for skin update, one for style
     // update.
-    this.preRenderBg();
     this.preRenderBar();
     this.props.analyser.fftSize = 2048;
     if (this.props.style === VISUALIZERS.OSCILLOSCOPE) {
@@ -89,51 +100,39 @@ class Visualizer extends React.Component {
     }
   }
 
-  // Pre-render the background grid
-  preRenderBg() {
-    this.bgCanvas = preRenderBg(
-      this._width(),
-      this._height(),
-      this.props.colors[0],
-      this.props.colors[1],
-      this.props.windowShade
-    );
-  }
-
-  // Pre-render the bar gradient
   preRenderBar() {
     this.barCanvas = preRenderBar(
-      this._height(),
+      this.props.height,
       this.props.colors,
-      this._renderHeight()
+      this.props.renderHeight
     );
   }
 
   paintFrame() {
     switch (this.props.style) {
       case VISUALIZERS.OSCILLOSCOPE:
-        this.canvasCtx.drawImage(this.bgCanvas, 0, 0);
+        this.canvasCtx.drawImage(this.props.bgCanvas, 0, 0);
         paintOscilloscopeFrame({
           analyser: this.props.analyser,
           dataArray: this.dataArray,
           canvasCtx: this.canvasCtx,
-          height: this._height(),
-          width: this._width(),
+          height: this.props.height,
+          width: this.props.width,
           bufferLength: this.bufferLength,
           colors: this.props.colors,
-          renderWidth: this._renderWidth(),
+          renderWidth: this.props.renderWidth,
         });
         break;
       case VISUALIZERS.BAR:
-        this.canvasCtx.drawImage(this.bgCanvas, 0, 0);
+        this.canvasCtx.drawImage(this.props.bgCanvas, 0, 0);
         paintBarFrame({
           analyser: this.props.analyser,
           dataArray: this.dataArray,
-          renderHeight: this._renderHeight(),
+          renderHeight: this.props.renderHeight,
           octaveBuckets: this.octaveBuckets,
           barPeaks: this.barPeaks,
           barPeakFrames: this.barPeakFrames,
-          height: this._height(),
+          height: this.props.height,
           canvasCtx: this.canvasCtx,
           barCanvas: this.barCanvas,
           windowShade: this.props.windowShade,
@@ -146,14 +145,14 @@ class Visualizer extends React.Component {
   }
 
   render() {
-    const { width, height } = this.props;
+    const { renderWidth, renderHeight, width, height } = this.props;
     return (
       <canvas
         id="visualizer"
         ref={node => (this.canvas = node)}
-        style={{ width, height }}
-        width={width * PIXEL_DENSITY}
-        height={height * PIXEL_DENSITY}
+        style={{ width: renderWidth, height: renderHeight }}
+        width={width}
+        height={height}
         onClick={this.props.toggleVisualizerStyle}
       />
     );
@@ -163,8 +162,8 @@ class Visualizer extends React.Component {
 const mapStateToProps = state => ({
   colors: state.display.skinColors,
   style: getVisualizerStyle(state),
-  width: getWindowShade(state)("main") ? 38 : 76,
-  height: getWindowShade(state)("main") ? 5 : 16,
+  canvasWidth: getWindowShade(state)("main") ? 38 : 76,
+  canvasHeight: getWindowShade(state)("main") ? 5 : 16,
   status: state.media.status,
   windowShade: getWindowShade(state)("main"),
   dummyVizData: state.display.dummyVizData,
@@ -174,4 +173,4 @@ const mapDispatchToProps = {
   toggleVisualizerStyle,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Visualizer);
+export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);