Finished time stamps

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={
@@ -326,5 +335,4 @@ class App extends Component {
     );
   }
 }
-
-export default App;
+export default App;

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}
         />
       </>
     );