added buttons to go back and forward in time

src/app/components/App.jsx

@@ -40,7 +40,8 @@ class App extends Component {
     };
 
     this.addActionToView = this.addActionToView.bind(this);
-    // this.toTheFuture = this.toTheFuture.bind(this);
+    this.toTheFuture = this.toTheFuture.bind(this);
+    this.toThePast = this.toThePast.bind(this);
   }
 
   componentDidMount() {
@@ -74,24 +75,42 @@ class App extends Component {
   }
 
   // function to travel to the FUTURE
-  // **** not being passed to any children yet
-  //   toTheFuture(e) {
-  //     if (this.state.action) {
-  //       for (let i = 0; i < data.length - 1; i += 1) {
-  //         // clicking next returns next piece of data
-  //         if (data[i].id === this.state.id) {
-  //           const { action, id, payload, state } = data[i + 1];
-  //           this.setState({action, id, payload, state});
-  //         }
-  //         // if we're at the last action stop there
-  //         // don't let user go any further
-  //         if (data[i].id === undefined) {
-  //           const { action, id, payload, state } = data[data.length -1 ];
-  //           this.setState({action, id, payload, state});
-  //         }
-  //     }
-  //   }
-  // }
+  toTheFuture(e) {
+    if (this.state.action) {
+      for (let i = 0; i < data.length - 1; i += 1) {
+        // clicking next returns next piece of data
+        if (data[i].id === this.state.id) {
+          const { action, id, payload, state } = data[i + 1];
+          this.setState({action, id, payload, state});
+        }
+        // if we're at the last action stop there
+        // don't let user go any further
+        if (data[i].id === undefined) {
+          const { action, id, payload, state } = data[data.length -1 ];
+          this.setState({action, id, payload, state});
+        }
+      }
+    }
+  }
+
+  // function to travel to the PAST
+  toThePast(e) {
+    if (this.state.action) {
+      for (let i = data.length - 1; i >= 0; i -= 1) {
+        // clicking next returns next piece of data
+        if (data[i].id === this.state.id) {
+          const { action, id, payload, state } = data[i - 1];
+          this.setState({action, id, payload, state});
+        }
+        // if we're at the last action stop there
+        // don't let user go any further
+        if (this.state.action === undefined) {
+          const { action, id, payload, state } = data[0];
+          this.setState({action, id, payload, state});
+        }
+      }
+    }
+  }
 
   render() {
     const {
@@ -102,8 +121,14 @@ class App extends Component {
         <GlobalStyle />
         <SplitPane
           left={
-            <Events data={data} addAction={this.addActionToView} />
-          }
+            (
+              <Events
+                data={data} 
+                addAction={this.addActionToView}
+                toTheFuture={this.toTheFuture}
+                toThePast={this.toThePast}
+              />
+            )}
           right={
             (
               <Details
@@ -117,6 +142,6 @@ class App extends Component {
       </>
     );
   }
-}
+  }
 
 export default App;

src/app/components/EventCards/EventCreator.jsx

@@ -5,7 +5,6 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx';
 export default function EventCreator(props) {
   // renders individual action
   const { action, id, addAction, actionTime } = props;
-  console.log(EventCard);
   return (
     <EventCard id={id} onClick={addAction}>
       &#x2630; {action}

src/app/components/EventCards/EventsDisplay.jsx

@@ -2,14 +2,10 @@ import React, { useContext, useState } from 'react';
 
 // components import
 import EventCreator from './EventCreator.jsx';
-import TimeTravel from './TimeTravel.jsx';
 
 // styled components import
 import { EventsWrapper } from '../../styles/Events.jsx';
 
-// data context import
-import { DataContext } from '../../index.js'
-
 export default function Events(props) {
   return (
     <EventsWrapper>
@@ -22,7 +18,6 @@ export default function Events(props) {
         />
       ))}
       {/* time travel doesn't work yet */}
-      <TimeTravel />
     </EventsWrapper>
   );
 }

src/app/components/EventCards/TimeTravel.jsx

@@ -1,10 +1,14 @@
 import React from 'react';
 
+// styled component
+import { TimeTravelContainer, EventTimeDiv } from '../../styles/Events.jsx';
+
 export default function TimeTavel(props) {
+  const { toTheFuture, toThePast } = props;
   return (
-    <div>
-      PREVIOUS
-      NEXT
-    </div>
+    <TimeTravelContainer>
+      <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>
+      <EventTimeDiv onClick={toTheFuture}>NEXT</EventTimeDiv>
+    </TimeTravelContainer>
   );
 }

src/app/container/Details.jsx

@@ -19,7 +19,7 @@ export default function Details(props) {
   // destructuring required info that's being passed down from App.jsx
   // passing these props onto children
   const {
-    action, id, payload, actionState,
+    action, id, actionState,
   } = props;
 
   return (
@@ -30,7 +30,7 @@ export default function Details(props) {
         {/* routing components and rendering them with props */}
         <Route
           path='/actions'
-          render={props => <ActionsDisplay {...props} action={action} payload={payload} />}
+          render={props => <ActionsDisplay {...props} action={action} />}
         />
         <Route
           path='/effects'

src/app/container/Events.jsx

@@ -3,6 +3,7 @@ import React, { useContext, useState, Component} from 'react';
 // components
 import EventsNav from '../components/EventCards/EventsNav.jsx';
 import EventsDisplay from '../components/EventCards/EventsDisplay.jsx'
+import TimeTravel from '../components/EventCards/TimeTravel.jsx';
 
 class Events extends Component {
   constructor(props) {
@@ -11,11 +12,17 @@ class Events extends Component {
   }
 
   render() {
-    const { addAction, data } = this.props;
+    const {
+      addAction,
+      data,
+      toTheFuture,
+      toThePast,
+    } = this.props;
     return (
       <>
         <EventsNav />
         <EventsDisplay data={data} addAction={addAction} />
+        <TimeTravel toTheFuture={toTheFuture} toThePast={toThePast} />
       </>
     );
   }

src/app/styles/Events.jsx

@@ -5,7 +5,7 @@ export const EventsWrapper = styled.div`
   /* margin: 17px 17px; */
   /* padding-top: 2%; */
   /* padding-bottom: 2%; */
-  height: 79%;
+  max-height: 300px;
   overflow: auto;
 `;
 
@@ -40,3 +40,10 @@ export const EventTimeDiv = styled.div`
   border-radius: 5px;
   /* border: 1px solid black; */
 `;
+
+export const TimeTravelContainer = styled.div`
+  border-top: 1px solid white;
+  padding-top: 5%;
+  display: flex;
+  justify-content: space-evenly;
+`;