fix slider not updating when jumping to a snapshot

Author: pinardo88

src/app/FrontendTypes.ts

@@ -249,7 +249,6 @@ export interface HandleProps {
 
 export interface MainSliderProps {
   className: string;
-  snapshotsLength: number;
   snapshots: any[];
 }
 

src/app/components/TimeTravel/VerticalSlider.tsx

@@ -29,20 +29,29 @@ const handle = (props: HandleProps): JSX.Element => {
 
 function VerticalSlider(props: MainSliderProps): JSX.Element {
   const dispatch = useDispatch();
-  const { snapshotsLength, snapshots } = props; // destructure props to get our total number of snapshots
+  const { snapshots} = props; // destructure props to get our total number of snapshots
   const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0.
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
 
-  // useEffect(() => {
-  //   if (currLocation) {
-  //     // if we have a 'currLocation'
-  //     //@ts-ignore
-  //     setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'
-  //   } else {
-  //     setSliderIndex(0); // just set the thumb position to the beginning
-  //   }
-  // }, [currLocation]); // if currLocation changes, rerun useEffect
+  useEffect(() => {
+    if (currLocation) {
+      // if we have a 'currLocation'
+      let correctedSliderIndex;
+
+      for (let i = 0; i<snapshots.length; i++){
+        //@ts-ignore -- ignores the errors on the next line
+        if (snapshots[i].props.index === currLocation.index){
+          correctedSliderIndex = i;
+        }
+      }
+      setSliderIndex(correctedSliderIndex)
+
+    } else {
+      setSliderIndex(0); // just set the thumb position to the beginning
+    }
+  }, [currLocation]); // if currLocation changes, rerun useEffect
+  
 
   return (
     <Slider
@@ -52,19 +61,13 @@ function VerticalSlider(props: MainSliderProps): JSX.Element {
       reverse = 'true'
       height = '100%'
       min={0} // index of our first snapshot
-      max={snapshotsLength - 1} // index of our last snapshot
+      max={snapshots.length - 1} // index of our last snapshot
       value={sliderIndex} // currently slider thumb position
       onChange={(index: any) => {
         // when the slider position changes
         setSliderIndex(index); // update the sliderIndex
         dispatch(changeSlider(snapshots[index].props.index));
       }}
-      // onChangeComplete={() => {
-      //   // after updating the sliderIndex
-      //   console.log("sliderIndex", sliderIndex)
-      //   dispatch(changeSlider(sliderIndex)); // updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex]
-      //   dispatch(pause()); // pauses playing and sets currentTab object'a intervalId to null
-      // }}
       handle={handle}
     />
   );

src/app/containers/ActionContainer.tsx

@@ -14,6 +14,7 @@ import VerticalSlider from '../components/TimeTravel/VerticalSlider';
   This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
 */
 
+
 // resetSlider locates the rc-slider elements on the document and resets it's style attributes
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
@@ -54,6 +55,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     children?: [];
     }
   */
+ 
 
   const displayArray = (obj: Obj): void => {
     if (
@@ -82,6 +84,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     if (obj.children) {
       // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
       obj.children.forEach((element): void => {
+        //recursive call
         displayArray(element);
       });
     }
@@ -129,6 +132,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
       const selected = index === viewIndex; // boolean on whether the current index is the same as the viewIndex
       const last = viewIndex === -1 && index === hierarchyArr.length - 1; // boolean on whether the view index is less than 0 and if the index is the same as the last snapshot's index value in hierarchyArr
       const isCurrIndex = index === currLocation.index;
+
       return (
         <Action
           key={`action${index}`}
@@ -242,11 +246,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             flexDirection: 'row',
             alignItems: 'flex-start',
           }}>
-             {/* <div className='slider' style={{
-              // height: '65vh',
-            }}>
-              <VerticalSlider className='main-slider' snapshotsLength={Object.keys(routes).length} />
-            </div> */}
             <div className='snapshots'>
               {/* Rendering of route description components */}
               {Object.keys(routes).map((route, i) => (
@@ -256,7 +255,7 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
                   height: `${routes[route].length * 4.5}vh`,
                   marginBottom: '30px'
                   }}>
-                <VerticalSlider className='main-slider' snapshotsLength={routes[route].length} snapshots={routes[route]}/>
+                <VerticalSlider className='main-slider' snapshots={routes[route]}/>
                 <RouteDescription key={`route${i}`} actions={routes[route]} />
                 </div>
               ))}