refactoring, disable btn when processing

fetch/fetch.js

@@ -7,12 +7,14 @@
 
     // adding the lightbox (control panel) to the body
     // by grabbing the lightbox.html
-    function addLightBox() {
+    async function addLightBox() {
         if (document.URL === baseurl) {
-            fetch(chrome.extension.getURL("fetch/lightbox.html"))
-                .then(response => response.text())
-                .then(result => document.body.insertAdjacentHTML('beforeend', result))
-                .then(() => {
+            try{
+
+                let response = await fetch(chrome.extension.getURL("fetch/lightbox.html"));
+                let result = await response.text();
+                document.body.insertAdjacentHTML('beforeend', result);
+
                 // turn on/ off lightbox
                 document.querySelector("#lightbox-switch").addEventListener("click", function () {
                     document.getElementById("fetch-lightbox").classList.add("on");
@@ -36,8 +38,9 @@
                     }
                 });
 
-                })
-                .catch(error => console.error("Unable to fetch lightbox.html" + error));
+            }catch(error){
+                console.error("Unable to fetch lightbox.html" + error);
+            }
         }
     }
 
@@ -74,6 +77,7 @@
     // Reading the textarea and fetch the SKUs one by one
     // then create DOM and append it
     async function startFetching() {
+        document.querySelectorAll("#fetch-lightbox button").forEach(x => x.disabled = true);
         let SKUString = document.getElementById("sku-list").value;
         if (SKUString.length) {
             let SKUlist = SKUString.split("\n");
@@ -87,6 +91,7 @@
             document.querySelector("#fetch-lightbox .info-message").innerHTML = "";
 
             for (let SKU of SKUlist) {
+
                 // fetch product URL
                 let currentms = new Date().getTime();
                 let assetlist = await fetchSKU(`${baseurl}api/asset?time=${currentms}&t=main_product%2FGU%2F${SKU}&t=datacategory%2Fecasset&r=north&z=${fetchNumber}&et=hk&c=DEFAULT`, `${SKU} product image`);
@@ -94,7 +99,6 @@
                 container.insertAdjacentHTML('beforeend', DOMString);
                 clientSideFilter();
 
-
                 // fetch model URL
                 currentms = new Date().getTime();
                 assetlist = await fetchSKU(`${baseurl}api/asset?time=${currentms}&t=datacategory%2Fasset&w=${SKU}&r=north&z=${fetchNumber}&c=DEFAULT`, `${SKU} model image`);
@@ -107,10 +111,12 @@
         } else {
             alert("It is empty on SKU list.");
         }
+        document.querySelectorAll("#fetch-lightbox button").forEach(x => x.disabled = false);
     }
 
     // this function base on startFetching, will be used after user selected all assets
     async function downloadFetching() {
+        document.querySelectorAll("#fetch-lightbox button").forEach(x => x.disabled = true);
         // grab selected DOM, and turn from NodeList to Array
         let DOMArray = [...document.querySelectorAll("#fetch-lightbox .debug-box .asset-item.on")];
 
@@ -131,6 +137,7 @@
 
         // remove the clicked state on asset item
         document.querySelectorAll("#fetch-lightbox .debug-box .asset-item.on").forEach(x => x.classList.remove("on"));
+        document.querySelectorAll("#fetch-lightbox button").forEach(x => x.disabled = false);
     }
 
     function createDOMString(SKU, assetlist){
@@ -178,6 +185,7 @@
 
     // perform operation similar to old extension
     async function extensionDownloading() {
+        document.querySelectorAll("#fetch-lightbox button").forEach(x => x.disabled = true);
         let SKUString = document.getElementById("sku-list").value;
         if (SKUString.length) {
             let SKUlist = SKUString.split("\n");
@@ -191,17 +199,15 @@
 
             for (let SKU of SKUlist) {
 
+                // first link
                 let currentms = new Date().getTime();
-                // old 
-                // let assetlist = await fetchSKU(SKU, `${baseurl}api/asset?time=${currentms}&t=datacategory%2Fasset&w=${SKU}&r=north&z=${fetchNumber}&et=hk&c=DEFAULT`);
-                // new 
                 let assetlist = await fetchSKU(`${baseurl}api/asset?time=${currentms}&t=main_product%2FGU%2F${SKU}&t=datacategory%2Fecasset&r=north&z=${fetchNumber}&et=hk&c=DEFAULT`, `${SKU} product image`);
                 await downloadList(assetlist, `${SKU}`);
                 await sleep(sleepTime);
 
                 let is_old = assetlist.length === 0;
 
-                // &t=datacategory%2Fasset&w=341947&r=north&z=30&c=DEFAULT
+                // second link
                 currentms = new Date().getTime();
                 assetlist = await fetchSKU(`${baseurl}api/asset?time=${currentms}&t=datacategory%2Fasset&w=${SKU}&r=north&z=${fetchNumber}&c=DEFAULT`, `${SKU} model image`);
                 let downloadlist = filtering(assetlist, SKU);
@@ -218,6 +224,7 @@
         } else {
             alert("It is empty on SKU list.");
         }
+        document.querySelectorAll("#fetch-lightbox button").forEach(x => x.disabled = false);
     }
 
     //grabbing single SKU data
@@ -226,43 +233,38 @@
             return;
         }
         
+        let assetlist = [];
         let config = getConfig();
         addDebugMessage(`Start fetching SKU=${message}`);
 
-        return await fetch(url, config)
-            .then(response => response.json())
-            .then(async function (result) {
+        try{
+            let request = await fetch(url, config);
+            let response = await request.json();
 
             await sleep(sleepTime);
 
-                //get json data
-                let assetlist = result.assets;
-                let scrollId = result.scrollId;
-                let total = result.total;
+            assetlist = response.assets;
+            let scrollId = response.scrollId;
+            let total = response.total;
 
             // fetch the remaining item by simluating scroll operation
             for (let i = total - fetchNumber; i > 0; i -= fetchNumber) {
                 addDebugMessage(`fetching SKU=${message} Process: ${i} remains`);
 
-                    let response = await fetch(`${baseurl}api/asset/more?scrollId=${scrollId}`, config)
-                        .then(response => response.json())
-                        .catch(error => {
-                            addDebugMessage("Fetch error on fetchSKU - Scroll : " + error);
-                            throw new Error("Fetch error on fetchSKU - Scroll : " + error);
-                        });
-
-                    assetlist = assetlist.concat(response.assets);
+                let req = await fetch(`${baseurl}api/asset/more?scrollId=${scrollId}`, config);
+                let res = await req.json();
+                assetlist = assetlist.concat(res.assets);
 
                 await sleep(sleepTime / 1.5);
             }
             addDebugMessage(`fetching SKU=${message} completed, total item: ${total}`);
 
-                return assetlist;
-            })
-            .catch(error => {
+        }catch(error){
             addDebugMessage("Fetch error on fetchSKU : " + error);
             throw new Error("Fetch error on fetchSKU : " + error);
-            });
+        }
+
+        return assetlist;
     }
 
     // filter asset by Date
@@ -344,24 +346,29 @@
             postheader.append("csrf-token", document.querySelector('meta[name="csrf-token"]').content);
             postheader.append("origin", "https://digitallibrary-external.fastretailing.com");
 
+            let response;
             // send POST request for getting download token
-            let response = await fetch(`${baseurl}api/asset/downloadtoken`, {
+            try{
+                let request = await fetch(`${baseurl}api/asset/downloadtoken`, {
                     "method": "POST",
                     "headers": postheader,
                     "mode": "cors",
                     "redirect": "follow",
                     "body": json
                 
-            }).then(response => response.json())
-                .catch(error => {
+                });
+                response = await request.json();
+
+            }catch(error){
                 addDebugMessage("Fetch error on DownloadList - POST request: " + error);
                 throw new Error("Fetch error on DownloadList - POST request: " + error);
-                });
+            }
 
             // send GET request for downloading the zip file
-            fetch(`/api/asset/download/${response.token}`, getConfig())
-                .then(response => response.blob())
-                .then(blob => {
+            if(response){
+                try{
+                    let request = await fetch(`/api/asset/download/${response.token}`, getConfig());
+                    let blob = await request.blob();
 
                     // https://stackoverflow.com/questions/32545632/how-can-i-download-a-file-using-window-fetch
                     let url = window.URL.createObjectURL(blob);
@@ -373,11 +380,12 @@
                     a.remove();  //afterwards we remove the element again     
 
                     addDebugMessage(`download ${name}.zip completed`);
-                })
-                .catch(error => {
+
+                }catch(error){
                     addDebugMessage("Fetch error on DownloadList - GET request: " + error);
                     throw new Error("Fetch error on DownloadList - GET request: " + error);
-                });
+                }
+            }
 
         } else if (assetlist.length === 1) {