From 8694de6b1b35dd2919a0b2c77a4c6bd86234de0c Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 11:45:45 -0400
Subject: [PATCH] step buttons change colors after click, but are always one
 update behind

---
 src/canvas/StepMenu.js | 41 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 9f639d0..28a15ee 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -11,23 +11,58 @@ class StepMenu extends React.Component {
       backColor:"rgb(68, 68, 68)",
       nextColor:"rgb(68, 68, 68)"
     };
+    this.updateColor();
+    
+
+  }
+
+  updateColor() {
+    console.log(this.props.currentStep + " - " + (this.props.stepInfo.length));
     // changes the color of the prev or next buttons to be grayed out
     // if the current step is the first or last step
     if(this.props.currentStep == 0){
       this.state.backColor = "rgb(136, 136, 136)";
     }
+    else{
+      this.state.backColor = "rgb(68, 68, 68)";
+    }
     if(this.props.currentStep == this.props.stepInfo.length){
       this.state.nextColor = "rgb(136, 136, 136)";
     }
+    else{
+      this.state.nextColor = "rgb(68, 68, 68)";
+    }
   }
 
   componentDidMount() {  
+
   }
 
-  handleClick(event, clickType){
+  /* Handles clicking of the SVG components
+   * event is the click itself, clicktype tells which
+   * SVG button was clicked with a string
+   */
+  handleClick(event, clickType) {
     event.preventDefault();
-    this.props.setStep(this.props.currentStep+1);
-    console.log("TeStInG" + clickType);
+    switch(clickType) {
+      case "first":
+        this.props.setStep(0);
+        break;
+      case "prev":
+        if(this.props.currentStep != 0)
+          this.props.setStep(this.props.currentStep-1);
+        break;
+      case "next":
+        if(this.props.currentStep != this.props.stepInfo.length)
+          this.props.setStep(this.props.currentStep+1);
+          break;
+      case "last":
+        this.props.setStep(this.props.stepInfo.length);
+        break;
+      default:
+        break;
+    }
+    this.updateColor();
   }
 
   render() {
-- 
2.51.2