starting working on import/export buttons

Author: rydang

src/app/containers/ButtonsContainer.jsx

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonsContainer = ({ mode: { paused, locked, persist }, toggleMode }) => (
+const ButtonsContainer = ({ mode: { paused, locked, persist }, toggleMode, importSnapshots, exportSnapshots }) => (
   <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 className="import-button" onClick={importSnapshots}>Import</div>
+    <div className="export-button" onClick={exportSnapshots}>Export</div>
   </div>
 );
 
 ButtonsContainer.propTypes = {
   toggleMode: PropTypes.func.isRequired,
+  importSnapshots: PropTypes.func.isRequired,
+  exportSnapshots: PropTypes.func.isRequired,
   mode: PropTypes.shape({
     paused: PropTypes.bool,
     locked: PropTypes.bool,

src/app/containers/MainContainer.jsx

@@ -69,7 +69,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,25 +78,25 @@ 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){
+    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);
@@ -105,7 +105,7 @@ class MainContainer extends Component {
   }
 
   pause() {
-    this.setState({playing: false}, clearInterval(intervalId))
+    this.setState({ playing: false }, clearInterval(intervalId))
   }
 
   emptySnapshot() {
@@ -128,6 +128,28 @@ class MainContainer extends Component {
     port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
   }
 
+  importSnapshots() {
+    const { snapshots } = this.state;
+    const fileDownload = document.createElement('a');
+    fileDownload.style.display = 'none';
+    document.body.appendChild(fileDownload);
+    fileDownload.href = URL.createObjectURL(
+      new Blob([JSON.stringify(snapshots)], { type: 'application/json' }),
+    );
+    fileDownload.setAttribute('download', 'snapshot.json');
+    fileDownload.click();
+    URL.revokeObjectURL(fileDownload.href);
+    document.body.removeChild(fileDownload);
+  }
+
+  exportSnapshots() {
+    const fileUpload = document.createElement('input');
+    fileUpload.setAttribute('type', 'file');
+    
+    fileUpload.click();
+    this;
+  }
+
   toggleMode(targetMode) {
     const { mode, mode: { locked, paused, persist }, port } = this.state;
     switch (targetMode) {
@@ -170,10 +192,15 @@ 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}
+            importSnapshots={this.importSnapshots}
+            exportSnapshots={this.exportSnapshots}
           />
-          <ButtonsContainer mode={mode} toggleMode={this.toggleMode} />
         </div>
       </div>
     );

src/app/styles/components/_buttons.scss

@@ -45,6 +45,8 @@
   margin: 7px;
 }
 
+.import-button,
+.export-button,
 .lock-button,
 .pause-button,
 .persist-button {

src/app/styles/layout/_buttonsContainer.scss

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