Updated save series button

Author: hfox0290

src/app/components/BarGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -109,19 +109,19 @@ const BarGraph = (props) => {
     data,
   };
 
-  const animateButton = function (e) {
-    e.preventDefault;
-    e.target.classList.add('animate');
-    e.target.innerHTML = 'Saved!';
-    setTimeout(function () {
-      e.target.innerHTML = 'Save Series';
-      e.target.classList.remove('animate');
-    }, 1000);
-  };
-  const classname = document.getElementsByClassName('save-series-button');
-  for (let i = 0; i < classname.length; i++) {
-    classname[i].addEventListener('click', animateButton, false);
-  }
+  // use this to animate the save series button. It
+  useEffect(() => {
+    const saveButtons = document.getElementsByClassName('save-series-button');
+    for (let i = 0; i < saveButtons.length; i++) {
+      if (tabs[currentTab].seriesSavedStatus) {
+        saveButtons[i].classList.add('animate');
+        saveButtons[i].innerHTML = 'Saved!';
+      } else {
+        saveButtons[i].innerHTML = 'Save Series';
+        saveButtons[i].classList.remove('animate');
+      };
+    };
+  });
   return (
     <div className='bargraph-position'>
       <button

src/app/containers/MainContainer.tsx

@@ -60,6 +60,7 @@ function MainContainer(): any {
           case 'sendSnapshots': {
             dispatch(setTab(sourceTab));
             // set state with the information received from the background script
+            console.log('sendSnapshots payload\n', payload); // HFConsoleLog
             dispatch(addNewSnapshots(payload));
             break;
           }

src/app/reducers/mainReducer.js

@@ -38,6 +38,8 @@ export default (state, action) =>
       case types.SAVE: {
         const data = JSON.stringify(action.payload);
         localStorage.setItem(`${action.payload.currentTab}`, data);
+        tabs[currentTab] = {...tabs[currentTab], seriesSavedStatus: true};
+        console.log('seriesSavedStatus set to true from saving series');
         break;
       }
       // Delete case will delete ALL stored series in chrome local storage. To see  chrome storage related data
@@ -56,6 +58,7 @@ export default (state, action) =>
             ...tabs[tab],
           };
         });
+        tabs[currentTab] = {...tabs[currentTab], seriesSavedStatus: false}
       }
       case types.ON_HOVER_EXIT: {
         port.postMessage({
@@ -187,6 +190,8 @@ export default (state, action) =>
         tabs[currentTab].currParent = 1;
         // resets currBranch
         tabs[currentTab].currBranch = 0;
+        // resets series saved status
+        tabs[currentTab].seriesSavedStatus = false;
         break;
       }
       case types.SET_PORT: {
@@ -265,7 +270,9 @@ export default (state, action) =>
               ...tabs[tab],
               ...payload[tab],
               sliderIndex: newSnaps.length - 1,
+              seriesSavedStatus: false,
             };
+            console.log('seriesSavedStatus set to false from new snapshot');
           }
         });