fix: replace unusable <td> renders with className parameters for col configs.

src/client/typescript/guild/feeds.ts

@@ -6,7 +6,11 @@ import HSSelect, { ISelectOptions } from "@preline/select";
 import HSDataTable, { IDataTableOptions } from "@preline/datatable";
 import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
 import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
-import { formatTimestamp } from "../main";
+import { formatTimestamp, verifyChannels } from "../main";
+import prisma from "../../../../generated/prisma";
+
+declare let guildId: string;
+declare let channels: Array<any>;
 
 // #region DataTable
 //
@@ -46,15 +50,14 @@ const columnDefs: ConfigColumnDefs[] = [
         target: 0,
         orderable: false,
         searchable: false,
-        render: (_data: unknown, _type: unknown, row: any) => { return `
-            <td class="size-px whitespace-nowrap">
-                <div class="ps-6 py-4">
-                    <label class="rowSelect${row.id}-js" class="flex">
-                        <input type="checkbox" id="rowSelect${row.id}-js" class="cj-table-checkbox" data-hs-datatable-row-selecting-individual=""/>
-                        <span class="sr-only">Checkbox</span>
-                    </label>
-                </div>
-            </td>
+        className: "size-px whitespace-nowrap",
+        render: (_data: unknown, _type: unknown, row: prisma.Feed) => { return `
+            <div class="ps-6 py-4">
+                <label class="rowSelect${row.id}-js" class="flex">
+                    <input type="checkbox" id="rowSelect${row.id}-js" class="cj-table-checkbox" data-hs-datatable-row-selecting-individual=""/>
+                    <span class="sr-only">Select Row</span>
+                </label>
+            </div>
         `}
     },
     {
@@ -62,12 +65,11 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "name",
         orderable: true,
         searchable: true,
+        className: "size-px whitespace-nowrap",
         render: (data: string) => { return `
-            <td class="size-px whitespace-nowrap align-top">
-                <span class="cj-table-link max-w-[250px] truncate">
-                    ${data}
-                </span>
-            </td>
+            <span class="cj-table-link max-w-[250px] truncate">
+                ${data}
+            </span>
         `}
     },
     {
@@ -75,12 +77,11 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "url",
         orderable: true,
         searchable: true,
+        className: "size-px whitespace-nowrap",
         render: (data: string) => { return `
-            <td class="size-px whitespace-nowrap align-top">
-                <a href="${data}" class="cj-table-link max-w-[450px] truncate">
-                    ${data}
-                </a>
-            </td>
+            <a href="${data}" class="cj-table-link max-w-[450px] truncate">
+                ${data}
+            </a>
         `}
     },
     {
@@ -88,14 +89,20 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "channels",
         orderable: false,
         searchable: false,
-        render: (data: Array<any>, type: string, row: any) => {
+        className: "size-px",
+        render: (data: prisma.Channel[], type: string, row: prisma.Feed) => {
             if (type !== "display") { return data; }
             if (!data.length) { return ""; }
 
             const wrapper = $("<div>").addClass("flex flex-nowrap gap-1 px-6 py-4");
             const tag = $("<span>").addClass("inline-flex items-center whitespace-nowrap gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200");
 
-            const firstChannelName = data[0].channel_id; // "# " + channels.find(c => c.id === data[0]).name;
+            if (!verifyChannels(data, channels)) {
+                wrapper.text("invalid channels").addClass("whitespace-nowrap");
+                return wrapper.get(0);
+            }
+
+            const firstChannelName = "# " + channels.find(c => c.id === data[0].channel_id).name;
             wrapper.append(tag.clone().text(firstChannelName));
 
             // No need to run the dropdown code if there's no more to show
@@ -103,7 +110,7 @@ const columnDefs: ConfigColumnDefs[] = [
                 return wrapper.get(0);
             }
             else if (data.length <= 2) {
-                const secondChannelName = data[1].channel_id; // "# " + channels.find(c => c.id === data[1]).name;
+                const secondChannelName = "# " + channels.find(c => c.id === data[1].channel_id).name;
                 wrapper.append(tag.clone().text(secondChannelName));
                 data.shift();
                 return wrapper.get(0);
@@ -119,7 +126,7 @@ const columnDefs: ConfigColumnDefs[] = [
             dropdown.append(dropdownBtn.text(`+${data.length}`));
 
             data.forEach(channel => {
-                const channelName = channel.channel_id; // "# " + channels.find(c => c.id === channelId).name;
+                const channelName = "# " + channels.find(c => c.id === channel.channel_id).name;
                 dropdownMenu.append(tag.clone().text(channelName));
             });
 
@@ -133,14 +140,13 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "filters",
         orderable: false,
         searchable: false,
+        className: "size-px whitespace-nowrap",
         render: (data: string) => { return `
-            <td class="size-px whitespace-nowrap align-top">
-                <div class="px-6 py-4">
-                    <span class="cj-table-text">
-                        ${data}
-                    </span>
-                </div>
-            </td>
+            <div class="px-6 py-4">
+                <span class="cj-table-text">
+                    ${data}
+                </span>
+            </div>
         `}
     },
     {
@@ -148,14 +154,13 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "message_style",
         orderable: false,  // both should be true, but message_style doesnt exist yet
         searchable: false,
+        className: "size-px whitespace-nowrap",
         render: (data: string) => { return `
-            <td class="size-px whitespace-nowrap align-top">
-                <div class="px-6 py-4">
-                    <span class="cj-table-text">
-                        ${data}
-                    </span>
-                </div>
-            </td>
+            <div class="px-6 py-4">
+                <span class="cj-table-text">
+                    ${data}
+                </span>
+            </div>
         `}
     },
     {
@@ -163,14 +168,13 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "created_at",
         orderable: true,
         searchable: false,
+        className: "size-px whitespace-nowrap",
         render: (data: string) => { return `
-            <td class="size-px whitespace-nowrap align-top">
-                <div class="px-6 py-4">
-                    <span class="cj-table-text">
-                        ${formatTimestamp(data)}
-                    </span>
-                </div>
-            </td>
+            <div class="px-6 py-4">
+                <span class="cj-table-text">
+                    ${formatTimestamp(data)}
+                </span>
+            </div>
         `}
     },
     {
@@ -178,6 +182,7 @@ const columnDefs: ConfigColumnDefs[] = [
         data: "active",
         orderable: true,
         searchable: false,
+        className: "size-px whitespace-nowrap",
         render: (data: boolean) => {
             const wrapper = $("<div>").addClass("px-6 py-4");
             const badge = $("<span>").addClass("py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full");
@@ -200,7 +205,7 @@ const columnDefs: ConfigColumnDefs[] = [
 ];
 
 const ajaxSettings: AjaxSettings = {
-    url: `/guild/${1204426362794811453}/feeds/api/datatable`,
+    url: `/guild/${guildId}/feeds/api/datatable`,
     type: "POST",
     contentType: "application/json",
     dataSrc: "data",
@@ -230,7 +235,7 @@ const tableOptions: IDataTableOptions = {
 };
 
 const table: HSDataTable = new HSDataTable(
-    $("#table").get(0),
+    $("#table").get(0) as HTMLElement,
     tableOptions
 );
 
@@ -265,7 +270,7 @@ const pageSelectOptions: ISelectOptions = {
 };
 
 const pageSizeSelect: HSSelect = new HSSelect(
-    $("#selectPageSize-js").get(0),
+    $("#selectPageSize-js").get(0) as HTMLElement,
     pageSelectOptions
 );
 
@@ -278,7 +283,7 @@ const pageSizeSelect: HSSelect = new HSSelect(
 const editModalOptions: IOverlayOptions = {};
 
 const editModal: HSOverlay = new HSOverlay(
-    $("#editModal").get(0),
+    $("#editModal").get(0) as HTMLElement,
     editModalOptions
 );