resolve channel names

apps/static/js/home/content.js

@@ -1,5 +1,6 @@
 var contentTable;
     contentOptions = null;
+    channelResolveInterval = null;
 
 async function initContentTable() {
     contentOptions = await getTrackedContentOptions();
@@ -67,9 +68,13 @@ async function initContentTable() {
             {
                 title: "Channel",
                 data: "channel_id",
-                className: "text-start content-channel-id",
+                className: "text-start",
-                render: function(data) {
+                render: function(data, type, row) {
-                    return $("<span>").text(data)[0];
+                    return `<div class="resolve-channel-name text-center" data-channel-id="${data}" data-msg-id="${row.message_id}">
+                                <div class="spinner-border spinner-border-sm" role="status">
+                                    <span class="visually-hidden">Loading...</span>
+                                </div>
+                            </div>`;
                 }
             },
             {
@@ -100,47 +105,54 @@ async function initContentTable() {
     });
 
     bindTableCheckboxes("#contentTable", contentTable, "#contentTabPane .table-del-btn");
+
+    contentTable.on("draw", function() {
+        restartResolveChannelNamesTask(); 
+    });
 }
 
-function handleDiscordChannelNames() {
-    let interval = setInterval(function() {
 
-        if (!discordChannels.length)
+// #region Resolve Channels
-            return;
 
-        $("#contentTable tr td.content-channel-id").each(function() {
+function restartResolveChannelNamesTask() {
-            let tracked = contentTable.row($(this).closest("tr")).data();
+    clearInterval(channelResolveInterval);
-                channel = discordChannels.find(item => item.value === tracked.channel_id);
+    startResolveChannelNamesTask();
+}
 
-            if (!channel)
+function startResolveChannelNamesTask() {
-                return;
+    const guildId = getCurrentlyActiveServer().guild_id;
+    channelResolveInterval = setInterval(function() {
+        if (resolveChannelNames(guildId))
+            clearInterval(channelResolveInterval);
+    }, 50)
+}
 
-            $(this).text("").append(
+function resolveChannelNames(guildId) {
-                $("<a>")
+    if (!discordChannels.length)
-                .attr("href", `https://discord.com/channels/${getCurrentlyActiveServer().guild_id}/${channel.value}/${tracked.message_id}`)
+        return false
-                .attr("target", "_blank")
+
-                .addClass("text-decoration-none")
+    $(".resolve-channel-name").each(function() {
-                .text(channel.text)
+        const channelId = $(this).data("channel-id");
+        const messageId = $(this).data("msg-id");
+        console.log(channelId + " " + messageId);
+        const channel = discordChannels.find(channel => channel.value === channelId);
+
+        if (channel) {
+            const href = `https://discord.com/channels/${guildId}/${channelId}/${messageId}/`;
+            $(this).replaceWith(
+                $("<a>").text(channel.text)
+                    .attr("href", href)
+                    .attr("target", "_blank")
+                    .addClass("text-decoration-none text-nowrap")
             );
-        });
+        }
+    });
 
-        // $(".replace-discord-channel-id-with-name").each(function() {
+    return true;
-        //     let displayChannel = discordChannels.find(channel => channel.value == $(this).text());
-        //     if (displayChannel) {
-        //         $(this).text("").append(
-        //             $("<a>")
-        //             .attr("href", `https://discord.com/channels/${getCurrentlyActiveServer().guild_id}/${displayChannel.value}`)
-        //             .attr("target", "_blank")
-        //             .addClass("text-decoration-none")
-        //             .text(displayChannel.text)
-        //         );
-        //     }
-        // });
-
-
-    }, 600);
 }
 
+// #endregion
+
 async function goToSubscription(subId) {
     $("#subscriptionsTab").click();
     await showEditSubModal(subId);
@@ -181,9 +193,12 @@ function clearExistingContentRows() {
 }
 
 $("#contentTabPane").on("click", ".table-refresh-btn", async function() {
-    loadContent(getCurrentlyActiveServer().guild_id);
+    await loadContent(getCurrentlyActiveServer().guild_id);
 });
 
+
+// #region Load Content
+
 async function loadContent(guildId) {
 
     if (!guildId)
@@ -223,3 +238,5 @@ $(document).on("selectedServerChange", async function() {
     const activeServer = getCurrentlyActiveServer();
     await loadContent(activeServer.guild_id);
 });
+
+// #endregion