Front end

src/app/components/App.jsx

@@ -3,6 +3,7 @@ import { createGlobalStyle } from 'styled-components';
 
 // containers
 import SplitPane from '../container/SplitPane.jsx';
+import TimeSlider from '../container/TimeSlider.jsx';
 
 // left pane = events, right pane = details
 import Events from '../container/Events.jsx';
@@ -30,7 +31,6 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-
 class App extends Component {
   constructor(props) {
     super(props);
@@ -39,15 +39,19 @@ class App extends Component {
       data: [],
       isPlaying: false,
       isRecording: false,
+      isSearching: false,
+      isPlayingIndex: 0,
     };
+
     this.port = null;
-    this.isPlayingIndex = 0;
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
     this.toThePast = this.toThePast.bind(this);
     this.setIsPlaying = this.setIsPlaying.bind(this);
     this.setIsRecording = this.setIsRecording.bind(this);
     this.actionInPlay = this.actionInPlay.bind(this);
+    this.handleBarChange = this.handleBarChange.bind(this);
+    this.searchChange = this.searchChange.bind(this);
   }
 
   componentDidMount() {
@@ -71,10 +75,11 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
-    if (this.isPlayingIndex === this.state.data.length - 1) {
-      this.isPlayingIndex = 0;
+    if (this.state.isPlayingIndex === this.state.data.length - 1) {
+      this.state.isPlayingIndex = 0;
     }
 
+    console.log('isplaying')
     let { isPlaying } = this.state;
     isPlaying = !isPlaying;
     this.setState({ isPlaying });
@@ -121,6 +126,25 @@ class App extends Component {
     });
   }
 
+  // filter search bar results
+  // *** NOT FINISHED ***
+  searchChange(e) {
+    const { data } = this.state;
+    console.log(data);
+  }
+
+  // time travel bar change
+  handleBarChange(e) {
+    const { data } = this.state;
+    const { id, action, state } = data[e.target.value];
+
+    this.setState({
+      id,
+      action,
+      state,
+      isPlayingIndex: e.target.value,
+    });
+  }
 
   // function to travel to the FUTURE
   toTheFuture() {
@@ -141,6 +165,7 @@ class App extends Component {
   }
 
   render() {
+    console.log(this.state.isPlayingIndex);
     const {
       action,
       id,
@@ -163,10 +188,6 @@ class App extends Component {
                 addAction={this.addActionToView}
                 toTheFuture={this.toTheFuture}
                 toThePast={this.toThePast}
-                isPlaying={isPlaying}
-                isRecording={isRecording}
-                setIsPlaying={this.setIsPlaying}
-                setIsRecording={this.setIsRecording}
                 activeEventId={id}
               />
             )}
@@ -179,6 +200,17 @@ class App extends Component {
               />
             )}
         />
+        <TimeSlider
+          data={data}
+          toTheFuture={this.toTheFuture}
+          toThePast={this.toThePast}
+          isPlaying={isPlaying}
+          isPlayingIndex={this.state.isPlayingIndex}
+          isRecording={isRecording}
+          setIsPlaying={this.setIsPlaying}
+          setIsRecording={this.setIsRecording}
+          handleBarChange={this.handleBarChange}
+        />
       </>
     );
   }

src/app/components/DetailCards/DetailsNav.jsx

@@ -8,15 +8,10 @@ import { Buttons, Button, DetailsNavWrapper, Ul } from '../../styles/Nav.jsx';
 
 export default function RightNav(props) {
   return (
-    //make this nav bar with react router
-    //sync it so each active link displays appropriate div
-    //with info
-
-    //style pages so inputted information is styled correctly
     <>
       <DetailsNavWrapper>
         <Buttons>
-          <NavLink activeClassName='active' to='/actions'>
+          <NavLink activeClassName='active' to='/'>
             <Button>actions</Button>
           </NavLink>
           <NavLink activeClassName='active' to='/effects'>
@@ -28,5 +23,5 @@ export default function RightNav(props) {
         </Buttons>
       </DetailsNavWrapper>
     </>
-  )
+  );
 }

