added TravelContainer.tsx

Author: aquinojardim

src/app/containers/StateContainer.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  MemoryRouter as Router,
+  Route,
+  NavLink,
+  Switch,
+} from 'react-router-dom';
+import StateRoute from '../components/StateRoute.tsx';
+import DiffRoute from '../components/DiffRoute.tsx';
+
+// eslint-disable-next-line react/prop-types
+const StateContainer = ({ 
+  snapshot, 
+  hierarchy,
+  snapshots, 
+  viewIndex,
+}) => {
+  const [Text, setText] = useState('State');
+  return (
+    <Router>
+      <div className="state-container">
+        <div className="main-navbar-container">
+          <div className="main-navbar-text">{Text}</div>
+          <div className="main-navbar">
+            <NavLink
+              className="main-router-link"
+              activeClassName="is-active"
+              exact
+              to="/"
+            >
+              State
+            </NavLink>
+            <NavLink
+              className="main-router-link"
+              activeClassName="is-active"
+              to="/diff"
+            >
+              Diff
+            </NavLink>
+          </div>
+        </div>
+        <Switch>
+          <Route
+            path="/diff"
+            render={() => {
+              setText('Diff');
+              return <DiffRoute snapshot={snapshot} />;
+            }}
+          />
+          <Route
+            path="/"
+            render={() => {
+              setText('State');
+              return <StateRoute viewIndex={viewIndex} snapshot={snapshot} hierarchy={hierarchy} snapshots={snapshots}/>;
+            }}
+          />
+        </Switch>
+      </div>
+    </Router>
+  );
+};
+
+StateContainer.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+};
+
+export default StateContainer;

src/app/containers/TravelContainer.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import MainSlider from '../components/MainSlider.tsx';
+import Dropdown from '../components/Dropdown.tsx';
+import {
+  playForward, pause, startPlaying, moveForward, moveBackward, resetSlider,
+} from '../actions/actions.ts';
+import { useStoreContext } from '../store.tsx';
+
+const speeds = [
+  { value: 2000, label: '0.5x' },
+  { value: 1000, label: '1.0x' },
+  { value: 500, label: '2.0x' },
+];
+
+// start slider movement
+function play(speed, playing, dispatch, snapshotsLength, sliderIndex) {
+  if (playing) {
+    dispatch(pause());
+  } else {
+    let currentIndex = sliderIndex;
+    if (currentIndex === snapshotsLength - 1) {
+      // dispatch action to reset the slider
+      dispatch(resetSlider());
+      currentIndex = 0;
+    }
+    const intervalId = setInterval(() => {
+      if (currentIndex < snapshotsLength - 1) {
+        dispatch(playForward());
+        currentIndex += 1;
+      } else {
+        dispatch(pause());
+      }
+    }, speed);
+    dispatch(startPlaying(intervalId));
+  }
+}
+
+function TravelContainer({ snapshotsLength }) {
+  const [selectedSpeed, setSpeed] = useState(speeds[1]);
+  const [{ tabs, currentTab }, dispatch] = useStoreContext();
+  const { sliderIndex, playing } = tabs[currentTab];
+
+  return (
+    <div className="travel-container">
+      <button
+        className="play-button"
+        type="button"
+        onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
+      >
+        {playing ? 'Pause' : 'Play'}
+      </button>
+      <MainSlider snapshotsLength={snapshotsLength} sliderIndex={sliderIndex} dispatch={dispatch} />
+      <button className="backward-button" onClick={() => dispatch(moveBackward())} type="button">
+        {'<'}
+      </button>
+      <button className="forward-button" onClick={() => dispatch(moveForward())} type="button">
+        {'>'}
+      </button>
+      <Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />
+    </div>
+  );
+}
+
+TravelContainer.propTypes = {
+  snapshotsLength: PropTypes.number.isRequired,
+};
+
+export default TravelContainer;