feat: display workspace members

src/app/members/page.tsx

@@ -2,13 +2,22 @@
 
 import { HiOutlinePlusSmall } from "react-icons/hi2";
 import { useModal } from "~/app/providers/modal";
+import { useWorkspace } from "~/app/providers/workspace";
 import Modal from "~/app/components/modal";
 
 import { ImportBoardsForm } from "~/app/boards/components/ImportBoardsForm";
 import { NewBoardForm } from "~/app/boards/components/NewBoardForm";
 
+import { api } from "~/trpc/react";
+
 export default function MembersPage() {
   const { openModal, modalContentType } = useModal();
+  const { workspace } = useWorkspace();
+
+  const { data } = api.workspace.byId.useQuery(
+    { publicId: workspace.publicId },
+    { enabled: workspace?.publicId ? true : false },
+  );
 
   return (
     <div className="p-8">
@@ -33,6 +42,43 @@ export default function MembersPage() {
         </div>
       </div>
 
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        {data?.members.map((member) => (
+          <div
+            key={member.publicId}
+            className="relative flex items-center space-x-3 rounded-md border border-dashed border-dark-600 bg-dark-100 px-6 py-5 shadow-sm"
+          >
+            <div className="flex-shrink-0">
+              <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-dark-400">
+                <span className="text-sm font-medium leading-none text-white">
+                  {member.user.name
+                    ?.split(" ")
+                    .map((namePart) => namePart.charAt(0).toUpperCase())
+                    .join("")}
+                </span>
+              </span>
+            </div>
+            <div className="min-w-0 flex-1">
+              <div>
+                <div className="mb-1 flex items-center">
+                  <p className="mr-2 text-sm font-medium text-dark-1000">
+                    {member.user.name}
+                  </p>
+                  <span className="inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">
+                    {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
+                  </span>
+                </div>
+                <span className="absolute inset-0" aria-hidden="true" />
+
+                <p className="truncate text-sm text-dark-900">
+                  {member.user.email}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
       <Modal>
         {modalContentType === "NEW_BOARD" && <NewBoardForm />}
         {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}

src/server/api/routers/workspace.ts

@@ -1,6 +1,7 @@
+import { z } from "zod";
 import { and, eq, isNull } from "drizzle-orm";
 
-import { workspaceMembers } from "~/server/db/schema";
+import { workspaces, workspaceMembers } from "~/server/db/schema";
 
 import {
   createTRPCRouter,
@@ -29,4 +30,35 @@ export const workspaceRouter = createTRPCRouter({
         }
       });
     }),
+  byId: publicProcedure
+    .input(z.object({ publicId: z.string().min(12) }))
+    .query(({ ctx, input }) => {
+      const userId = ctx.session?.user.id;
+
+      if (!userId) return;
+
+      return ctx.db.query.workspaces.findFirst({
+        where: and(eq(workspaces.publicId, input.publicId), isNull(workspaces.deletedAt)),
+        columns: {
+          publicId: true,
+        },
+        with: {
+          members: {
+            columns: {
+              publicId: true,
+              role: true,
+            },
+            with: {
+              user: {
+                columns: {
+                  id: true,
+                  name: true,
+                  email: true,
+                }
+              }
+            }
+          }
+        }
+      });
+    }),
 });