fix(edge): get client app to work on edge (#35040)

client/src/templates/Challenges/components/CompletionModal.js

@@ -60,6 +60,44 @@ const propTypes = {
 };
 
 export class CompletionModal extends Component {
+  state = {
+    downloadURL: null
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    const { files, isOpen } = props;
+    if (!isOpen) {
+      return null;
+    }
+    const { downloadURL } = state;
+    if (downloadURL) {
+      URL.revokeObjectURL(downloadURL);
+    }
+    let newURL = null;
+    if (Object.keys(files).length) {
+      const filesForDownload = Object.keys(files)
+        .map(key => files[key])
+        .reduce(
+          (allFiles, { path, contents }) => ({
+            ...allFiles,
+            [path]: contents
+          }),
+          {}
+        );
+      const blob = new Blob([JSON.stringify(filesForDownload, null, 2)], {
+        type: 'text/json'
+      });
+      newURL = URL.createObjectURL(blob);
+    }
+    return { downloadURL: newURL };
+  }
+
+  componentWillUnmount() {
+    if (this.state.downloadURL) {
+      URL.revokeObjectURL(this.state.downloadURL);
+    }
+  }
+
   render() {
     const {
       close,
@@ -67,22 +105,11 @@ export class CompletionModal extends Component {
       submitChallenge,
       handleKeypress,
       message,
-      files = {},
       title
     } = this.props;
     if (isOpen) {
       ga.modalview('/completion-modal');
     }
-    const showDownloadButton = Object.keys(files).length;
-    const filesForDownload = Object.keys(files)
-      .map(key => files[key])
-      .reduce(
-        (allFiles, { path, contents }) => ({
-          ...allFiles,
-          [path]: contents
-        }),
-        {}
-      );
     const dashedName = dasherize(title);
     return (
       <Modal
@@ -112,18 +139,17 @@ export class CompletionModal extends Component {
             bsStyle='primary'
             onClick={submitChallenge}
             >
-            Submit and go to next challenge <span className='hidden-xs'>(Ctrl + Enter)</span>
+            Submit and go to next challenge{' '}
+            <span className='hidden-xs'>(Ctrl + Enter)</span>
           </Button>
-          {showDownloadButton ? (
+          {this.state.downloadURL ? (
             <Button
               block={true}
               bsSize='lg'
               bsStyle='primary'
               className='btn-primary-invert'
               download={`${dashedName}.json`}
-              href={`data:text/json;charset=utf-8,${encodeURIComponent(
-                JSON.stringify(filesForDownload)
-              )}`}
+              href={this.state.downloadURL}
               >
               Download my solution
             </Button>
@@ -137,4 +163,7 @@ export class CompletionModal extends Component {
 CompletionModal.displayName = 'CompletionModal';
 CompletionModal.propTypes = propTypes;
 
-export default connect(mapStateToProps, mapDispatchToProps)(CompletionModal);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CompletionModal);