Merge pull request #9 from StackOverFlowWhereArtThou/fixSaveButton

Save Series Improved Features

Author: josephiswhere

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');
           }
         });
 

src/extension/background.js

@@ -14,6 +14,10 @@ const metrics = {};
 // which will hold test app's snapshots, link fiber tree info, chrome tab info, etc.
 // console.log("hello from background.js");
 function createTabObj(title) {
+  // TO-DO for save button
+    // Save State
+    // Knowlege of the comparison snapshot
+    // Check for it in the reducer
   // update tabsObj
   return {
     title,

src/extension/build/manifest.json

@@ -1,22 +1,39 @@
 {
-  "name": "ReactimeX",
-  "version": "8.0.0",
+  "name": "ReactimevHarryFox",
+  "version": "8.0.1",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
   "manifest_version": 2,
-  "content_security_policy":"script-src 'self' https://www.gstatic.com:* 'unsafe-eval'; object-src 'self'",
+  "content_security_policy": "script-src 'self' https://www.gstatic.com:* 'unsafe-eval'; object-src 'self'",
   "background": {
-    "scripts": ["bundles/background.bundle.js"],
+    "scripts": [
+      "bundles/background.bundle.js"
+    ],
     "persistent": false
   },
-  "icons": { "48": "assets/icon48.png", "128": "assets/icon128.png" },
+  "icons": {
+    "48": "assets/icon48.png",
+    "128": "assets/icon128.png"
+  },
   "content_scripts": [
     {
-      "matches": ["http://localhost/*", "https://localhost/*"],
-      "js": ["bundles/content.bundle.js"]
+      "matches": [
+        "http://localhost/*",
+        "https://localhost/*"
+      ],
+      "js": [
+        "bundles/content.bundle.js"
+      ]
     }
   ],
-  "web_accessible_resources" : ["bundles/backend.bundle.js"],
-  "permissions": ["contextMenus", "tabs", "activeTab", "http://localhost/*", "https://localhost/*"]
-  
-}
+  "web_accessible_resources": [
+    "bundles/backend.bundle.js"
+  ],
+  "permissions": [
+    "contextMenus",
+    "tabs",
+    "activeTab",
+    "http://localhost/*",
+    "https://localhost/*"
+  ]
+}