Fixed issues around deleting servers

apps/static/js/home.js

@@ -1,5 +1,17 @@
 var loadedServers = {};
 
+// Returns the currently active server, or null if none are active.
+function getCurrentlyActiveServer() {
+    const activeServerAndId = Object.entries(loadedServers).find(([id, server]) => server.currentlyActive);
+    if (activeServerAndId === undefined)
+        return null;
+
+    var [id, activeServer] = activeServerAndId;
+    activeServer.id = id;
+
+    return activeServer;
+}
+
 function addToLoadedServers(server) {
     // Remove the 'id' property and add the 'currentlyActive' property
     ({id, ...rest} = server, server = {...rest, currentlyActive: false})
@@ -9,11 +21,17 @@ function addToLoadedServers(server) {
 
     // Display the loaded server
     addServerTemplate(id, server.guild_id, server.name, server.icon);
+
+    // Select the newly added server
+    selectServer(id);
 }
 
 function removeFromLoadedServers(serverPrimaryKey) {
     delete loadedServers[serverPrimaryKey];
     removeServerTemplate(serverPrimaryKey);
+
+    $("#noSelectedServer").show();
+    $("#selectedServerContainer").hide();
 }
 
 $(document).ready(async function() {
@@ -93,8 +111,8 @@ function addServerTemplate(serverPrimaryKey, serverGuildId, serverName, serverIc
     template.attr("data-id", serverPrimaryKey);
 
     // Bind the button for selecting this server
-    template.find("button").on("click", function() {
-        selectServer($(this).parent());
+    template.find("button").off("click").on("click", function() {
+        selectServer(serverPrimaryKey);
     });
 
 
@@ -111,7 +129,7 @@ $("#newServerBtn").on("click", function() {
 });
 
 // Submit 'Add Server' Form
-$("#serverForm").on("submit", function(event) {
+$("#serverForm").on("submit", async function(event) {
     event.preventDefault();
 
     var selectedOption = $("#serverOptions option:selected");
@@ -119,7 +137,7 @@ $("#serverForm").on("submit", function(event) {
         serverGuildId = selectedOption.val();
         serverIconHash = selectedOption.attr("data-icon");
 
-    var serverPrimaryKey = registerNewServer(serverName, serverGuildId, serverIconHash);
+    var serverPrimaryKey = await registerNewServer(serverName, serverGuildId, serverIconHash);
 
     if (serverPrimaryKey !== false) {
         addToLoadedServers({
@@ -147,15 +165,19 @@ async function registerNewServer(serverName, serverGuildId, serverIconHash) {
     return response.id
 }
 
-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");
+function selectServer(primaryKey) {
 
-    $("#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`);
+    var server = loadedServers[primaryKey];
+
+    // var sideElem = $("")
+    //     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(server.name);
+    $("#selectedServerContainer .selected-server-id").text(server.guild_id);
+    $("#selectedServerContainer .selected-server-icon").attr("src", `https://cdn.discordapp.com/icons/${server.guild_id}/${server.icon}.webp?size=80`);
 
     // Disable all loaded servers
     $.each(loadedServers, function(serverPrimaryKey, server) {
@@ -164,13 +186,20 @@ function selectServer(sideElem) {
 
     // Activate current selected server
     loadedServers[primaryKey].currentlyActive = true;
+
+    $("#noSelectedServer").hide();
+    $("#selectedServerContainer").show();
 }
 
 $("#deleteSelectedServerBtn").on("click", async function() {
+    var activeServer = getCurrentlyActiveServer();
 
-    var activeServer = Object.values(loadedServers).find(server => server.currentlyActive);
-
-    alert("Deleting \n" + JSON.stringify(activeServer, null, 4))
+    if (!activeServer) {
+        showToast("danger", "Error Deleting Server", "You must select a server to delete.");
+        return;
+    }
+    
+    console.debug(`Deleting ${activeServer.id}: ${JSON.stringify(activeServer, null, 4)}`)
 
     try {
         await deleteSavedGuild(activeServer.id);
@@ -178,6 +207,7 @@ $("#deleteSelectedServerBtn").on("click", async function() {
     }
     catch (error) {
         alert(error)
+        alert(JSON.stringify(error, null, 4))
     }
 
 });

apps/templates/home/index.html

@@ -29,7 +29,10 @@
                         </div>
                     </div>
                 </div>
-                <div id="selectedServerContainer" class="peer-greed" data-guild-id="">
+                <div id="noSelectedServer" class="peer-greed">
+                    Select a server or add one
+                </div> 
+                <div id="selectedServerContainer" class="peer-greed" data-guild-id="" style="display: none;">
                     <header class="px-4 py-3 border-bottom">
                         <div class="peers">
                             <div class="peer-greed">