add exporting restore points

Author: JeremyGamer13

src/components/tw-restore-point-modal/restore-point-modal.css

@@ -122,6 +122,16 @@
     background-color: $ui-black-transparent;
 }
 
+.export-button {
+    margin: 0 4px;
+    padding: 2px 4px;
+    background-color: $data-primary;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 0.25rem;
+    font-size: small;
+    color: $ui-white;
+}
+
 .disabled {
     padding: 0.5rem;
     border-radius: 0.5rem;

src/components/tw-restore-point-modal/restore-point-modal.jsx

@@ -167,6 +167,7 @@ const RestorePointModal = props => (
                                 key={restorePoint.id}
                                 onClickDelete={props.onClickDelete}
                                 onClickLoad={props.onClickLoad}
+                                onClickExport={props.onClickExport}
                                 {...restorePoint}
                             />
                         ))}
@@ -222,6 +223,7 @@ RestorePointModal.propTypes = {
     onClickDelete: PropTypes.func.isRequired,
     onClickDeleteAll: PropTypes.func.isRequired,
     onClickLoad: PropTypes.func.isRequired,
+    onClickExport: PropTypes.func.isRequired,
     isLoading: PropTypes.bool.isRequired,
     totalSize: PropTypes.number.isRequired,
     restorePoints: PropTypes.arrayOf(PropTypes.shape({})),

src/components/tw-restore-point-modal/restore-point.jsx

@@ -16,7 +16,8 @@ class RestorePoint extends React.Component {
         super(props);
         bindAll(this, [
             'handleClickDelete',
-            'handleClickLoad'
+            'handleClickLoad',
+            'handleClickExport'
         ]);
         this.state = {
             thumbnail: null,
@@ -73,6 +74,11 @@ class RestorePoint extends React.Component {
         this.props.onClickLoad(this.props.id);
     }
 
+    handleClickExport (e) {
+        e.stopPropagation();
+        this.props.onClickExport(this.props.id);
+    }
+
     render () {
         const createdDate = new Date(this.props.created * 1000);
         return (
@@ -125,6 +131,13 @@ class RestorePoint extends React.Component {
                                 n: Object.keys(this.props.assets).length
                             }}
                         />
+
+                        <button
+                            className={styles.exportButton}
+                            onClick={this.handleClickExport}
+                        >
+                            Export
+                        </button>
                     </div>
                 </div>
 
@@ -151,7 +164,8 @@ RestorePoint.propTypes = {
     thumbnailSize: PropTypes.number.isRequired,
     assets: PropTypes.shape({}).isRequired, // Record<string, number>
     onClickDelete: PropTypes.func.isRequired,
-    onClickLoad: PropTypes.func.isRequired
+    onClickLoad: PropTypes.func.isRequired,
+    onClickExport: PropTypes.func.isRequired
 };
 
 export default RestorePoint;

src/containers/tw-restore-point-manager.jsx

@@ -9,6 +9,7 @@ import {LoadingStates, getIsShowingProject, onLoadedProject, requestProjectUploa
 import {setFileHandle} from '../reducers/tw';
 import TWRestorePointModal from '../components/tw-restore-point-modal/restore-point-modal.jsx';
 import RestorePointAPI from '../lib/tw-restore-point-api';
+import downloadBlob from '../lib/download-blob';
 import log from '../lib/log';
 
 /* eslint-disable no-alert */
@@ -49,10 +50,12 @@ class TWRestorePointManager extends React.Component {
             'handleClickDelete',
             'handleClickDeleteAll',
             'handleChangeInterval',
-            'handleClickLoad'
+            'handleClickLoad',
+            'handleClickExport'
         ]);
         this.state = {
             loading: true,
+            exporting: false,
             totalSize: 0,
             restorePoints: [],
             error: null,
@@ -161,6 +164,9 @@ class TWRestorePointManager extends React.Component {
         if (!this.canLoadProject()) {
             return;
         }
+        if (this.state.exporting) {
+            return;
+        }
 
         this.props.onCloseModal();
         this.props.onStartLoadingRestorePoint(this.props.loadingState);
@@ -181,6 +187,41 @@ class TWRestorePointManager extends React.Component {
             });
     }
 
+    handleClickExport (id) {
+        if (!this.props.isShowingProject) {
+            // this might break the state machine if we dont do this? not sure so we won't risk it & just return
+            return;
+        }
+        if (this.state.exporting) {
+            return;
+        }
+
+        this.setState({
+            exporting: true
+        });
+        
+        // specifically add true so dontLoadProject is true
+        RestorePointAPI.loadRestorePoint(this.props.vm, id, true)
+            .then((arrayBuffer) => {
+                this.setState({
+                    exporting: false
+                });
+
+                const blob = new Blob([arrayBuffer], { type: "application/x.scratch.sb3" });
+                downloadBlob("restore-point.pmp", blob);
+            })
+            .catch(error => {
+                log.error(error);
+                alert(this.props.intl.formatMessage(messages.loadError, {
+                    error
+                }));
+                
+                this.setState({
+                    exporting: false
+                });
+            });
+    }
+
     handleChangeInterval (e) {
         const interval = +e.target.value;
         RestorePointAPI.setInterval(interval);
@@ -282,6 +323,7 @@ class TWRestorePointManager extends React.Component {
                     onClickDelete={this.handleClickDelete}
                     onClickDeleteAll={this.handleClickDeleteAll}
                     onClickLoad={this.handleClickLoad}
+                    onClickExport={this.handleClickExport}
                     interval={this.state.interval}
                     onChangeInterval={this.handleChangeInterval}
                     isLoading={this.state.loading}

src/lib/tw-restore-point-api.js

@@ -362,9 +362,10 @@ const deleteAllRestorePoints = () => openDB().then(db => new Promise((resolveTra
 /**
  * @param {VirtualMachine} vm scratch-vm instance
  * @param {number} id the restore point's ID
+ * @param {boolean} dontLoadProject if true, the project will not be loaded and this will simply return the sb3 file
  * @returns {Promise<ArrayBuffer>} Resolves with sb3 file
  */
-const loadRestorePoint = (vm, id) => openDB().then(db => new Promise((resolveTransaction, rejectTransaction) => {
+const loadRestorePoint = (vm, id, dontLoadProject) => openDB().then(db => new Promise((resolveTransaction, rejectTransaction) => {
     const transaction = db.transaction([METADATA_STORE, PROJECT_STORE, ASSET_STORE], 'readonly');
     transaction.onerror = () => {
         rejectTransaction(new Error(`Transaction error: ${transaction.error}`));
@@ -378,6 +379,12 @@ const loadRestorePoint = (vm, id) => openDB().then(db => new Promise((resolveTra
     // zip in memory.
 
     const loadVM = () => {
+        if (dontLoadProject) {
+            return resolveTransaction(zip.generateAsync({
+                type: 'arraybuffer'
+            }));
+        }
+
         resolveTransaction(
             zip.generateAsync({
                 // Don't bother compressing it since it will be immediately decompressed
@@ -426,7 +433,9 @@ const loadRestorePoint = (vm, id) => openDB().then(db => new Promise((resolveTra
         };
     };
 
-    vm.stop();
+    if (!dontLoadProject) {
+        vm.stop();
+    }
 
     loadMetadata();
 }));