Merge pull request #1564 from kchadha/save-load

Save and Load sb3 projects

Author: kchadha

src/containers/load-button.jsx

@@ -16,8 +16,8 @@ class LoadButton extends React.Component {
     }
     handleChange (e) {
         const reader = new FileReader();
-        reader.onload = () => this.props.vm.fromJSON(reader.result);
-        reader.readAsText(e.target.files[0]);
+        reader.onload = () => this.props.vm.loadProjectLocal(reader.result);
+        reader.readAsArrayBuffer(e.target.files[0]);
     }
     handleClick () {
         this.fileInput.click();
@@ -43,7 +43,7 @@ class LoadButton extends React.Component {
 
 LoadButton.propTypes = {
     vm: PropTypes.shape({
-        fromJSON: PropTypes.func
+        loadProjectLocal: PropTypes.func
     })
 };
 

src/containers/save-button.jsx

@@ -15,24 +15,24 @@ class SaveButton extends React.Component {
         ]);
     }
     handleClick () {
-        const json = this.props.vm.saveProjectSb3();
-
-        // Download project data into a file - create link element,
-        // simulate click on it, and then remove it.
         const saveLink = document.createElement('a');
         document.body.appendChild(saveLink);
 
-        const data = new Blob([json], {type: 'text'});
-        const url = window.URL.createObjectURL(data);
-        saveLink.href = url;
+        this.props.vm.saveProjectSb3().then(content => {
+            const url = window.URL.createObjectURL(content);
+
+            saveLink.href = url;
 
-        // File name: project-DATE-TIME
-        const date = new Date();
-        const timestamp = `${date.toLocaleDateString()}-${date.toLocaleTimeString()}`;
-        saveLink.download = `project-${timestamp}.json`;
-        saveLink.click();
-        window.URL.revokeObjectURL(url);
-        document.body.removeChild(saveLink);
+            // TODO user-friendly project name
+            // File name: project-DATE-TIME
+            const date = new Date();
+            const timestamp = `${date.toLocaleDateString()}-${date.toLocaleTimeString()}`;
+            // TODO change extension to sb3
+            saveLink.download = `project-${timestamp}.zip`;
+            saveLink.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(saveLink);
+        });
     }
     render () {
         const {
@@ -59,7 +59,8 @@ class SaveButton extends React.Component {
 SaveButton.propTypes = {
     vm: PropTypes.shape({
         saveProjectSb3: PropTypes.func
-    })};
+    })
+};
 
 const mapStateToProps = state => ({
     vm: state.vm