finished times

Author: murphybrandon

src/app/components/App.jsx

@@ -45,6 +45,7 @@ class App extends Component {
  isPlaying: false,
  isRecording: false,
  isPlayingIndex: 0,
+ eventTimes: [],
  };
 
  this.portToExtension = null;
@@ -76,14 +77,20 @@ class App extends Component {
  id: this.state.data.length,
  };
 
+ // search field
  const { searchField } = this.state;
  const newDataActionType = newData.action.type.toLowerCase();
+ 
+ // get the date everytime an action fires and add it to state
+
+ const eventTime = Date.now();
 
  if (newDataActionType.includes(searchField.toLowerCase())) {
  this.setState(state => ({
  data: [...state.data, newData],
  isPlayingIndex: state.data.length,
  filteredData: [...state.filteredData, newData],
+ eventTimes: [...state.eventTimes, eventTime],
  }));
  } else {
  this.setState(state => ({
@@ -283,6 +290,7 @@ class App extends Component {
  isRecording,
  filteredData,
  searchField,
+ eventTimes,
  } = this.state;
 
  return (
@@ -299,6 +307,7 @@ class App extends Component {
  searchChange={this.searchChange}
  filteredData={filteredData}
  searchField={searchField}
+ eventTimes={eventTimes}
  />
  )}
  right={

src/app/components/EventCards/EventCreator.jsx

@@ -5,12 +5,32 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx';
 export default function EventCreator(props) {
  // renders individual action
  const {
- action, id, addAction, actionTime, selectedEvent,
+ action, id, addAction, actionTime, selectedEvent, index, eventTimes,
  } = props;
+
+ let displayTime;
+ let timeDifference;
+
+ if (id === 0) {
+ displayTime = '00: 00: 00';
+ } else {
+ timeDifference = eventTimes[id] - eventTimes[id - 1];
+ timeDifference = new Date(timeDifference);
+ 
+ let minute = timeDifference.getMinutes();
+ minute < 10 ? minute = '0' + minute : minute;
+ let second = timeDifference.getSeconds();
+ second < 10 ? second = '0' + second : second;
+ let millisecond = Math.floor(timeDifference.getMilliseconds() / 10);
+ millisecond < 10 ? millisecond = '0' + millisecond : millisecond;
+
+ displayTime = `${minute} : ${second} : ${millisecond}`;
+ }
+
  return (
  <EventCard id={id} onClick={addAction} selectedEvent={selectedEvent}>
  &#x2630;{action}
- <EventTimeDiv id={id} selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
+ <EventTimeDiv id={id} selectedEvent={selectedEvent}>{displayTime}</EventTimeDiv>
  </EventCard>
 
  );

src/app/components/EventCards/EventsDisplay.jsx

@@ -7,9 +7,11 @@ import EventCreator from './EventCreator.jsx';
 import { EventsWrapper } from '../../styles/Events.jsx';
 
 export default function Events(props) {
- const { data,
+ const { 
+ data,
  activeEventId,
  filteredData,
+ eventTimes,
  } = props;
  return (
  <EventsWrapper>
@@ -18,8 +20,10 @@ export default function Events(props) {
  selectedEvent={activeEventId === e.id ? 'true' : 'false'}
  action={e.action.type}
  key={i}
+ index={i}
  id={e.id}
  addAction={props.addAction}
+ eventTimes={eventTimes}
  />
  ))}
  </EventsWrapper>

src/app/container/Events.jsx

@@ -19,6 +19,7 @@ class Events extends Component {
  searchChange,
  filteredData,
  searchField,
+ eventTimes,
  } = this.props;
  return (
  <>
@@ -29,6 +30,7 @@ class Events extends Component {
  filteredData={filteredData}
  addAction={addAction}
  activeEventId={activeEventId}
+ eventTimes={eventTimes}
  />
  </>
  );