Added Delete bSeries button to Comparison Bargraph

Author: DennisLpz

src/app/actions/actions.ts

@@ -5,7 +5,9 @@ export const save = (tabsObj) => ({
   type: types.SAVE,
   payload: tabsObj,
 });
-
+export const deleteSeries = () =>({
+  type: types.DELETE_SERIES,
+})
 export const toggleMode = (mode) => ({
   type: types.TOGGLE_MODE,
   payload: mode,

src/app/components/BarGraphComparison.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useEffect, useForceUpdate } from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -19,7 +19,8 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
-// import { save } from '../actions/actions';
+import { deleteSeries } from '../actions/actions';
+
 /* TYPESCRIPT */
 interface data {
   snapshotId?: string;
@@ -192,6 +193,19 @@ const BarGraphComparison = (props) => {
     });
     return data.barStack;
   }
+  const animateButton = function (e) {
+    e.preventDefault;
+    e.target.classList.add('animate');
+    e.target.innerHTML = 'Deleted!';
+    setTimeout(function () {
+      e.target.innerHTML = 'Clear Series';
+      e.target.classList.remove('animate');
+    }, 1000);
+  };
+  const classname = document.getElementsByClassName('delete-button');
+  for (let i = 0; i < classname.length; i++) {
+    classname[i].addEventListener('click', animateButton, false);
+  }
   //console.log('set x on current bar', setXpointsCurrentTab());
   return (
     <div>
@@ -201,7 +215,15 @@ const BarGraphComparison = (props) => {
           Snapshot ID: {currentIndex + 1}{' '}
         </div>
 
-        <div className='dropdown-and-save-series-container'>
+        <div className='dropdown-and-delete-series-container'>
+          <button
+            className='delete-button'
+            onClick={(e) => {
+              dispatch(deleteSeries());
+            }}
+          >
+            Clear Series
+          </button>
           <FormControl variant='outlined' className={classes.formControl}>
             <Select
               style={{ color: 'white' }}

src/app/constants/actionTypes.ts

@@ -16,3 +16,4 @@ export const SLIDER_ZERO = 'SLIDER_ZERO';
 export const ON_HOVER = 'ON_HOVER';
 export const ON_HOVER_EXIT = 'ON_HOVER_EXIT';
 export const SAVE = 'SAVE';
+export const DELETE_SERIES = 'DELETE_SERIES';

src/app/reducers/mainReducer.js

@@ -29,14 +29,32 @@ export default (state, action) =>
         }
       }
     };
- 
+
     switch (action.type) {
       case types.SAVE: {
         const data = JSON.stringify(action.payload);
         localStorage.setItem(`${action.payload.currentTab}`, data);
         break;
       }
+      case types.DELETE_SERIES: {
+        //localStorage.deleteSeries
+        console.log('we are in the delete series reducer');
+        const allStorage = () => {
+          const keys = Object.keys(localStorage);
+          let i = keys.length;
+          while (i--) {
+            localStorage.removeItem(keys[i]);
+          }
+          //return values;
+        };
+        allStorage();
 
+        Object.keys(tabs).forEach((tab) => {
+          tabs[tab] = {
+            ...tabs[tab],
+          };
+        });
+      }
       case types.ON_HOVER_EXIT: {
         port.postMessage({
           action: 'onHoverExit',

src/app/styles/components/_buttons.scss

@@ -19,10 +19,31 @@
   position: absolute;
   right: 2.5rem;
 
-   &.animate {
+  &.animate {
     background: rgb(41, 164, 41);
   }
+}
+.delete-button {
+  padding: 3px;
+  outline: transparent;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  line-height: 1.5em;
+  font: 300 14px 'Roboto', sans-serif;
+  font-size: $button-text-size;
+  width: 120px;
+  background: $red-color-gradient;
+  height: 30px;
 
+  &.animate {
+    background: rgb(41, 164, 41);
+  }
 }
 
 .empty-button {
@@ -253,7 +274,7 @@
 .snapshotId-header {
   font-size: 1rem;
 }
-.dropdown-and-save-series-container {
+.dropdown-and-delete-series-container {
   display: flex;
   align-items: center;
 }