Merge pull request #40 from oslabs-beta/rydang/persist

persist button implemented

Author: mylee1995

package/index.js

@@ -1,6 +1,8 @@
 const snapShot = { tree: null };
 
-const mode = { jumping: false, paused: false, locked: false };
+const mode = {
+  jumping: false, paused: false, locked: false,
+};
 
 const linkFiber = require('./linkFiber')(snapShot, mode);
 const timeJump = require('./timeJump')(snapShot, mode);

src/app/containers/ButtonsContainer.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonsContainer = ({ mode: { paused, locked }, toggleMode }) => (
+const ButtonsContainer = ({ mode: { paused, locked, persist }, toggleMode }) => (
   <div className="buttons-container">
     <div className="pause-button" onClick={() => toggleMode('paused')}>{(paused) ? 'Resume' : 'Pause'}</div>
     <div className="lock-button" onClick={() => toggleMode('locked')}>{(locked) ? 'Unlock' : 'Lock'}</div>
+    <div className="persist-button" onClick={() => toggleMode('persist')}>{(persist) ? 'Unpersist' : 'Persist'}</div>
   </div>
 );
 
@@ -13,6 +14,7 @@ ButtonsContainer.propTypes = {
   mode: PropTypes.shape({
     paused: PropTypes.bool,
     locked: PropTypes.bool,
+    persist: PropTypes.bool,
   }).isRequired,
 };
 

src/app/containers/MainContainer.jsx

@@ -120,7 +120,7 @@ class MainContainer extends Component {
         mode.locked = !locked;
         break;
       case 'persist':
-        port.postMessage({ action: 'setPersist', payload: !locked });
+        port.postMessage({ action: 'setPersist', payload: !persist });
         mode.persist = !persist;
         break;
       default:

src/app/styles/components/_buttons.scss

@@ -45,11 +45,9 @@
   margin: 7px;
 }
 
-.lock-button {
-  @extend %button-shared;
-}
-
-.pause-button {
+.lock-button,
+.pause-button,
+.persist-button {
   @extend %button-shared;
 }
 

src/app/styles/layout/_buttonsContainer.scss

@@ -1,7 +1,7 @@
 .buttons-container {
   margin: 0 1% 0 1%;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   grid-gap: 1%;
   padding: 1% 0 1% 0;
 }

src/extension/background.js

@@ -5,6 +5,7 @@ const mode = {
   locked: false,
   paused: false,
 };
+let firstSnapshot = true;
 
 // establishing connection with devtools
 chrome.runtime.onConnect.addListener((port) => {
@@ -50,21 +51,35 @@ chrome.runtime.onConnect.addListener((port) => {
 
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request) => {
-  if (request.action === 'tabReload') snapshotArr = [];
+  const { action } = request;
+  const { persist } = mode;
 
-  if (request.action === 'recordSnap') {
-    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
+  switch (action) {
+    case 'tabReload':
+      firstSnapshot = true;
+      if (!persist) snapshotArr = [];
+      break;
+    case 'recordSnap':
+      // don't do anything for the first snapshot if current mode is persist
+      if (persist && firstSnapshot) {
+        firstSnapshot = false;
+        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
 
-      // send message to devtools
-      bg.postMessage({
-        action: 'sendSnapshots',
-        payload: snapshotArr,
-      });
-    }
+        // send message to devtools
+        bg.postMessage({
+          action: 'sendSnapshots',
+          payload: snapshotArr,
+        });
+      }
+      break;
+    default:
   }
 });