pushes main slider back to start when snapshots list is emptied with Empty buttom

Author: chriswillsflannery

src/app/containers/ActionContainer.jsx

@@ -5,6 +5,13 @@ import Action from '../components/Action';
 import { emptySnapshots } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+const resetSlider = () => {
+  console.log('in reset slider');
+  const slider = document.querySelector('.rc-slider-handle');
+  console.log('my slider', slider);
+  slider.setAttribute('style', 'left: 0');
+};
+
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];
@@ -28,7 +35,15 @@ function ActionContainer() {
   return (
     <div className="action-container">
       <div className="action-component exclude">
-        <button className="empty-button" onClick={() => dispatch(emptySnapshots())} type="button">
+        <button
+          className="empty-button"
+          onClick={() => {
+            dispatch(emptySnapshots());
+            // set slider back to zero
+            resetSlider();
+          }}
+          type="button"
+        >
           Empty
         </button>
       </div>