From c86d4fc5cba4117815dbfc5d67aac3fd5ec6e31e Mon Sep 17 00:00:00 2001
From: Caley <caley@thegoffexperiment.com>
Date: Sat, 22 Apr 2023 20:00:37 -0500
Subject: [PATCH] This PR creates a method that uses fetch to grab the zip from
 the remove PB which will actually download the archive generated by the
 backend server. Previously this link would get caught by the root route and
 redirect incorrectly.

---
 src/App.css |  4 ++++
 src/App.js  | 36 +++++++++++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 18f2d5d..2f2708d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,3 +42,7 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.clone-btn {
+  margin-left: 10px;
+}
diff --git a/src/App.js b/src/App.js
index 71a37c4..c4ef989 100644
--- a/src/App.js
+++ b/src/App.js
@@ -260,6 +260,34 @@ class App extends Component {
     }
   }
 
+  downloadPatternArchive = async (event, deviceId) => {
+    event.preventDefault()
+    await fetch(`./controllers/${deviceId}/dump`)
+      .then(async res => {
+        let filename = ''
+        for (const header of res.headers) {
+          if (header[1].includes('filename')) {
+            const dispositionHeader = header[1]
+            // ignoring warning for `_`
+            // eslint-disable-next-line no-unused-vars
+            const [_, rawFilename] = dispositionHeader.split('=')
+            // removing double quotes
+            filename = rawFilename.replace(/^"(.+(?="$))"$/, '$1')
+          }
+        }
+        const url = URL.createObjectURL(await res.blob())
+        const element = document.createElement("a");
+        element.setAttribute("href", url);
+        element.setAttribute("download", filename);
+        element.style.display = "none";
+        document.body.appendChild(element);
+        element.click();
+        document.body.removeChild(element);
+        URL.revokeObjectURL(url);
+      })
+      .catch(err => console.error(err));
+  }
+
 
   render() {
     let cloneDialog = null;
@@ -337,9 +365,11 @@ class App extends Component {
                     const dName = d.name
                     return (
                       <li className="list-group-item" key={dName}>
-                        <a className={"btn btn-secondary float-right " + (!this.state.showDevControls && "d-none")} href={"controllers/" + d.id + "/dump"} download>Dump</a>
-                        <button className="btn btn-secondary float-right" onClick={(event)=>this.openCloneDialog(event, d.id)}>Clone</button>
-                        <a className="btn btn-primary float-right" href={"http://" + d.address} target="_blank" rel="noopener noreferrer">Open</a>
+                        <button className={"clone-btn btn btn-secondary float-right " + (!this.state.showDevControls && "d-none")}
+                            onClick={async (event) => await this.downloadPatternArchive(event, d.id)}>
+                          Dump</button>
+                        <button className="clone-btn btn btn-secondary float-right" onClick={(event)=>this.openCloneDialog(event, d.id)}>Clone</button>
+                        <a className="clone-btn btn btn-primary float-right" href={"http://" + d.address} target="_blank" rel="noopener noreferrer">Open</a>
                         <h5>{dName} v{d.ver} @ {d.address}</h5>
                       </li>
                     )