refactored fetchFiles()

app/assets/script.js

@@ -15,22 +15,6 @@
     fetchFiles();
   }
 
-  function updateUI() {
-    if (AppConfig.Modes.Readonly) {
-      UI.dropzone.style.display = "none";
-    } else {
-      UI.dropzone.style.display = "block";
-    }
-
-    if (AppConfig.Modes.Sinkhole) {
-      UI.fileList.style.display = "none";
-      UI.sinkholeModeInfo.style.display = "block";
-    } else {
-      UI.fileList.style.display = "block";
-      UI.sinkholeModeInfo.style.display = "none";
-    }
-  }
-
   async function initApp() {
     addUIElementsToBody();
     getUIElements();
@@ -58,75 +42,51 @@
 
   async function fetchFiles() {
     if (AppConfig.Modes.Sinkhole) {
-      UI.fileList.innerHTML = "";
+      clearFileList();
       return;
     }
 
     try {
-      const res = await fetch(AppConfig.Endpoints.Files, { cache: "no-store" });
+      const files = await fetchFileList();
-      if (!res.ok) throw new Error("HTTP " + res.status);
-      const files = await res.json();
-
       Files = {};
-
+      clearFileList();
-      if (!UI.fileList) return;
+      renderFileList(files);
-      UI.fileList.innerHTML = "";
-      files.forEach((file) => {
-        Files[file.Name] = true;
-
-        const size = humanReadableSize(file.Size);
-
-        const li = document.createElement("li");
-
-        const downloadLink = document.createElement("a");
-        downloadLink.className = "download-link";
-        downloadLink.href = AppConfig.Endpoints.FilesGet.replace(
-          ":filename",
-          encodeURIComponent(file.Name)
-        );
-        downloadLink.textContent = `${file.Name} (${size})`;
-
-        li.appendChild(downloadLink);
-
-        if (!AppConfig.Modes.Readonly) {
-          const deleteLink = document.createElement("a");
-          deleteLink.className = "delete-link";
-          deleteLink.href = "#";
-          deleteLink.textContent = " [Delete]";
-          deleteLink.title = "Delete file";
-          deleteLink.addEventListener("click", async (e) => {
-            e.preventDefault();
-            if (!confirm(`Do you really want to delete "${file.Name}"?`))
-              return;
-            try {
-              const r = await fetch(
-                AppConfig.Endpoints.FilesDelete.replace(
-                  ":filename",
-                  encodeURIComponent(file.Name)
-                ),
-                { method: "GET" }
-              );
-              if (r.ok) {
-                showSuccess("File deleted");
-              } else {
-                showError("Delete failed");
-              }
-              fetchFiles();
-            } catch (err) {
-              console.error(err);
-            }
-          });
-
-          li.appendChild(deleteLink);
-        }
-
-        UI.fileList.appendChild(li);
-      });
     } catch (err) {
       console.error("fetchFiles failed:", err);
     }
   }
 
+  async function fetchFileList() {
+    const res = await fetch(AppConfig.Endpoints.Files, { cache: "no-store" });
+    if (!res.ok) throw new Error("HTTP " + res.status);
+    return res.json();
+  }
+
+  async function handleDeleteClick(event, file) {
+    event.preventDefault();
+    if (!confirm(`Do you really want to delete "${file.Name}"?`)) return;
+
+    try {
+      const res = await fetch(
+        AppConfig.Endpoints.FilesDelete.replace(
+          ":filename",
+          encodeURIComponent(file.Name)
+        ),
+        { method: "GET" }
+      );
+
+      if (res.ok) {
+        showSuccess("File deleted");
+      } else {
+        showError("Delete failed");
+      }
+
+      fetchFiles();
+    } catch (err) {
+      showError("Delete failed");
+    }
+  }
+
   function addEventListeners() {
     UI.dropzone.addEventListener("click", () => UI.fileInput.click());
     UI.fileInput.addEventListener("change", () => {
@@ -202,6 +162,32 @@
     document.body.appendChild(divSinkholeModeInfo);
   }
 
+  function clearFileList() {
+    if (UI.fileList) UI.fileList.innerHTML = "";
+  }
+
+  function createDownloadLink(file) {
+    const size = humanReadableSize(file.Size);
+    const link = document.createElement("a");
+    link.className = "download-link";
+    link.href = AppConfig.Endpoints.FilesGet.replace(
+      ":filename",
+      encodeURIComponent(file.Name)
+    );
+    link.textContent = `${file.Name} (${size})`;
+    return link;
+  }
+
+  function createDeleteLink(file) {
+    const link = document.createElement("a");
+    link.className = "delete-link";
+    link.href = "#";
+    link.textContent = " [Delete]";
+    link.title = "Delete file";
+    link.addEventListener("click", (e) => handleDeleteClick(e, file));
+    return link;
+  }
+
   function getUIElements() {
     UI.currentFileName = document.getElementById("currentFileName");
     UI.dropzone = document.getElementById("dropzone");
@@ -233,6 +219,23 @@
     return (bytesPerSec / (1024 * 1024)).toFixed(2) + " MB/s";
   }
 
+  function renderFileList(files) {
+    if (!UI.fileList) return;
+
+    files.forEach((file) => {
+      Files[file.Name] = true;
+
+      const li = document.createElement("li");
+      li.appendChild(createDownloadLink(file));
+
+      if (!AppConfig.Modes.Readonly) {
+        li.appendChild(createDeleteLink(file));
+      }
+
+      UI.fileList.appendChild(li);
+    });
+  }
+
   function sanitizeFilename(dirtyFilename) {
     if (!dirtyFilename || dirtyFilename.trim() === "") {
       return "upload.bin";
@@ -301,6 +304,22 @@
     }, 1500);
   }
 
+  function updateUI() {
+    if (AppConfig.Modes.Readonly) {
+      UI.dropzone.style.display = "none";
+    } else {
+      UI.dropzone.style.display = "block";
+    }
+
+    if (AppConfig.Modes.Sinkhole) {
+      UI.fileList.style.display = "none";
+      UI.sinkholeModeInfo.style.display = "block";
+    } else {
+      UI.fileList.style.display = "block";
+      UI.sinkholeModeInfo.style.display = "none";
+    }
+  }
+
   function uploadFiles(fileListLike) {
     const files = Array.from(fileListLike);
     if (files.length === 0) return;