Move state change operations to parent component of generic-listing.tsx

app/[orgId]/books/page.tsx

@@ -33,11 +33,16 @@ export default function BooksPage() {
   }, []);
 
   const handleDelete = async (book: Book) => {
-    // Here you would typically make an API call to delete the book
-    // For now, we'll just simulate an API call
-    console.log("Attempting to delete", book);
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    // The actual state update will be handled by the GenericListing component
+    try {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      // Update the state after successful API call
+      setBooks((prevBooks) => prevBooks.filter((b) => b.id !== book.id));
+      return Promise.resolve();
+    } catch (error) {
+      return Promise.reject(error);
+    }
   };
 
   const handleSave = async (book: Book) => {
@@ -56,7 +61,6 @@ export default function BooksPage() {
     <>
       <GenericListing
         data={books}
-        setData={setBooks}
         columns={columns}
         title="Books"
         searchableFields={["name", "author"]}

mint/generic-listing.tsx

@@ -36,7 +36,6 @@ export interface ColumnDef<T> {
 
 interface GenericListingProps<T> {
   data: T[];
-  setData: (data: T[]) => void;
   columns: ColumnDef<T>[];
   title: string;
   searchableFields: (keyof T)[];
@@ -48,7 +47,6 @@ interface GenericListingProps<T> {
 
 export function GenericListing<T extends { id: number | string }>({
   data,
-  setData,
   columns,
   title,
   searchableFields,
@@ -119,20 +117,25 @@ export function GenericListing<T extends { id: number | string }>({
   const handleDelete = async () => {
     if (itemToDelete && onDelete) {
       try {
+        // First close the modal
+        setIsDeleteModalOpen(false);
+        setItemToDelete(null);
+
+        // Then perform the delete operation
         await onDelete(itemToDelete);
-        setData(data.filter((item) => item.id !== itemToDelete.id));
+
+        // Show success toast
         setToast({
           type: ToastType.SUCCESS,
           message: `Item has been deleted successfully.`,
         });
       } catch (error) {
+        // Show error toast
         setToast({
           type: ToastType.FAILURE,
           message: `Failed to delete item: ${error instanceof Error ? error.message : "Unknown error"}`,
         });
       }
-      setIsDeleteModalOpen(false);
-      setItemToDelete(null);
     }
   };