Merge pull request #25 from murphybrandon/front-end

Front end

Author: victorvrv

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;