From d143e84a1820ef1b86d7b4a94164f7e924cebc06 Mon Sep 17 00:00:00 2001
From: Giovani <giovani@boldquest.net>
Date: Fri, 12 Apr 2019 08:59:17 -0400
Subject: [PATCH] Fixed issue with animation not working on progress bar

---
 src/components/shared/skills/skills.css |  7 +++--
 src/components/shared/skills/skills.js  | 36 ++++++++++++++++++-------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/shared/skills/skills.css b/src/components/shared/skills/skills.css
index 0eac073..d62153d 100644
--- a/src/components/shared/skills/skills.css
+++ b/src/components/shared/skills/skills.css
@@ -3,6 +3,9 @@
 }
 
 .progress-bar-ani {
-  -webkit-transition: width 1s ease-in-out;
-  transition: width 1s ease-in-out;
+  /* ADD REST OF TRANSITIONS FOR BROWSER */
+  -webkit-transition: width 1.3s ease-in-out;
+  -moz-transition: width 1.3s ease-in-out;
+  -o-transition: width 1.3s ease-in-out;
+  transition: width 1.3s ease-in-out;
 }
\ No newline at end of file
diff --git a/src/components/shared/skills/skills.js b/src/components/shared/skills/skills.js
index 967387d..a42a03d 100644
--- a/src/components/shared/skills/skills.js
+++ b/src/components/shared/skills/skills.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import './skills.css';
-import { ReactComponent } from '*.svg';
 
 class Skills extends Component {
   constructor(props) {
@@ -8,18 +7,32 @@ class Skills extends Component {
     this.state = {
       isProgressBarOneInView: false
     };
+
+    this.progressBarRefs = [
+      React.createRef(), // ONE
+      React.createRef(), // TWO
+      React.createRef(), // THREE
+      React.createRef()  // FOUR
+    ];
   }
 
-  progressBarOneRef = React.createRef();
+  progressBarRefs = [];
 
-  isElementInView = (offset, elementRef) => {
+  isElementInView = (elementRef, offset = 0) => {
     if (!elementRef) return false;
     const top = elementRef.getBoundingClientRect().top;
     return (top + offset) >= 0 && (top - offset) <= window.innerHeight;
   }
 
-  checkProgressBarsInView = () {
-
+  checkProgressBarsInView = () => {
+    for (var i = 0; i < this.progressBarRefs.length; i++) {
+      let progressBarRef = this.progressBarRefs[i];
+      if (this.isElementInView(progressBarRef)) {
+        this.setState({
+          isProgressBarOneInView: true /* In Progress */
+        });
+      }
+    }
   }
 
   render() {
@@ -32,8 +45,8 @@ class Skills extends Component {
             <h2><strong>Skills and Abilities</strong></h2>
             <div className="mt-5 mb-4">
               <h4 className="text-left">C#/.NET</h4>
-              <div className="progress progress-bar-height" id="progress-bar-one">
-                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarOneRef = el}
+              <div className="progress progress-bar-height">
+                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[0] = el}
                      role="progressbar" style={{width: isProgressBarOneInView ? 88+'%' : 0}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                 </div>
               </div>
@@ -41,19 +54,22 @@ class Skills extends Component {
             <div className="mt-5 mb-4">
               <h4 className="text-left">Javascript</h4>
               <div className="progress progress-bar-height">
-                <div className="progress-bar progress-bar-ani" role="progressbar" style={{width: 75+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[1] = el}
+                     role="progressbar" style={{width: 75+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
             <div className="mt-5 mb-4">
               <h4 className="text-left">Software Design</h4>
               <div className="progress progress-bar-height">
-                <div className="progress-bar" role="progressbar" style={{width: 70+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[2] = el}
+                     role="progressbar" style={{width: 70+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
             <div className="mt-5 mb-4">
               <h4 className="text-left">MSSQL</h4>
               <div className="progress progress-bar-height">
-                <div className="progress-bar" role="progressbar" style={{width: 62+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                <div className="progress-bar progress-bar-ani" ref={(el) => this.progressBarRefs[3] = el}
+                     role="progressbar" style={{width: 62+'%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
               </div>
             </div>
           </div>