fix: collection edit selected book

Author: agmmtoo

components/books/book-select-card.tsx

@@ -14,12 +14,12 @@ import clsx from 'clsx'
 
 export const SelectedBook = memo<{
   book: Book
-  onDeselect?: (bookID: string) => void
+  onDeselect?: (book: Book) => void
   disabled?: boolean
 }>(({ book, onDeselect, disabled }) => {
   return (
     <div
-      onClick={() => (disabled ? null : onDeselect?.(book.id))}
+      onClick={() => (disabled ? null : onDeselect?.(book))}
       className={clsx(
         'shrink-0 relative left-0 transition-all not-first-of-type:-ml-12',
         'hover:transition-all hover:-translate-y-4 hover:transform-none',
@@ -55,7 +55,7 @@ SelectedBook.displayName = 'SelectedBook'
 // Memoize the card component to prevent unnecessary re-renders
 export const UnselectedBook = memo<{
   book: Book
-  onSelect?: (bookID: string) => void
+  onSelect?: (book: Book) => void
   disabled?: boolean
 }>(({ book, onSelect, disabled }) => {
   return (
@@ -65,9 +65,9 @@ export const UnselectedBook = memo<{
           'cursor-pointer transition-all duration-200 hover:shadow-md',
           disabled && 'opacity-50 cursor-not-allowed'
         )}
-        onClick={disabled ? undefined : () => onSelect?.(book.id)}
+        onClick={disabled ? undefined : () => onSelect?.(book)}
       >
-        <CardHeader className="pb-3 text-center">
+        <CardHeader className="text-center">
           <ViewTransition name={book.id}>
             <Image
               src={book.cover ?? '/book-placeholder.svg'}

components/collections/FormManageCollectionBooks.tsx

@@ -13,44 +13,35 @@ export const FormManageCollectionBooks: React.FC<{
   onSubmitAction: (v: string[]) => Promise<string>
   books: Book[]
 }> = ({ initialBooks, initialBookIDs, onSubmitAction, books }) => {
-  const [selectedBookIDs, setSelectedBookIDs] = useState<Set<string>>(
-    new Set(initialBookIDs)
+  const [selectedBooks, setSelectedBooks] = useState<Map<string, Book>>(
+    new Map(initialBooks.map((book) => [book.id, book]))
   )
 
-  // Combine initial books with fetched books, avoiding duplicates
-  const allBooks = useMemo(() => {
-    const initialBookIds = new Set(initialBooks.map((b) => b.id))
-    const uniqueFetchedBooks = books.filter(
-      (book) => !initialBookIds.has(book.id)
-    )
-    return initialBooks.concat(uniqueFetchedBooks)
-  }, [initialBooks, books])
-
-  const selectedBooks = useMemo(
-    () => allBooks.filter((book) => selectedBookIDs.has(book.id)),
-    [allBooks, selectedBookIDs]
+  const selectedBooksArray = useMemo(
+    () => Array.from(selectedBooks.values()),
+    [selectedBooks]
   )
 
   const unselectedBooks = useMemo(
-    () => allBooks.filter((book) => !selectedBookIDs.has(book.id)),
-    [allBooks, selectedBookIDs]
+    () => books.filter((book) => !selectedBooks.has(book.id)),
+    [books, selectedBooks]
   )
 
-  const toggleBookSelection = (bookId: string) => {
+  const toggleBookSelection = (book: Book) => {
     startTransition(() =>
-      setSelectedBookIDs((prev) => {
-        const next = new Set(prev)
-        if (next.has(bookId)) {
-          next.delete(bookId)
+      setSelectedBooks((prev) => {
+        const next = new Map(prev)
+        if (next.has(book.id)) {
+          next.delete(book.id)
         } else {
-          next.add(bookId)
+          next.set(book.id, book)
         }
         return next
       })
     )
   }
 
-  const selectedBookIDsArray = Array.from(selectedBookIDs)
+  const selectedBookIDsArray = selectedBooksArray.map((book) => book.id)
   const hasSameNumber = initialBookIDs.length === selectedBookIDsArray.length
   const hasEveryBook = initialBookIDs.every((id) =>
     selectedBookIDsArray.includes(id)
@@ -63,7 +54,7 @@ export const FormManageCollectionBooks: React.FC<{
   }
 
   const deselectAll = () => {
-    setSelectedBookIDs(new Set())
+    setSelectedBooks(new Map())
   }
 
   return (
@@ -72,21 +63,21 @@ export const FormManageCollectionBooks: React.FC<{
         <Button
           variant="outline"
           onClick={deselectAll}
-          disabled={selectedBookIDs.size === 0}
+          disabled={selectedBooks.size === 0}
           className="h-full"
         >
           <X className="mr-2 h-4 w-4" />
-          Deselect All ({selectedBookIDs.size})
+          Deselect All ({selectedBooks.size})
         </Button>
         <Button onClick={onSubmit} className="h-full" disabled={isNoChange}>
           <Plus className="mr-2 h-4 w-4" />
-          Save Selection ({selectedBookIDs.size})
+          Save Selection ({selectedBooks.size})
         </Button>
       </div>
 
-      {selectedBooks.length > 0 && (
+      {selectedBooksArray.length > 0 && (
         <div className="flex items-end overflow-x-scroll p-6 isolate">
-          {selectedBooks.map((b) => (
+          {selectedBooksArray.map((b) => (
             <SelectedBook
               key={b.id}
               book={b}