Merge for launch (#95)

* fixed icons size

* fixed icons size (#86)

* created an InitialDisplay component to render on CDM

* Removed console.log - preparing for merge to master

* Removed console.log and restyled codebase to airbnb standards

* removed styles.css file

* updated manifest and icons

* Update README

Author: victorvrv

README.md

@@ -25,21 +25,18 @@
 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
 
 ### Prerequisites
-Your application must be using the hook `useReducer` for actions to be recorded.
+You must use an unminified version of React. Also, your application must be using the hook `useReducer` for actions to be recorded.
 
 ### Installing
 React Rewind will soon be available as a Chrome extension through the Google Chrome Web Store.
 
 To install locally, setup instructions are as follows:
 
-1. `git clone https://github.com/reactrewind/react-rewind.git`
-2. `cd react-rewind`
-3. `npm run install_dep`
-4. `npm run build`
-5. Visit the URL `chrome://extensions/`
-6. Click Load Unpacked button and select the folder `react-rewind/src/browser/chrome`
-7. On your application page, open the Chrome Developer tools and select `React Rewind` from the tool bar
-8. Click Record and begin interacting with your application
+1. `git clone --single-branch --branch beta-release https://github.com/reactrewind/react-rewind.git`
+2. Visit the URL `chrome://extensions/`
+3. Click Load Unpacked button and select the folder `react-rewind/chrome`
+4. On your application page, open the Chrome Developer (Ctrl + Shift + J / Mac: Cmd + Option + I) tools and select `React Rewind` from the tool bar
+5. Click Record and begin interacting with your application
 
 
 As you interact with your application, actions will populate the events panel. Click on these actions to view more details about them, such as the action object that was dispatched, the effects or state difference, and the whole state of the application after the dispatch. The time slider panel allows you to rewind, fast forward, and play through all recorded actions.

src/app/components/App.jsx

@@ -83,7 +83,7 @@ class App extends Component {
         // If the user paused the recording session, we return
         const { isRecording } = this.state;
         if (!isRecording) return;
-        console.log('got new data');
+
         const newData = {
           action: msg.action,
           state: msg.state,
@@ -104,11 +104,13 @@ class App extends Component {
             isPlayingIndex: state.data.length,
             filteredData: [...state.filteredData, newData],
             eventTimes: [...state.eventTimes, eventTime],
+            ...newData,
           }));
         } else {
           this.setState(state => ({
             data: [...state.data, newData],
             isPlayingIndex: state.data.length,
+            ...newData,
           }));
         }
       });

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactJson from 'react-json-view';
 
-//styled components
+// styled components
 import { DetailsWrapper } from '../../../styles/Details.jsx';
 