src/app/components/EventCards/EventCreator.jsx

@@ -9,9 +9,8 @@ export default function EventCreator(props) {
   } = props;
   return (
     <EventCard id={id} onClick={addAction} selectedEvent={selectedEvent}>
-      &#x2630;
-      {action}
-      <EventTimeDiv selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
+      &#x2630;{action}
+      <EventTimeDiv id={id} selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
     </EventCard>
 
   );

src/app/components/EventCards/FilterBar.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function FilterBar(props) {
+  const {
+    searchChange,
+  } = props;
+
+  return (
+    <input
+      type="text"
+      placeholder="filter"
+      onChange={searchChange}
+    />
+  );
+}

src/app/components/EventCards/TimeTravel.jsx

@@ -1,29 +1,21 @@
 import React from 'react';
 
 // styled component
-import { TimeTravelContainer, EventTimeDiv } from '../../styles/Events.jsx';
+import { PreviousNextWrapper, PrevNextButton } from '../../styles/Events.jsx';
 
 export default function TimeTavel(props) {
   const {
     toTheFuture,
     toThePast,
-    setIsRecording,
-    isRecording,
-    setIsPlaying,
-    isPlaying,
   } = props;
 
 
   return (
     <>
-      <TimeTravelContainer>
-        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</EventTimeDiv>
-        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'STOP' : 'PLAY' }</EventTimeDiv>
-      </TimeTravelContainer>
-      <TimeTravelContainer>
-        <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>
-        <EventTimeDiv onClick={toTheFuture}>NEXT</EventTimeDiv>
-      </TimeTravelContainer>
+      <PreviousNextWrapper>
+        <PrevNextButton onClick={toThePast}>PREVIOUS</PrevNextButton>
+        <PrevNextButton onClick={toTheFuture}>NEXT</PrevNextButton>
+      </PreviousNextWrapper>
     </>
   );
 }

src/app/container/Details.jsx

@@ -26,10 +26,10 @@ export default function Details(props) {
     <Router>
       <>
         <DetailsNav />
-
         {/* routing components and rendering them with props */}
         <Route
-          path='/actions'
+          exact
+          path='/'
           render={props => <ActionsDisplay {...props} action={action} />}
         />
         <Route

src/app/container/Events.jsx

@@ -18,11 +18,6 @@ class Events extends Component {
       data,
       toTheFuture,
       toThePast,
-      setIsPlaying,
-      isPlaying,
-      setIsRecording,
-      isRecording,
-      isPlayingIndex,
     } = this.props;
     return (
       <>
@@ -35,10 +30,6 @@ class Events extends Component {
         <TimeTravel
           toTheFuture={toTheFuture}
           toThePast={toThePast}
-          setIsRecording={setIsRecording}
-          isRecording={isRecording}
-          setIsPlaying={setIsPlaying}
-          isPlaying={isPlaying}
         />
       </>
     );

src/app/container/TimeSlider.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+// styled component
+
+import { TimeTravelContainer, EventTimeDiv } from '../../app/styles/Events.jsx';
+import { SliderWrapper, Button } from '../styles/TimeSlider.jsx'
+
+const TimeSlider = (props) => {
+  const {
+    toTheFuture,
+    toThePast,
+    setIsRecording,
+    isRecording,
+    setIsPlaying,
+    isPlaying,
+    isPlayingIndex,
+    data,
+    handleBarChange,
+  } = props;
+
+  return (
+    <>
+      <SliderWrapper>
+        <Button onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</Button>
+        <Button onClick={setIsPlaying}>{ isPlaying ? <text>||</text> : <text>&#9658;</text> }</Button>
+      <input type="range" min="0" max={data.length - 1} value={isPlayingIndex}
+      onChange={handleBarChange} />
+      </SliderWrapper>
+    </>
+  );
+};
+
+export default TimeSlider;