initial CarEventReenactment

src/components/AppDrawer/index.jsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import Obstruction from 'obstruction';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import Drawer from '@material-ui/core/Drawer';
 
 import DeviceList from '../Dashboard/DeviceList';
+import CarEventReenactment from '../CarEventReenactment';
 
 import { selectDevice } from '../../actions';
 
@@ -33,6 +34,11 @@ const AppDrawer = ({
     toggleDrawerOff();
   }, [dispatch, toggleDrawerOff]);
 
+  const location = useLocation();
+  const currentPage = location.pathname;
+
+  const isReplayPage = currentPage.split('/').length === 4 ? true : false;
+
   return (
     <Drawer
       open={isPermanent || drawerIsOpen}
@@ -48,10 +54,15 @@ const AppDrawer = ({
               <span className="text-xl font-extrabold">connect</span>
             </Link>
           )}
-        <DeviceList
-          selectedDevice={selectedDongleId}
-          handleDeviceSelected={handleDeviceSelected}
-        />
+        {!isReplayPage && (
+          <DeviceList
+            selectedDevice={selectedDongleId}
+            handleDeviceSelected={handleDeviceSelected}
+          />
+        )}
+        {isReplayPage && (
+          <CarEventReenactment />
+        )}
       </div>
     </Drawer>
   );

src/components/AppHeader/index.jsx

@@ -127,10 +127,14 @@ const AppHeader = ({
             </a>
           </div>
           <div className="flex order-4 w-full justify-center sm:order-none sm:w-auto">
-            {Boolean(!primeNav && !annotating && dongleId) && <TimeFilter />}
-            <div className={classes.toggleDashboardView} onClick={toggleDashboardView}>
-                {showRouteVisualizer ? 'View List' : 'View Map'}
-            </div>
+            {Boolean(!primeNav && !annotating && dongleId) && (
+              <>
+                <TimeFilter />
+                <div className={classes.toggleDashboardView} onClick={toggleDashboardView}>
+                  {showRouteVisualizer ? 'View List' : 'View Map'}
+                </div>
+              </>
+            )}
           </div>
           <div className="flex flex-row gap-2">
             <Suspense><PWAIcon /></Suspense>

src/components/CarEventReenactment/index.jsx

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import Obstruction from 'obstruction';
+import { withStyles } from '@material-ui/core';
+
+import theme from '../../theme';
+import Colors from '../../colors';
+import ResizeHandler from '../ResizeHandler';
+
+const styles = () => ({
+
+});
+
+const initialState = {
+  windowWidth: window.innerWidth,
+};
+
+
+class RouteVisualizer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialState,
+    };
+
+    this.onResize = this.onResize.bind(this);
+  }
+
+  componentDidMount() {
+
+  }
+
+  componentDidUpdate(prevProps) {
+
+  }
+
+  componentWillUnmount() {
+    this.setState({ ...initialState });
+  }
+
+
+  onResize(windowWidth) {
+    this.setState({ windowWidth });
+  }
+
+
+  render() {
+    const { classes } = this.props;
+    const {  } = this.state;
+
+    return (
+      <div
+        ref={this.onContainerRef}
+        className={classes.carEventReenactmentContainer}
+        style={{ height: '100%', backgroundColor: Colors.black, display: 'flex', flexDirection: 'column'}}
+      >
+
+      </div>
+    );
+  }
+}
+
+const stateToProps = Obstruction({
+  device: 'device',
+  dongleId: 'dongleId',
+  routes: 'routes',
+});
+
+export default connect(stateToProps)(withStyles(styles)(RouteVisualizer));