Merge pull request #24 from reactrewind/dev

prepare final merge

Author: victorvrv

README.md

@@ -1,49 +1,61 @@
+<p align="center">
+ <img src ="./images/greygreen_gg_full_350w.png" width="200"/>
+</p>
 
-<div style="text-align:center"><img src ="./images/greygreen_gg_full_350w.png" width="200"/></div>
+# Rewind: A Time Travel Debugger for React *useReducer*
 
-# Rewind : A Time Travel Debugger for React useReducer
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/reactrewind/react-rewind/pulls) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)<br/>
-A time travel debugger for React's useReducer hook, designed to help engineers record and replay user sessions to fix bugs faster.
-Debug issues easier by “rewinding” your session instead of having to reproduce the issue until you find the bug.
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/reactrewind/react-rewind/pulls) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+![Release Beta](https://img.shields.io/badge/release-beta-blue.svg)<br/><br/>
+ Designed to help engineers fix bugs faster by recording and replaying through different states of their applications. Debug your app more easily by “rewinding” your session instead of having to reproduce the issue until you find the problem. <br/>
 
-- Press record and start interacting with your application
-- Each dispatched action will be stored as a unique “event” in time
-- Rewind through your recorded actions with back buttom
-- Press play to view your changing app state 
 
 
- **React Rewind is in active development. Please follow this repo for contribution guidelines and our development road map.**
+- Press record and start interacting with your application.
+- Each dispatched action will be stored as a unique event in time.
+- Rewind through your recorded actions with the back button or by dragging the slider.
+- Analyze the state, the effects and the action object of every disptached event.
+- Press play and watch your app change!
+<p align="center">
+ <img src ="images/BrowserPreview_tmp.gif" width="600">
+</p>
+
+ **React Rewind is in active development. Follow this repo for contribution guidelines.**
 ## Getting Started
 
-These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
+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 record.
+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.
 
-If you prefer to install locally, setup instructions are as follows:
+To install locally, setup instructions are as follows:
 
 1. `git clone https://github.com/reactrewind/react-rewind.git`
 2. `cd react-rewind`
-3. `npm install`
+3. `npm run install_dep`
 4. `npm run build`
-5. `Then head to [chrome://extensions/](chrome://extensions/)`
-6. `Click Load Unpacked button and upload the chrome folder, located at react-rewind/src/browser/chrome.`
-7. `On your application page open Chrome Developer tools and select React Rewind from the tool bar.`
-8. `Click Record and begin interacting with your application.`
+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
+
 
+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.
 
-As you interact with your application actions will populate in the events panel. These actions are clickable and will change the state of your page. The actions can be viewed in more detail in the right panel by inspecting the actions, effects, and state. The time slider panel allows you to rewind, fast forward,and play through all recorded actions.
+### Application Features
+<p align="center">
+ <img src ="images/effects_900w.gif" width="700" />
+</p>
 
-### The UI
-|Property | Description |
+| Field | Description |
 | ------------- | ------------- |
-| Events | Dispatched actions (three ways to view see below) <br/>Shows elapsed time since last dispatch |
-|Actions | Events action type and payload |
-|Effects | Difference between selected event and previous state |
-|State | Overall state of the application at the selected time |
+| events | action types and time since last dispatch |
+| actions | the action object that was dispatched |
+| effects | difference between the states before and after the action was dispatched |
+| state | the state object after the action was dispatched |
+
 ## Contributing
 
 Please fork this repo. We welcome pull requests. For suggestions or to report bugs please log an issue.
@@ -54,9 +66,9 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
 
 ## Authors
 
-[Brandon Murphy](https://github.com/murphybrandon) | [Victor Varaschin](https://github.com/victorvrv) | [Kia Colbert](https://github.com/kiacolbert) | [Gabor Mowiena](https://github.com/GaberMowiena)
+[Brandon Murphy](https://github.com/murphybrandon) | [Victor Varaschin](https://github.com/victorvrv) | [Kia Colbert](https://github.com/kiacolbert) | [Gaber Mowiena](https://github.com/GaberMowiena)
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE) file for details
+This project is licensed under the MIT License - see the [LICENCE.md](./LICENCE) file for details
 

images/BrowserPreview_tmp.gif

@@ -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,
  }));
  }
  });

images/effects_900w.gif

@@ -4,9 +4,9 @@ import ReactJson from 'react-json-view';
 //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

src/app/components/App.jsx

@@ -7,9 +7,9 @@ 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/Actions/ActionsDisplay.jsx

@@ -0,0 +1,20 @@
+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/Effects/EffectsDisplay.jsx

@@ -4,9 +4,9 @@ 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} />}

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 
 const ReactRouter = require('react-router-dom');
 
@@ -12,7 +12,7 @@ import DetailsNav from '../components/DetailCards/DetailsNav.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'
 
 export default function Details(props) {
  // destructuring required info that's being passed down from App.jsx
@@ -21,24 +21,26 @@ export default function Details(props) {
  action, prevState, actionState,
  } = props;
 
- 
+ const [isClicked, setIsClicked] = useState(false);
+ console.log('isClicked', isClicked);
  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>