From 52798c90844a7ecb3f0c572a8632ea29c708ed6b Mon Sep 17 00:00:00 2001
From: tylerslaton <mtslaton1@gmail.com>
Date: Fri, 25 Oct 2024 10:53:39 -0400
Subject: [PATCH] feat: add button to a user's thread in table view

Signed-off-by: tylerslaton <mtslaton1@gmail.com>
---
 ui/admin/app/routes/_auth.agents._index.tsx |  2 +-
 ui/admin/app/routes/_auth.users.tsx         | 33 +++++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/ui/admin/app/routes/_auth.agents._index.tsx b/ui/admin/app/routes/_auth.agents._index.tsx
index 0f22848a2..cb5b90c9d 100644
--- a/ui/admin/app/routes/_auth.agents._index.tsx
+++ b/ui/admin/app/routes/_auth.agents._index.tsx
@@ -126,7 +126,7 @@ export default function Threads() {
                                     className="px-0"
                                 >
                                     <TypographyP>
-                                        {info.getValue()} Threads
+                                        {info.getValue() || 0} Threads
                                     </TypographyP>
                                 </Link>
                             </Button>
diff --git a/ui/admin/app/routes/_auth.users.tsx b/ui/admin/app/routes/_auth.users.tsx
index 5817c0d2a..8bae028b5 100644
--- a/ui/admin/app/routes/_auth.users.tsx
+++ b/ui/admin/app/routes/_auth.users.tsx
@@ -1,7 +1,9 @@
+import { Link } from "@remix-run/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import useSWR from "swr";
 
 import { User, roleToString } from "~/lib/model/users";
+import { ThreadsService } from "~/lib/service/api/threadsService";
 import { UserService } from "~/lib/service/api/userService";
 import { timeSince } from "~/lib/utils";
 
@@ -10,15 +12,21 @@ import { DataTable } from "~/components/composed/DataTable";
 
 export default function Users() {
     const getUsers = useSWR(UserService.getUsers.key(), UserService.getUsers);
-
     const users = getUsers.data || [];
 
+    const { data: threads } = useSWR(
+        () => users.length > 0 && ThreadsService.getThreads.key(),
+        () => ThreadsService.getThreads()
+    );
+
+    const threadIdSet = new Set(threads?.map((thread) => thread.id) || []);
+
     return (
         <div>
             <div className="h-full p-8 flex flex-col gap-4">
                 <TypographyH2 className="mb-4">Users</TypographyH2>
                 <DataTable
-                    columns={getColumns()}
+                    columns={getColumns(threadIdSet)}
                     data={users}
                     sort={[{ id: "created", desc: true }]}
                 />
@@ -26,13 +34,28 @@ export default function Users() {
         </div>
     );
 
-    function getColumns(): ColumnDef<User, string>[] {
+    function getColumns(threadIdSet: Set<string>): ColumnDef<User, string>[] {
         return [
             columnHelper.accessor("email", {
                 header: "Email",
             }),
-            columnHelper.accessor("username", {
-                header: "Username",
+            columnHelper.display({
+                id: "thread",
+                header: "Thread",
+                cell: ({ row }) => {
+                    const threadId = `t1${row.original.id}`;
+                    if (threadIdSet.has(threadId)) {
+                        return (
+                            <Link
+                                to={`/thread/${threadId}?from=/users`}
+                                className="underline"
+                            >
+                                View Thread
+                            </Link>
+                        );
+                    }
+                    return <TypographyP>No Threads</TypographyP>;
+                },
             }),
             columnHelper.display({
                 id: "role",