From b85b199d133a1f191c8d42daaa7c5ab284bb986a Mon Sep 17 00:00:00 2001 From: brandon <41245867+murphybrandon@users.noreply.github.com> Date: Fri, 1 Mar 2019 20:13:22 -0500 Subject: [PATCH 1/5] added buttons to go back and forward in time --- src/app/components/App.jsx | 71 +++++++++++++------ .../DetailCards/Actions/ActionsDisplay.jsx | 4 +- .../components/EventCards/EventCreator.jsx | 1 - .../components/EventCards/EventsDisplay.jsx | 5 -- src/app/components/EventCards/TimeTravel.jsx | 12 ++-- src/app/container/Details.jsx | 4 +- src/app/container/Events.jsx | 11 ++- src/app/styles/Events.jsx | 9 ++- 8 files changed, 77 insertions(+), 40 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 101afb6..46ba406 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -43,7 +43,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() { @@ -71,36 +72,60 @@ 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 { - action, id, payload, state, data + action, id, payload, state, data, } = this.state; return ( <> - } + ( + + )} right={ (
); } -} + } export default App; \ No newline at end of file diff --git a/src/app/components/DetailCards/Actions/ActionsDisplay.jsx b/src/app/components/DetailCards/Actions/ActionsDisplay.jsx index 37df108..e3a4f4d 100644 --- a/src/app/components/DetailCards/Actions/ActionsDisplay.jsx +++ b/src/app/components/DetailCards/Actions/ActionsDisplay.jsx @@ -6,10 +6,10 @@ export default function Actions(props) { return ( <> action: - {action.type || 'select an event'} + {(action && action.type) || 'select an event'}

payload: - {action.payload || 'select an event'} + {(action && action.payload) || 'select an event'} ); } diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx index b673d83..39da857 100644 --- a/src/app/components/EventCards/EventCreator.jsx +++ b/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 ( ☰ {action} diff --git a/src/app/components/EventCards/EventsDisplay.jsx b/src/app/components/EventCards/EventsDisplay.jsx index 3338e84..0e7e180 100644 --- a/src/app/components/EventCards/EventsDisplay.jsx +++ b/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 ( @@ -22,7 +18,6 @@ export default function Events(props) { /> ))} {/* time travel doesn't work yet */} - ); } diff --git a/src/app/components/EventCards/TimeTravel.jsx b/src/app/components/EventCards/TimeTravel.jsx index ea85ba0..ddc5b9e 100644 --- a/src/app/components/EventCards/TimeTravel.jsx +++ b/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 ( -
- PREVIOUS - NEXT -
+ + PREVIOUS + NEXT + ); } diff --git a/src/app/container/Details.jsx b/src/app/container/Details.jsx index 0e1bd64..28800bb 100644 --- a/src/app/container/Details.jsx +++ b/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 */} } + render={props => } /> - + + ); } diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx index cc7600b..db4ef63 100644 --- a/src/app/styles/Events.jsx +++ b/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; +`; From 365f498f82bf8e58aad529c12120461866036bce Mon Sep 17 00:00:00 2001 From: brandon <41245867+murphybrandon@users.noreply.github.com> Date: Sat, 2 Mar 2019 09:31:49 -0500 Subject: [PATCH 2/5] added buttons for user to pause/record && play/stop --- src/app/components/App.jsx | 38 ++++++++++++++++++-- src/app/components/EventCards/TimeTravel.jsx | 25 ++++++++++--- src/app/container/Events.jsx | 18 ++++++++-- src/app/styles/Events.jsx | 14 ++------ 4 files changed, 75 insertions(+), 20 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 2699c6b..188990a 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -37,11 +37,15 @@ class App extends Component { this.state = { data: [], + isPlaying: true, + isRecording: true, }; 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); } componentDidMount() { @@ -61,6 +65,22 @@ class App extends Component { }); } + // functionality to change 'play' button to 'stop' + setIsPlaying() { + console.log('setIsPlaying:', this.state.isPlaying) + let { isPlaying } = this.state; + isPlaying = !isPlaying; + this.setState({ isPlaying }); + } + + // functionality to change 'record' button to 'pause' + setIsRecording() { + console.log('setIsRecording:', this.state.isRecording) + this.setState(state => ({ + isRecording: !state.isRecording, + })); + } + // function to select an event from the data // and set state with all required info addActionToView(e) { @@ -74,6 +94,7 @@ class App extends Component { }); } + // function to travel to the FUTURE toTheFuture(e) { if (this.state.action) { @@ -114,8 +135,17 @@ class App extends Component { render() { const { - action, id, payload, state, data, + action, + id, + payload, + state, + data, + setIsPlaying, + isPlaying, + setIsRecording, + isRecording, } = this.state; + return ( <> @@ -127,6 +157,10 @@ class App extends Component { addAction={this.addActionToView} toTheFuture={this.toTheFuture} toThePast={this.toThePast} + isPlaying={isPlaying} + isRecording={isRecording} + setIsPlaying={this.setIsPlaying} + setIsRecording={this.setIsRecording} /> )} right={ @@ -142,6 +176,6 @@ class App extends Component { ); } - } +} export default App; diff --git a/src/app/components/EventCards/TimeTravel.jsx b/src/app/components/EventCards/TimeTravel.jsx index ddc5b9e..9980441 100644 --- a/src/app/components/EventCards/TimeTravel.jsx +++ b/src/app/components/EventCards/TimeTravel.jsx @@ -4,11 +4,26 @@ import React from 'react'; import { TimeTravelContainer, EventTimeDiv } from '../../styles/Events.jsx'; export default function TimeTavel(props) { - const { toTheFuture, toThePast } = props; + const { + toTheFuture, + toThePast, + setIsRecording, + isRecording, + setIsPlaying, + isPlaying, + } = props; + + return ( - - PREVIOUS - NEXT - + <> + + {isRecording ? 'RECORD' : 'PAUSE'} + {isPlaying ? 'PLAY' : 'STOP' } + + + PREVIOUS + NEXT + + ); } diff --git a/src/app/container/Events.jsx b/src/app/container/Events.jsx index acd8e60..d5cdeeb 100644 --- a/src/app/container/Events.jsx +++ b/src/app/container/Events.jsx @@ -17,12 +17,26 @@ class Events extends Component { data, toTheFuture, toThePast, + setIsPlaying, + isPlaying, + setIsRecording, + isRecording, } = this.props; return ( <> - - + + ); } diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx index db4ef63..9ed2e31 100644 --- a/src/app/styles/Events.jsx +++ b/src/app/styles/Events.jsx @@ -2,15 +2,12 @@ import styled from 'styled-components'; // formats the events display export const EventsWrapper = styled.div` - /* margin: 17px 17px; */ - /* padding-top: 2%; */ - /* padding-bottom: 2%; */ - max-height: 300px; + min-height: 100px; + max-height: 200px; overflow: auto; + border-bottom: 1px solid white; `; - - // events actions bar export const EventCard = styled.div` display: flex; @@ -30,19 +27,14 @@ export const EventCard = styled.div` `; export const EventTimeDiv = styled.div` - /* height: 15px; */ width: 25%; text-align: center; background-color: #484C54; - /* margin-bottom: 2%; */ color: #BCBCBB; - /* padding: 1%; */ 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; From a262d8a587711ce3c40fa29e55f1cb5104b0393b Mon Sep 17 00:00:00 2001 From: brandon <41245867+murphybrandon@users.noreply.github.com> Date: Sat, 2 Mar 2019 15:13:32 -0500 Subject: [PATCH 3/5] changed site title, edited styles, removed state.payload for victor's action implementation --- src/app/components/App.jsx | 4 ++-- src/app/index.html | 2 +- src/app/styles/Events.jsx | 7 ------- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index db64dfe..349a9ae 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -87,10 +87,10 @@ class App extends Component { const { data } = this.state; const actionToView = data.filter(action => e.target.id === String(action.id)); const { - action, id, payload, state, + action, id, state, } = actionToView[0]; this.setState({ - action, id, payload, state, + action, id, state, }); } diff --git a/src/app/index.html b/src/app/index.html index 1ea0a76..24eadc2 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -2,7 +2,7 @@ - styleish + React Rewind diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx index fc36d00..9ed2e31 100644 --- a/src/app/styles/Events.jsx +++ b/src/app/styles/Events.jsx @@ -39,10 +39,3 @@ export const TimeTravelContainer = styled.div` display: flex; justify-content: space-evenly; `; - -export const TimeTravelContainer = styled.div` - border-top: 1px solid white; - padding-top: 5%; - display: flex; - justify-content: space-evenly; -`; From 4f214936060c494e7b8f847686271ef4d034c5f5 Mon Sep 17 00:00:00 2001 From: brandon <41245867+murphybrandon@users.noreply.github.com> Date: Mon, 4 Mar 2019 11:38:53 -0500 Subject: [PATCH 4/5] added functionality for play through of events, added highlighting for 'active' events --- src/app/components/App.jsx | 38 +++++++++++++++---- .../components/EventCards/EventCreator.jsx | 11 ++++-- .../components/EventCards/EventsDisplay.jsx | 5 ++- src/app/components/EventCards/TimeTravel.jsx | 4 +- src/app/container/Events.jsx | 3 ++ src/app/styles/Events.jsx | 9 +++-- src/app/styles/Nav.jsx | 2 +- 7 files changed, 53 insertions(+), 19 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 40a9c2d..e3160dd 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -37,16 +37,17 @@ class App extends Component { this.state = { data: [], - isPlaying: true, - isRecording: true, + isPlaying: false, + isRecording: false, }; - 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); } componentDidMount() { @@ -70,19 +71,43 @@ class App extends Component { // functionality to change 'play' button to 'stop' setIsPlaying() { - console.log('setIsPlaying:', this.state.isPlaying) + if (this.isPlayingIndex === 8) { + this.isPlayingIndex = 0; + } + let { isPlaying } = this.state; isPlaying = !isPlaying; this.setState({ isPlaying }); + + if (isPlaying) { + this.actionInPlay(); + } } // functionality to change 'record' button to 'pause' setIsRecording() { + console.log('setIsRecording:', this.state.isRecording) this.setState(state => ({ isRecording: !state.isRecording, })); } + actionInPlay() { + this.isPlayingIndex++; + + const { id, action, state } = this.state.data[this.isPlayingIndex]; + setTimeout(() => { + this.setState((prev, props) => { + return { ...prev, id, action, state } + }); + if (this.state.isPlaying && this.isPlayingIndex < this.state.data.length - 1) { + this.actionInPlay(); + } else { + this.setState({ isPlaying: false }); + } + }, 1000); + } + // function to select an event from the data // and set state with all required info addActionToView(e) { @@ -119,7 +144,6 @@ class App extends Component { const { action, id, - payload, state, data, setIsPlaying, @@ -135,7 +159,7 @@ class App extends Component { left={ ( )} right={ @@ -150,7 +175,6 @@ class App extends Component {
)} diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx index 39da857..3ea8355 100644 --- a/src/app/components/EventCards/EventCreator.jsx +++ b/src/app/components/EventCards/EventCreator.jsx @@ -4,11 +4,14 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx'; export default function EventCreator(props) { // renders individual action - const { action, id, addAction, actionTime } = props; + const { + action, id, addAction, actionTime, selectedEvent, + } = props; return ( - - ☰ {action} - {actionTime || '00:00:01'} + + ☰ + {action} + {actionTime || '00:00:01'} ); diff --git a/src/app/components/EventCards/EventsDisplay.jsx b/src/app/components/EventCards/EventsDisplay.jsx index 0e7e180..71e0a1c 100644 --- a/src/app/components/EventCards/EventsDisplay.jsx +++ b/src/app/components/EventCards/EventsDisplay.jsx @@ -7,17 +7,18 @@ import EventCreator from './EventCreator.jsx'; import { EventsWrapper } from '../../styles/Events.jsx'; export default function Events(props) { + const { data, activeEventId } = props; return ( - {props.data.map((e, i) => ( + {data.map((e, i) => ( ))} - {/* time travel doesn't work yet */} ); } diff --git a/src/app/components/EventCards/TimeTravel.jsx b/src/app/components/EventCards/TimeTravel.jsx index 9980441..6fae855 100644 --- a/src/app/components/EventCards/TimeTravel.jsx +++ b/src/app/components/EventCards/TimeTravel.jsx @@ -17,8 +17,8 @@ export default function TimeTavel(props) { return ( <> - {isRecording ? 'RECORD' : 'PAUSE'} - {isPlaying ? 'PLAY' : 'STOP' } + {isRecording ? 'PAUSE' : 'RECORD'} + {isPlaying ? 'STOP' : 'PLAY' } PREVIOUS diff --git a/src/app/container/Events.jsx b/src/app/container/Events.jsx index d5cdeeb..391b1d6 100644 --- a/src/app/container/Events.jsx +++ b/src/app/container/Events.jsx @@ -13,6 +13,7 @@ class Events extends Component { render() { const { + activeEventId, addAction, data, toTheFuture, @@ -21,6 +22,7 @@ class Events extends Component { isPlaying, setIsRecording, isRecording, + isPlayingIndex, } = this.props; return ( <> @@ -28,6 +30,7 @@ class Events extends Component { props.selectedEvent === 'false' ? 'none' : "#484C54"}; display: flex; justify-content: space-between; align-items: center; @@ -21,16 +22,18 @@ export const EventCard = styled.div` cursor: pointer; &:hover { - color: #4F5A65; + color: ${props => props.selectedEvent === 'false' ? '#4F5A65' : "white"}; border-bottom: 1px solid #4F5A65; } `; + + export const EventTimeDiv = styled.div` width: 25%; text-align: center; - background-color: #484C54; - color: #BCBCBB; + background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"}; + color: ${props => props.selectedEvent === 'false' ? 'white' : "white"}; border-radius: 5px; `; diff --git a/src/app/styles/Nav.jsx b/src/app/styles/Nav.jsx index 1450883..646c422 100644 --- a/src/app/styles/Nav.jsx +++ b/src/app/styles/Nav.jsx @@ -41,7 +41,7 @@ export const Buttons = styled.div` &.active { color: white; background-color: #4F5A65; - /* border-bottom: 3px solid white; */ + /* border-bottom: 3px solid hotpink; */ } } From b248bd3091ae540ff3c756e1c1aa843f80689022 Mon Sep 17 00:00:00 2001 From: brandon <41245867+murphybrandon@users.noreply.github.com> Date: Mon, 4 Mar 2019 11:55:48 -0500 Subject: [PATCH 5/5] port = null && made length comparison for setIsPlay function dynamic --- src/app/components/App.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index e3160dd..4d23775 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -40,7 +40,7 @@ class App extends Component { isPlaying: false, isRecording: false, }; - + this.port = null; this.isPlayingIndex = 0; this.addActionToView = this.addActionToView.bind(this); this.toTheFuture = this.toTheFuture.bind(this); @@ -71,7 +71,7 @@ class App extends Component { // functionality to change 'play' button to 'stop' setIsPlaying() { - if (this.isPlayingIndex === 8) { + if (this.isPlayingIndex === this.state.data.length - 1) { this.isPlayingIndex = 0; }