-export default function Actions(props) {
+export default function Actions({ action, setIsClicked }) {
   // renders action information
-  const { action } = props;
+  setIsClicked(true);
   return (
     <DetailsWrapper>
       {<ReactJson
-        theme={'threezerotwofour'}
+        theme="threezerotwofour"
         style={{ backgroundColor: 'transparent' }}
         displayDataTypes={false}
         src={action}

src/app/components/DetailCards/DetailsNav.jsx

@@ -9,13 +9,13 @@ export default function RightNav(props) {
     <>
       <DetailsNavWrapper>
         <Buttons>
-          <NavLink exact activeClassName='active' to='/'>
+          <NavLink exact activeClassName="active" to="/">
             <Button>actions</Button>
           </NavLink>
-          <NavLink activeClassName='active' to='/effects'>
+          <NavLink activeClassName="active" to="/effects">
             <Button>effects</Button>
           </NavLink>
-          <NavLink activeClassName='active' to='/state'>
+          <NavLink activeClassName="active" to="/state">
             <Button>state</Button>
           </NavLink>
         </Buttons>

src/app/components/DetailCards/Effects/EffectsDisplay.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactJson from 'react-json-view';
 import { DetailsWrapper } from '../../../styles/Details.jsx';
-// functionality
+
 // gets difference from previous state to new state
 import stateDifference from '../../stateDifference.jsx';
 
 
 export default function Effects(props) {
-  const { prevState, actionState } = props;
+  const { prevState, actionState, setIsClicked } = props;
   const differenceOfPrevAndNextState = stateDifference(prevState, actionState);
-
+  setIsClicked(true);
   return (
     <DetailsWrapper>
       <ReactJson

src/app/components/DetailCards/InitialDetailCard/InitialDisplay.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactJson from 'react-json-view';
+
+// styled components
+import { DetailsWrapper } from '../../../styles/Details.jsx';
+
+export default function InitialDisplay({ action }) {
+  // renders action information
+  return (
+    <DetailsWrapper>
+      {<ReactJson
+        theme="threezerotwofour"
+        style={{ backgroundColor: 'transparent' }}
+        displayDataTypes={false}
+        src={action}
+      /> || 'select an event'}
+    </DetailsWrapper>
+  );
+}

src/app/components/DetailCards/State/StateCard.jsx

@@ -8,7 +8,7 @@ export default function EffectCard(props) {
   return (
     <div>
       <ReactJson
-        theme={'threezerotwofour'}
+        theme="threezerotwofour"
         style={{ backgroundColor: 'transparent', height: '-webkit-fill-available' }}
         displayDataTypes={false}
         src={actionState}

src/app/components/DetailCards/State/StateDisplay.jsx

@@ -4,12 +4,12 @@ import StateCard from './StateCard.jsx';
 // styled component
 import { DetailsWrapper } from '../../../styles/Details.jsx';
 
-export default function State(props) {
+export default function State({ actionState, setIsClicked }) {
   // stringifying data to pass down to StateCard to display
-  const { actionState } = props;
+  setIsClicked(true);
   return (
     <DetailsWrapper>
-        {<StateCard actionState={actionState} />}
+      {<StateCard actionState={actionState} />}
     </DetailsWrapper>
   );
 }

src/app/components/EventCards/EventCreator.jsx

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

src/app/components/EventCards/EventsDisplay.jsx

@@ -7,12 +7,12 @@ import EventCreator from './EventCreator.jsx';
 import { EventsWrapper } from '../../styles/Events.jsx';
 
 export default function Events(props) {
-  const { 
-    data,
+  const {
     activeEventId,
     filteredData,
     eventTimes,
   } = props;
+
   return (
     <EventsWrapper>
       {filteredData.map((e, i) => (

src/app/components/EventCards/FilterBar.jsx

@@ -6,7 +6,8 @@ import { FilterWrapper } from '../../styles/FilterBar.jsx';
 
 export default function FilterBar(props) {
   const {
-    searchChange
+    searchChange,
+    searchField,
   } = props;
 
   return (
@@ -16,7 +17,7 @@ export default function FilterBar(props) {
           type="text"
           placeholder="filter actions by name..."
           onChange={searchChange}
-          value={props.searchField}
+          value={searchField}
         />
       </FilterWrapper>
     </>

src/app/components/stateDifference.jsx

@@ -1,39 +1,34 @@
-
 function stateDifference(old, curr) {
+  if (typeof old !== typeof curr) return curr;
 
-  if(typeof(old) === "string" && typeof(curr) === "string") {
-    if(old === curr) return false;
+  if (typeof old === typeof curr && !Array.isArray(old) && typeof old !== 'object') {
+    if (old === curr) return undefined;
     return curr;
   }
-  else if(typeof(old) === "number" && typeof(curr) === "number") {
-      if( old === curr) return false;
-      return curr;
-  }
-  else if(typeof(old) !== typeof(curr)) {
-    return curr;
-  }
-  else if(Array.isArray(old) && Array.isArray(curr)) {
-    let newArr = [];
-    for ( let i = 0; i < curr.length; i++){
-      if(!old.includes(curr[i])){
-        let result = stateDifference(old[i], curr[i])
-        if (result) {
-          newArr.push(result)
+
+  if (Array.isArray(old) && Array.isArray(curr)) {
+    const newArr = [];
+    for (let i = 0; i < curr.length; i++) {
+      if (!old.includes(curr[i])) {
+        const result = stateDifference(old[i], curr[i]);
+        if (result !== undefined) {
+          newArr.push(result);
         }
       }
-    } 
-    return newArr.length > 0 ? newArr : false;
+    }
+
+    return newArr.length > 0 ? newArr : undefined;
   }
-  else if(typeof(old) === "object" && typeof(curr) === "object") {
-    let newObj = {}
-    for ( let prop in curr) {
-      let result = stateDifference(old[prop], curr[prop])
-      if (result) {
-        newObj[prop] = result
-      }
+
+  const newObj = {};
+  for (let prop in curr) {
+    const result = stateDifference(old[prop], curr[prop])
+    if (result !== undefined) {
+      newObj[prop] = result;
     }
-    return Object.keys(newObj).length === 0 ? false : newObj
   }
+
+  return Object.keys(newObj).length === 0 ? undefined : newObj;
 }
 
-export default stateDifference;
+export default stateDifference;

src/app/container/Details.jsx

@@ -1,18 +1,18 @@
-import React, { Component } from 'react';
-
-const ReactRouter = require('react-router-dom');
-
-const Router = ReactRouter.BrowserRouter;
-const { Route } = ReactRouter;
+import React, { useState } from 'react';
 
 // details nav component import
 import DetailsNav from '../components/DetailCards/DetailsNav.jsx';
 
 // component imports for react router
-import ActionsDisplay from '../components/DetailCards/Actions/ActionsDisplay.jsx'
-import EffectsDisplay from '../components/DetailCards/Effects/EffectsDisplay.jsx'
-import StateDisplay from '../components/DetailCards/State/StateDisplay.jsx'
+import ActionsDisplay from '../components/DetailCards/Actions/ActionsDisplay.jsx';
+import EffectsDisplay from '../components/DetailCards/Effects/EffectsDisplay.jsx';
+import StateDisplay from '../components/DetailCards/State/StateDisplay.jsx';
+import InitalDisplay from '../components/DetailCards/InitialDetailCard/InitialDisplay.jsx';
 
+const ReactRouter = require('react-router-dom');
+
+const Router = ReactRouter.BrowserRouter;
+const { Route } = ReactRouter;
 
 export default function Details(props) {
   // destructuring required info that's being passed down from App.jsx
@@ -21,24 +21,45 @@ export default function Details(props) {
     action, prevState, actionState,
   } = props;
 
-  
+  const [isClicked, setIsClicked] = useState(false);
+
   return (
     <Router>
       <>
         <DetailsNav />
+        {isClicked === false ? <InitalDisplay action={action} /> : null }
         {/* routing components and rendering them with props */}
         <Route
           exact
           path='/'
-          render={props => <ActionsDisplay {...props} action={action} />}
+          render={props => (
+            <ActionsDisplay
+              {...props}
+              action={action}
+              setIsClicked={setIsClicked}
+            />
+          )}
         />
         <Route
           path='/effects'
-          render={props => <EffectsDisplay {...props} prevState={prevState} actionState={actionState} />}
+          render={props => (
+            <EffectsDisplay
+              {...props}
+              prevState={prevState}
+              setIsClicked={setIsClicked}
+              actionState={actionState}
+            />
+          )}
         />
         <Route
           path='/state'
-          render={props => <StateDisplay {...props} actionState={actionState} />}
+          render={props => (
+            <StateDisplay
+              {...props}
+              actionState={actionState}
+              setIsClicked={setIsClicked}
+            />
+          )}
         />
       </>
     </Router>

src/app/container/Events.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, Component} from 'react';
+import React, { Component } from 'react';
 
 // components
 import EventsNav from '../components/EventCards/EventsNav.jsx';