From 782e53b460d1375eb5b22c373b952bd0af63e9ea Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 26 Dec 2019 14:13:33 -0800
Subject: [PATCH] Pull out barCanvas into the functional component

---
 js/components/Visualizer.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/js/components/Visualizer.js b/js/components/Visualizer.js
index df75416e..1c94af69 100644
--- a/js/components/Visualizer.js
+++ b/js/components/Visualizer.js
@@ -30,6 +30,10 @@ function Wrapper(props) {
     );
   }, [height, props.colors, props.windowShade, width]);
 
+  const barCanvas = useMemo(() => {
+    return preRenderBar(height, props.colors, renderHeight);
+  }, [height, props.colors, renderHeight]);
+
   const visualizerProps = {
     ...props,
     renderHeight,
@@ -37,6 +41,7 @@ function Wrapper(props) {
     height,
     width,
     bgCanvas,
+    barCanvas,
   };
 
   return <Visualizer {...visualizerProps} />;
@@ -85,7 +90,6 @@ class Visualizer extends React.Component {
     }
     // TODO: Split this into to methods. One for skin update, one for style
     // update.
-    this.preRenderBar();
     this.props.analyser.fftSize = 2048;
     if (this.props.style === VISUALIZERS.OSCILLOSCOPE) {
       this.bufferLength = this.props.analyser.fftSize;
@@ -100,14 +104,6 @@ class Visualizer extends React.Component {
     }
   }
 
-  preRenderBar() {
-    this.barCanvas = preRenderBar(
-      this.props.height,
-      this.props.colors,
-      this.props.renderHeight
-    );
-  }
-
   paintFrame() {
     switch (this.props.style) {
       case VISUALIZERS.OSCILLOSCOPE:
@@ -134,7 +130,7 @@ class Visualizer extends React.Component {
           barPeakFrames: this.barPeakFrames,
           height: this.props.height,
           canvasCtx: this.canvasCtx,
-          barCanvas: this.barCanvas,
+          barCanvas: this.props.barCanvas,
           windowShade: this.props.windowShade,
           colors: this.props.colors,
         });