merged with dev

Author: joshua0308

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 react-time-travel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/linkFiber.js

@@ -24,7 +24,8 @@ module.exports = (snap, mode) => {
 
     function newSetState(state, callback = () => { }) {
       // dont do anything if state is locked
-      if (mode.locked) return;
+      // UNLESS we are currently jumping through time
+      if (mode.locked && !mode.jumping) return;
       // continue normal setState functionality, except add sending message middleware
       oldSetState(state, () => {
         updateSnapShotTree();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-time-travel",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A library that helps debug React by memorizing the state of components with every render.",
   "main": "index.js",
   "repository": {

readme.md

@@ -1,4 +1,43 @@
-This is react-time-travel 
-A debugging tool for react in chrome extension.
+# React-Time-Travel
 
-TESTING DEV
+A debugging tool for React. Records state whenever state is changed and allows user to jump to any previous recorded state.
+
+Two parts are needed for this tool to function. The chrome extension must be installed, and the NPM package must be installed and used in the React code.
+
+## Installing
+
+1. Download the Chrome extension from Chrome Web Store.
+
+2. Install the npm package in your code.
+```
+npm i react-time-travel
+```
+3. Call the `linkFiber` method on your root container after rendering your App.
+
+```
+const { linkFiber } = require('react-time-travel');
+
+const rootContainer = document.getElementById('root');
+ReactDom.render(<App />, rootContainer);
+
+linkFiber(rootContainer);
+```
+
+4. Done! That's all you have to do to link your React project to our library.
+
+## How to Use
+
+After installing both the Chrome extension and the npm package, just open up your project in the browser. 
+
+Then open up your Chrome DevTools. There'll be a new tab called React-Time-Travel.
+
+## Authors
+
+* **Ryan Dang** - [@rydang](https://github.com/rydang)
+* **Bryan Lee** - [@mylee1995](https://github.com/mylee1995)
+* **Josh Kim** - [@joshua0308](https://github.com/joshua0308)
+* **Sierra Swaby** - [@starkspark](https://github.com/starkspark)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

src/app/components/Action.jsx

@@ -15,7 +15,6 @@ const Action = (props) => {
       <div
         className="jump-button"
         onClick={() => handleJumpSnapshot(index)}
-        onKeyPress={() => console.log('key pressed')}
         tabIndex={index}
         role="button"
       >

src/app/components/Tree.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
+import PropTypes from 'prop-types';
 
 const getItemString = (type, data, itemType, itemString) => (
   <span>
-    {/* //
-    {type} */}
+    {data.name}
   </span>
 );
 
 const Tree = (props) => {
   const { snapshot } = props;
-  console.log('TREE COMPONENT IS PRINTED');
-  console.log(snapshot);
   return (
     <React.Fragment>
       {snapshot && (
@@ -20,11 +18,26 @@ const Tree = (props) => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          // labelRenderer={raw => <strong>{raw}</strong>}
-          // valueRenderer={raw => <em>{raw}</em>}
+          labelRenderer={(raw) => {
+            if (typeof raw[0] !== 'number') return <span>{raw[0]}</span>;
+          }}
         />
       )}
     </React.Fragment>
   );
 };
+
+Tree.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]),
+    children: PropTypes.arrayOf(
+      PropTypes.object,
+    ),
+    name: PropTypes.string,
+  }).isRequired,
+};
+
 export default Tree;

src/app/containers/MainContainer.jsx

@@ -39,12 +39,11 @@ class MainContainer extends Component {
       switch (action) {
         case 'sendSnapshots': {
           const snapshotIndex = payload.length - 1;
-
           // set state with the information received from the background script
           this.setState({ snapshots: payload, snapshotIndex });
           break;
         }
-        case 'initialConnectSnapshot': {
+        case 'initialConnectSnapshots': {
           const { snapshots, mode } = payload;
           const snapshotIndex = snapshots.length - 1;
           this.setState({ snapshots, snapshotIndex, mode });
@@ -82,11 +81,18 @@ class MainContainer extends Component {
     }
   }
 
+<<<<<<< HEAD
   play(speed = 1000) {
     globalPlaying = !globalPlaying;
     this.setState({ playing: globalPlaying }, () => {
       const { playing } = this.state;
       if (playing) {
+=======
+  play() {
+    globalPlaying = !globalPlaying;
+    this.setState({ playing: globalPlaying }, () => {
+      if (this.state.playing) {
+>>>>>>> dev
         intervalId = setInterval(() => {
           const { snapshots, snapshotIndex } = this.state;
           if (snapshotIndex < snapshots.length - 1) {
@@ -96,9 +102,15 @@ class MainContainer extends Component {
             // clear interval when play reaches the end
             globalPlaying = false;
             clearInterval(intervalId);
+<<<<<<< HEAD
             this.setState({ playing: false });
           }
         }, speed);
+=======
+            this.setState({ playing: false })
+          }
+        }, 1000);
+>>>>>>> dev
       } else {
         clearInterval(intervalId);
       }
@@ -168,7 +180,7 @@ class MainContainer extends Component {
             handleJumpSnapshot={this.handleJumpSnapshot}
             emptySnapshot={this.emptySnapshot}
           />
-          <StateContainer snapshot={snapshots[snapshotIndex]} />
+          {(snapshots.length) ? <StateContainer snapshot={snapshots[snapshotIndex]} /> : null}
           <TravelContainer
             snapshotsLength={snapshots.length}
             snapshotIndex={snapshotIndex}
@@ -177,9 +189,14 @@ class MainContainer extends Component {
             moveBackward={this.moveBackward}
             moveForward={this.moveForward}
             play={this.play}
+<<<<<<< HEAD
             pause={this.pause}
             playing={playing}
             playSpeed={playSpeed}
+=======
+            playing={playing}
+            pause={this.pause}
+>>>>>>> dev
           />
           <ButtonsContainer mode={mode} toggleMode={this.toggleMode} />
         </div>

src/app/containers/TravelContainer.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import MainSlider from '../components/MainSlider';
 import Dropdown from '../components/Dropdown';
 
+<<<<<<< HEAD
 const options = [
   { value: 2000, label: '0.5x' },
   { value: 1000, label: '1.0x' },
@@ -62,15 +63,48 @@ class TravelContainer extends Component {
     );
   }
 }
+=======
+const TravelContainer = ({
+  moveBackward,
+  moveForward,
+  snapshotsLength,
+  handleChangeSnapshot,
+  handleJumpSnapshot,
+  snapshotIndex,
+  play,
+  playing,
+  pause,
+}) => (
+  <div className="travel-container">
+    <div className="play-button" onClick={play}>
+      {playing ? 'Pause' : 'Play'}
+    </div>
+    <MainSlider
+      snapshotLength={snapshotsLength}
+      handleChangeSnapshot={handleChangeSnapshot}
+      snapshotIndex={snapshotIndex}
+      handleJumpSnapshot={handleJumpSnapshot}
+      pause={pause}
+    />
+    <div className="backward-button" onClick={moveBackward}>
+      {'<'}
+    </div>
+    <div className="forward-button" onClick={moveForward}>
+      {'>'}
+    </div>
+  </div>
+);
+>>>>>>> dev
 
 TravelContainer.propTypes = {
-  pause: PropTypes.func.isRequried,
+  pause: PropTypes.func.isRequired,
   play: PropTypes.func.isRequired,
   moveBackward: PropTypes.func.isRequired,
   moveForward: PropTypes.func.isRequired,
   snapshotsLength: PropTypes.number.isRequired,
   handleChangeSnapshot: PropTypes.func.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,
   snapshotIndex: PropTypes.number.isRequired,
+  playing: PropTypes.bool.isRequired,
 };
 export default TravelContainer;

src/extension/background.js

@@ -15,7 +15,7 @@ chrome.runtime.onConnect.addListener((port) => {
   // send it to devtools as soon as connection to devtools is made
   if (snapshotArr.length > 0) {
     bg.postMessage({
-      action: 'initialConnectSnapshot',
+      action: 'initialConnectSnapshots',
       payload: {
         snapshots: snapshotArr,
         mode,
@@ -57,28 +57,34 @@ chrome.runtime.onMessage.addListener((request) => {
   switch (action) {
     case 'tabReload':
       firstSnapshot = true;
+      mode.locked = false;
+      mode.paused = false;
       if (!persist) snapshotArr = [];
       break;
     case 'recordSnap':
-      // don't do anything for the first snapshot if current mode is persist
-      if (persist && firstSnapshot) {
+      if (firstSnapshot) {
         firstSnapshot = false;
+        // don't add anything to snapshot storage if mode is persisting for the initial snapshot
+        if (!persist) snapshotArr.push(request.payload);
+        bg.postMessage({
+          action: 'initialConnectSnapshots',
+          payload: {
+            snapshots: snapshotArr,
+            mode,
+          },
+        });
         break;
       }
-      firstSnapshot = false;
       snapshotArr.push(request.payload);
-      // if port is not null, send a message to devtools
-      if (bg) {
-        // TODO:
-        // get active tab id
-        // get snapshot arr from tab object
+      // TODO:
+      // get active tab id
+      // get snapshot arr from tab object
 
-        // send message to devtools
-        bg.postMessage({
-          action: 'sendSnapshots',
-          payload: snapshotArr,
-        });
-      }
+      // send message to devtools
+      bg.postMessage({
+        action: 'sendSnapshots',
+        payload: snapshotArr,
+      });
       break;
     default:
   }

src/extension/contentScript.js

@@ -1,15 +1,12 @@
-console.log('contentScript running');
-
 // listening for messages from npm package
 window.addEventListener('message', (msg) => {
   // post initial Message to npm package
-  const { action, payload } = msg.data;
-  console.log('npm -> contentScript', msg.data);
+  const { action } = msg.data;
   if (action === 'recordSnap') chrome.runtime.sendMessage(msg.data);
 });
 
 // listening for messages from background.js
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((request) => {
   // send the message to npm package
   const { action } = request;
   switch (action) {
@@ -29,4 +26,3 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 chrome.runtime.sendMessage({ action: 'tabReload' });
 
 window.postMessage({ action: 'contentScriptStarted' });
-console.log('contentScriptStarted msg sent');