Merge pull request #46 from oslabs-beta/rydang/exportimport

export and import button functionality

Author: joshua0308

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

@@ -14,6 +14,7 @@ let intervalId = null;
 class MainContainer extends Component {
   constructor(props) {
     super(props);
+
     this.state = {
       snapshots: [],
       snapshotIndex: 0,
@@ -127,6 +128,40 @@ class MainContainer extends Component {
     port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
   }
 
+  importSnapshots() {
+    const { snapshots } = this.state;
+
+    // create invisible download anchor link
+    const fileDownload = document.createElement('a');
+
+    // set file in anchor link
+    fileDownload.href = URL.createObjectURL(
+      new Blob([JSON.stringify(snapshots)], { type: 'application/json' }),
+    );
+
+    // set anchor as file download and click it
+    fileDownload.setAttribute('download', 'snapshot.json');
+    fileDownload.click();
+
+    // remove file url
+    URL.revokeObjectURL(fileDownload.href);
+  }
+
+  exportSnapshots() {
+    const fileUpload = document.createElement('input');
+    fileUpload.setAttribute('type', 'file');
+
+    fileUpload.onchange = (event) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.setState({ snapshots: JSON.parse(reader.result) });
+      };
+      reader.readAsText(event.target.files[0]);
+    };
+
+    fileUpload.click();
+  }
+
   toggleMode(targetMode) {
     const { mode, mode: { locked, paused, persist }, port } = this.state;
     switch (targetMode) {
@@ -172,7 +207,12 @@ class MainContainer extends Component {
             playing={playing}
             pause={this.pause}
           />
-          <ButtonsContainer mode={mode} toggleMode={this.toggleMode} />
+          <ButtonsContainer
+            mode={mode}
+            toggleMode={this.toggleMode}
+            importSnapshots={this.importSnapshots}
+            exportSnapshots={this.exportSnapshots}
+          />
         </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;
 }