locked and paused are no longer saved upon refresh

Author: rydang

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 });
@@ -69,7 +68,7 @@ class MainContainer extends Component {
     if (snapshots.length > 0 && snapshotIndex > 0) {
       const newIndex = snapshotIndex - 1;
       // second callback parameter of setState to invoke handleJumpSnapshot
-      this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex) );
+      this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex));
     }
   }
 
@@ -78,34 +77,34 @@ class MainContainer extends Component {
     this.pause();
     if (snapshotIndex < snapshots.length - 1) {
       const newIndex = snapshotIndex + 1;
-      this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex) );
+      this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex));
     }
   }
 
   play() {
-    globalPlaying = !globalPlaying
-    this.setState({playing: globalPlaying}, () => {
-      if(this.state.playing){
+    globalPlaying = !globalPlaying;
+    this.setState({ playing: globalPlaying }, () => {
+      if (this.state.playing) {
         intervalId = setInterval(() => {
           const { snapshots, snapshotIndex } = this.state;
-            if (snapshotIndex < snapshots.length - 1) {
-                const newIndex = snapshotIndex + 1;
-                this.setState({ snapshotIndex: newIndex}, this.handleJumpSnapshot(newIndex) );
-            } else {
-                // clear interval when play reaches the end
-                globalPlaying = false;
-                clearInterval(intervalId);
-                this.setState({ playing: false })
-              }
+          if (snapshotIndex < snapshots.length - 1) {
+            const newIndex = snapshotIndex + 1;
+            this.setState({ snapshotIndex: newIndex }, this.handleJumpSnapshot(newIndex));
+          } else {
+            // clear interval when play reaches the end
+            globalPlaying = false;
+            clearInterval(intervalId);
+            this.setState({ playing: false })
+          }
         }, 1000);
       } else {
         clearInterval(intervalId);
       }
-    })
+    });
   }
 
   pause() {
-    this.setState({playing: false}, clearInterval(intervalId))
+    this.setState({ playing: false }, clearInterval(intervalId));
   }
 
   emptySnapshot() {
@@ -161,7 +160,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}
@@ -170,8 +169,8 @@ class MainContainer extends Component {
             moveBackward={this.moveBackward}
             moveForward={this.moveForward}
             play={this.play}
-            playing = {playing}
-            pause = {this.pause}
+            playing={playing}
+            pause={this.pause}
           />
           <ButtonsContainer mode={mode} toggleMode={this.toggleMode} />
         </div>

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:
   }