functionality for deleting saved servers

apps/static/js/api.js

@@ -35,6 +35,10 @@ async function newSavedGuild(formData) {
     return await ajaxRequest("/api/saved-guilds/", "POST", formData);
 }
 
+async function deleteSavedGuild(id) {
+    return await ajaxRequest(`/api/saved-guilds/${id}/`, "DELETE");
+}
+
 async function loadGuilds() {
     return await ajaxRequest("/guilds", "GET");
 }

apps/static/js/home.js

@@ -6,6 +6,14 @@ function addToLoadedServers(server) {
 
     // Save the server as loaded
     loadedServers[id] = server;
+
+    // Display the loaded server
+    addServerTemplate(id, server.guild_id, server.name, server.icon);
+}
+
+function removeFromLoadedServers(serverPrimaryKey) {
+    delete loadedServers[serverPrimaryKey];
+    removeServerTemplate(serverPrimaryKey);
 }
 
 $(document).ready(async function() {
@@ -42,7 +50,6 @@ async function loadServerOptions() {
                 value: server.id,
                 text: server.name,
                 "data-icon": server.icon,
-                // "data-id": server.id
             }));
         });
     }
@@ -50,10 +57,12 @@ async function loadServerOptions() {
         console.error(JSON.stringify(error, null, 4));
         showToast("danger", `Error Loading Guilds: HTTP ${error.status}`, error.responseJSON.message, 15000);
     }
+    finally {
+        // Re-enable controls
+        $("#serverOptions").prop("disabled", false);
+        $("#serverOptionsRefreshBtn").prop("disabled", false).find("i.bi").removeClass("spinning-360");
+    }
 
-    // Re-enable controls
-    $("#serverOptions").prop("disabled", false);
-    $("#serverOptionsRefreshBtn").prop("disabled", false).find("i.bi").removeClass("spinning-360");
 }
 
 // Load any existing 'saved guilds' from the database
@@ -63,26 +72,25 @@ async function loadSavedGuilds() {
 
         response.forEach(server => {
 
-            // 'Register' the server, by storing it for later
+            // 'Register' the server, by storing it for later and
+            // displaying it on the server list sidebar
             addToLoadedServers(server);
-
-            // Show the server as an icon button
-            addServerTemplate(server.guild_id, server.name, server.icon);
         });
     }
     catch (error) {
-        alert(JSON.stringify(error, null, 4));
+        alert("Error loading saved guilds: " + error);
     }
 }
 
 // Create an element for the added server and show it
-function addServerTemplate(serverId, serverName, serverIconHash) {
+function addServerTemplate(serverPrimaryKey, serverGuildId, serverName, serverIconHash) {
     template = $($("#serverItemTemplate").html());
 
-    template.find("img").attr("src", `https://cdn.discordapp.com/icons/${serverId}/${serverIconHash}.webp?size=80`);
-    template.attr("data-guild-id", serverId);
+    template.find("img").attr("src", `https://cdn.discordapp.com/icons/${serverGuildId}/${serverIconHash}.webp?size=80`);
+    template.attr("data-guild-id", serverGuildId);
     template.attr("data-name", serverName);
     template.attr("data-icon", serverIconHash);
+    template.attr("data-id", serverPrimaryKey);
 
     // Bind the button for selecting this server
     template.find("button").on("click", function() {
@@ -93,6 +101,10 @@ function addServerTemplate(serverId, serverName, serverIconHash) {
     $("#serverList").prepend(template);
 }
 
+function removeServerTemplate(serverPrimaryKey) {
+    $(`#serverList .server-item[data-id=${serverPrimaryKey}]`).remove();
+}
+
 // Open 'Add Server' Form Modal
 $("#newServerBtn").on("click", function() {
     $("#serverForm .modal").modal("show");
@@ -116,7 +128,6 @@ $("#serverForm").on("submit", function(event) {
             guild_id: serverGuildId,
             icon: serverIconHash
         });
-        addServerTemplate(serverGuildId, serverName, serverIconHash);
     }
 
     $("#serverForm .modal").modal("hide");
@@ -140,8 +151,33 @@ function selectServer(sideElem) {
     var name = sideElem.attr("data-name");
         guildId = sideElem.attr("data-guild-id");
         icon = sideElem.attr("data-icon");
+        primaryKey = sideElem.attr("data-id");
 
     $("#selectedServerContainer .selected-server-name").text(name);
     $("#selectedServerContainer .selected-server-id").text(guildId);
     $("#selectedServerContainer .selected-server-icon").attr("src", `https://cdn.discordapp.com/icons/${guildId}/${icon}.webp?size=80`);
-}
+
+    // Disable all loaded servers
+    $.each(loadedServers, function(serverPrimaryKey, server) {
+        server.currentlyActive = false;
+    });
+
+    // Activate current selected server
+    loadedServers[primaryKey].currentlyActive = true;
+}
+
+$("#deleteSelectedServerBtn").on("click", async function() {
+
+    var activeServer = Object.values(loadedServers).find(server => server.currentlyActive);
+
+    alert("Deleting \n" + JSON.stringify(activeServer, null, 4))
+
+    try {
+        await deleteSavedGuild(activeServer.id);
+        removeFromLoadedServers(activeServer.id);
+    }
+    catch (error) {
+        alert(error)
+    }
+
+});

apps/templates/home/index.html

@@ -76,7 +76,7 @@
 {% block javascripts %}
 
 <script id="serverItemTemplate" type="text/template">
-    <div class="server-item layer mb-2" data-guild-id="" data-name="" data-icon="">
+    <div class="server-item layer mb-2" data-id="" data-guild-id="" data-name="" data-icon="">
         <button type="button" class="rounded-3 p-1 bg-body bd">
             <img src="" class="rounded-3" alt="" width="50" height="50">
         </button>