Fix tests

ui/src/components/DeleteTabloModal.tsx

@@ -6,7 +6,7 @@ type Tablo = Database["public"]["Tables"]["tablos"]["Row"];
 interface DeleteTabloModalProps {
   tablo: Tablo | null;
   onClose: () => void;
-  onConfirm: (tabloId: number) => void;
+  onConfirm: (tabloId: string) => void;
   isDeleting: boolean;
 }
 

ui/src/components/TabloModal.tsx

@@ -44,7 +44,7 @@ export const TabloModal = ({ tablo, onClose, onEdit }: TabloModalProps) => {
 
   const handleSendInvite = () => {
     if (inviteEmail.trim()) {
-      inviteUser({ email: inviteEmail, tablo_id: tablo?.id ?? 0 });
+      inviteUser({ email: inviteEmail, tablo_id: tablo?.id ?? "" });
       setInviteEmail("");
     }
   };

ui/src/hooks/invite.ts

@@ -11,7 +11,7 @@ export const useInviteUser = () => {
       tablo_id,
     }: {
       email: string;
-      tablo_id: number;
+      tablo_id: string;
     }) => {
       const { data } = await api.post(
         "/api/v1/tablos/invite",

ui/src/hooks/tablos.ts

@@ -75,7 +75,7 @@ export const useUpdateTablo = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ id, ...tablo }: TabloUpdate & { id: number }) => {
+    mutationFn: async ({ id, ...tablo }: TabloUpdate & { id: string }) => {
       const { error } = await supabase
         .from("tablos")
         .update(tablo)
@@ -93,8 +93,9 @@ export const useUpdateTablo = () => {
 export const useDeleteTablo = () => {
   const queryClient = useQueryClient();
 
+  // TODO: investigate issue with deletions
   return useMutation({
-    mutationFn: async (id: number) => {
+    mutationFn: async (id: string) => {
       const { error } = await supabase
         .from("tablos")
         .update({ deleted_at: new Date().toISOString() })

ui/src/pages/tablo.tsx

@@ -16,7 +16,7 @@ import { useSession } from "@ui/contexts/SessionContext";
 type Tablo = Database["public"]["Tables"]["tablos"]["Row"];
 
 export const TabloPage = () => {
-  const [contextMenuTablo, setContextMenuTablo] = useState<number | null>(null);
+  const [contextMenuTablo, setContextMenuTablo] = useState<string | null>(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [viewingTablo, setViewingTablo] = useState<Tablo | null>(null);
   const [deletingTablo, setDeletingTablo] = useState<Tablo | null>(null);
@@ -57,17 +57,17 @@ export const TabloPage = () => {
   };
 
   // Tablo movement functions - simplified for now, would need position field in DB
-  const moveTabloLeft = (tabloId: number) => {
+  const moveTabloLeft = (tabloId: string) => {
     // TODO: Implement with proper position field in database
     console.log("Moving tablo left:", tabloId);
   };
 
-  const moveTabloRight = (tabloId: number) => {
+  const moveTabloRight = (tabloId: string) => {
     // TODO: Implement with proper position field in database
     console.log("Moving tablo right:", tabloId);
   };
 
-  const openTablo = (tabloId: number) => {
+  const openTablo = (tabloId: string) => {
     if (!tablos) return;
     const tablo = tablos.find((t) => t.id === tabloId);
     if (tablo) {
@@ -105,7 +105,7 @@ export const TabloPage = () => {
     }
   };
 
-  const changeTabloStatus = async (tabloId: number, newStatus: string) => {
+  const changeTabloStatus = async (tabloId: string, newStatus: string) => {
     try {
       await updateTablo({
         id: tabloId,
@@ -125,7 +125,7 @@ export const TabloPage = () => {
     });
   };
 
-  const handleDeleteTablo = (tabloId: number) => {
+  const handleDeleteTablo = (tabloId: string) => {
     if (!tablos) return;
     const tablo = tablos.find((t) => t.id === tabloId);
     if (tablo) {
@@ -133,7 +133,7 @@ export const TabloPage = () => {
     }
   };
 
-  const confirmDeleteTablo = async (tabloId: number) => {
+  const confirmDeleteTablo = async (tabloId: string) => {
     setIsDeleting(true);
     try {
       await deleteTablo(tabloId);

ui/src/providers/UserStoreProvider.tsx

@@ -61,3 +61,29 @@ export const useUser = () => {
   }
   return useStore(store);
 };
+
+// TestUserStoreProvider component
+export const TestUserStoreProvider = ({
+  children,
+  user,
+}: {
+  children: React.ReactNode;
+  user: User;
+}) => {
+  const store = createStore<User>()(() => user);
+
+  return (
+    <UserStoreContext.Provider value={store as StoreApi<User>}>
+      {children}
+    </UserStoreContext.Provider>
+  );
+};
+
+// // Test useUser hook
+// export const useTestUser = () => {
+//   const store = React.useContext(TestUserStoreContext);
+//   if (!store) {
+//     throw new Error("Missing TestUserStoreProvider");
+//   }
+//   return useStore(store);
+// };

ui/src/utils/testHelpers.tsx

@@ -2,11 +2,20 @@ import { render, RenderResult, waitFor } from "@testing-library/react";
 import { SessionTestProvider } from "@ui/contexts/SessionContext";
 import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider } from "@ui/contexts/ThemeContext";
-import { User } from "@supabase/supabase-js";
 import userEvent from "@testing-library/user-event";
-import { queryClient } from "@ui/lib/api";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { UserStoreProvider } from "@ui/providers/UserStoreProvider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+import { TestUserStoreProvider } from "@ui/providers/UserStoreProvider";
+
+const defaultUser = {
+  id: "123",
+  name: "John Doe",
+  first_name: "John",
+  last_name: "Doe",
+  email: "john@example.com",
+  avatar_url: "https://example.com/avatar.jpg",
+  streamToken: null,
+};
 
 export const renderWithRouter = (ui: React.ReactNode, { route = "/" } = {}) => {
   window.history.pushState({}, "Test page", route);
@@ -17,31 +26,38 @@ export const renderWithRouter = (ui: React.ReactNode, { route = "/" } = {}) => {
   };
 };
 
-export const renderWithProviders = (
-  ui: React.ReactNode,
-  opts: { user?: User } = {}
-): RenderResult => {
+export const renderWithProviders = (ui: React.ReactNode): RenderResult => {
+  // Create a new QueryClient instance for each test to avoid state pollution
+  const testQueryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        staleTime: Infinity,
+      },
+    },
+  });
+
   return render(
     <BrowserRouter>
       <ThemeProvider>
-        <QueryClientProvider client={queryClient}>
+        <QueryClientProvider client={testQueryClient}>
           <SessionTestProvider
-            testUser={
-              opts.user ?? {
-                id: "123",
-                app_metadata: {},
-                aud: "test",
-                created_at: "2021-01-01",
-                user_metadata: {
-                  first_name: "John",
-                  last_name: "Doe",
-                  avatar_url: "https://example.com/avatar.jpg",
-                  full_name: "John Doe",
-                },
-              }
-            }
+            testUser={{
+              id: defaultUser.id,
+              app_metadata: {},
+              aud: "test",
+              created_at: "2021-01-01",
+              user_metadata: {
+                first_name: defaultUser.first_name,
+                last_name: defaultUser.last_name,
+                avatar_url: defaultUser.avatar_url,
+                full_name: defaultUser.name,
+              },
+            }}
           >
-            <UserStoreProvider>{ui}</UserStoreProvider>
+            <TestUserStoreProvider user={defaultUser}>
+              {ui}
+            </TestUserStoreProvider>
           </SessionTestProvider>
         </QueryClientProvider>
       </ThemeProvider>