From 904482bcedded8c90ce97540e73e13341c4b0b06 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 5 Jul 2025 20:06:39 +0200
Subject: [PATCH] Address types

---
 ui/src/components/DeleteTabloModal.tsx |  4 ++--
 ui/src/components/TabloModal.tsx       | 14 ++++++++------
 ui/src/pages/tablo.tsx                 | 16 ++++++++--------
 ui/src/types/tablos.types.ts           |  7 ++++++-
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/DeleteTabloModal.tsx b/ui/src/components/DeleteTabloModal.tsx
index 78fb0cb..46d79ca 100644
--- a/ui/src/components/DeleteTabloModal.tsx
+++ b/ui/src/components/DeleteTabloModal.tsx
@@ -1,8 +1,8 @@
 import { ClickOutside } from "./ClickOutside";
-import { Tablo } from "@ui/types/tablos.types";
+import { UserTablo } from "@ui/types/tablos.types";
 
 interface DeleteTabloModalProps {
-  tablo: Tablo | null;
+  tablo: UserTablo | null;
   onClose: () => void;
   onConfirm: (tabloId: string) => void;
   isDeleting: boolean;
diff --git a/ui/src/components/TabloModal.tsx b/ui/src/components/TabloModal.tsx
index 644df40..e7b3f6c 100644
--- a/ui/src/components/TabloModal.tsx
+++ b/ui/src/components/TabloModal.tsx
@@ -3,18 +3,18 @@ import { useState } from "react";
 import { ImageColorPicker } from "./ImageColorPicker";
 import { StatusPicker } from "./StatusPicker";
 import { useInviteUser } from "@ui/hooks/invite";
-import { Tablo } from "@ui/types/tablos.types";
+import { TabloUpdate, UserTablo } from "@ui/types/tablos.types";
 
 type StatusType = "todo" | "in_progress" | "done";
 
 interface TabloModalProps {
-  tablo: Tablo | null;
-  onEdit: (updatedTablo: Tablo) => void;
+  tablo: UserTablo | null;
+  onEdit: (updatedTablo: TabloUpdate & { id: string }) => void;
   onClose: () => void;
 }
 
 export const TabloModal = ({ tablo, onClose, onEdit }: TabloModalProps) => {
-  const [editData, setEditData] = useState<Tablo | null>(tablo);
+  const [editData, setEditData] = useState<UserTablo | null>(tablo);
   const [isEditingName, setIsEditingName] = useState(false);
 
   const [creationMode, setCreationMode] = useState<"image" | "color">("color");
@@ -32,10 +32,12 @@ export const TabloModal = ({ tablo, onClose, onEdit }: TabloModalProps) => {
   const handleSaveEdit = () => {
     if (editData && onEdit) {
       // Clear the unused field based on selection
-      const updatedTablo = {
-        ...editData,
+      const updatedTablo: TabloUpdate & { id: string } = {
+        id: editData.id,
+        name: editData.name,
         //TODO: image: creationMode === "image" ? editData.image : null,
         color: creationMode === "color" ? selectedColor : null,
+        status: editData.status,
       };
       onEdit(updatedTablo);
     }
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index 7eee52f..8e2ea53 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -10,13 +10,13 @@ import {
   useDeleteTablo,
 } from "@ui/hooks/tablos";
 import { LoadingSpinner } from "@ui/components/LoadingSpinner";
-import { Tablo } from "@ui/types/tablos.types";
+import { TabloInsert, TabloUpdate, UserTablo } from "@ui/types/tablos.types";
 
 export const TabloPage = () => {
   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);
+  const [viewingTablo, setViewingTablo] = useState<UserTablo | null>(null);
+  const [deletingTablo, setDeletingTablo] = useState<UserTablo | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
   const { data: tablos, isLoading, error } = useTablosList();
@@ -39,7 +39,7 @@ export const TabloPage = () => {
   };
 
   const createNewTablo = async (
-    tabloData: Pick<Tablo, "name" | "color" | "image" | "status">
+    tabloData: Pick<TabloInsert, "name" | "color" | "image" | "status">
   ) => {
     try {
       await createTabloMutation.mutateAsync(tabloData);
@@ -110,7 +110,7 @@ export const TabloPage = () => {
     }
   };
 
-  const onEditTablo = (tablo: Tablo) => {
+  const onEditTablo = (tablo: TabloUpdate & { id: string }) => {
     updateTablo(tablo, {
       onSuccess: () => {
         closeTabloModal();
@@ -143,11 +143,11 @@ export const TabloPage = () => {
     setIsDeleting(false);
   };
 
-  const getUserRole = (tablo: Tablo) => {
+  const getUserRole = (tablo: UserTablo) => {
     return tablo.is_admin ? "Admin" : "Invité";
   };
 
-  const getRoleColor = (tablo: Tablo) => {
+  const getRoleColor = (tablo: UserTablo) => {
     return tablo.is_admin
       ? "text-blue-600 dark:text-blue-400"
       : "text-gray-500 dark:text-gray-400";
@@ -246,7 +246,7 @@ export const TabloPage = () => {
     );
   }
 
-  const renderTablo = (tablo: Tablo) => {
+  const renderTablo = (tablo: UserTablo) => {
     const isAdmin = tablo.is_admin;
 
     return (
diff --git a/ui/src/types/tablos.types.ts b/ui/src/types/tablos.types.ts
index 79b87e4..f6e0445 100644
--- a/ui/src/types/tablos.types.ts
+++ b/ui/src/types/tablos.types.ts
@@ -1,7 +1,7 @@
 import { Database } from "@ui/types/database.types";
 import { RemoveNullFromObject } from "@ui/types/removeNull";
 
-export type Tablo = RemoveNullFromObject<
+export type UserTablo = RemoveNullFromObject<
   Database["public"]["Views"]["user_tablos"]["Row"],
   | "id"
   | "access_level"
@@ -13,3 +13,8 @@ export type Tablo = RemoveNullFromObject<
   | "name"
   | "status"
 >;
+
+export type Tablo = Database["public"]["Tables"]["tablos"];
+
+export type TabloInsert = Tablo["Insert"];
+export type TabloUpdate = Tablo["Update"];