From 7894750d2b59e786ee5d8119e6d24de0d8081b11 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jun 2025 09:48:53 -0700
Subject: [PATCH] Fix attaching new photos in new album

---
 .../components/admin/GalleryUploader.svelte   | 23 ++++++----
 .../admin/albums/[id]/edit/+page.svelte       | 10 +++++
 src/routes/admin/albums/new/+page.svelte      | 42 ++++++++++++++++++-
 3 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/admin/GalleryUploader.svelte b/src/lib/components/admin/GalleryUploader.svelte
index 136706f..10477b2 100644
--- a/src/lib/components/admin/GalleryUploader.svelte
+++ b/src/lib/components/admin/GalleryUploader.svelte
@@ -314,15 +314,22 @@
 		// For gallery mode, selectedMedia will be an array
 		const mediaArray = Array.isArray(selectedMedia) ? selectedMedia : [selectedMedia]
 
-		// Add selected media to existing gallery (avoid duplicates)
-		// Check both id and mediaId to handle different object types
-		const currentIds = value?.map((m) => m.mediaId || m.id) || []
-		const newMedia = mediaArray.filter((media) => !currentIds.includes(media.id))
+		// Filter out duplicates before passing to parent
+		// Create a comprehensive set of existing IDs (both id and mediaId)
+		const existingIds = new Set()
+		value?.forEach((m) => {
+			if (m.id) existingIds.add(m.id)
+			if (m.mediaId) existingIds.add(m.mediaId)
+		})
+
+		// Filter out any media that already exists (check both id and potential mediaId)
+		const newMedia = mediaArray.filter((media) => {
+			return !existingIds.has(media.id) && !existingIds.has(media.mediaId)
+		})
 
 		if (newMedia.length > 0) {
-			const updatedGallery = [...(value || []), ...newMedia]
-			value = updatedGallery
-			// Only pass the newly selected media, not the entire gallery
+			// Don't modify the value array here - let the parent component handle it
+			// through the API calls and then update the bound value
 			onUpload(newMedia)
 		}
 	}
@@ -467,7 +474,7 @@
 	<!-- Image Gallery -->
 	{#if hasImages}
 		<div class="image-gallery">
-			{#each value as media, index (media.id)}
+			{#each value as media, index (`${media.mediaId || media.id || index}`)}
 				<div
 					class="gallery-item"
 					class:dragging={draggedIndex === index}
diff --git a/src/routes/admin/albums/[id]/edit/+page.svelte b/src/routes/admin/albums/[id]/edit/+page.svelte
index 07093ca..dd78a55 100644
--- a/src/routes/admin/albums/[id]/edit/+page.svelte
+++ b/src/routes/admin/albums/[id]/edit/+page.svelte
@@ -213,7 +213,11 @@
 
 			// Add photos to album via API
 			const addedPhotos = []
+			console.log('Adding photos to album:', newMedia.map(m => ({ id: m.id, filename: m.filename })))
+			
 			for (const media of newMedia) {
+				console.log(`Adding photo ${media.id} (${media.filename}) to album ${album.id}`)
+				
 				const response = await fetch(`/api/albums/${album.id}/photos`, {
 					method: 'POST',
 					headers: {
@@ -226,17 +230,23 @@
 					})
 				})
 
+				console.log(`API response for media ${media.id}:`, response.status, response.statusText)
+
 				if (!response.ok) {
 					const errorData = await response.text()
+					console.error(`Failed to add photo ${media.filename}:`, response.status, errorData)
 					throw new Error(`Failed to add photo ${media.filename}: ${response.status} ${errorData}`)
 				}
 
 				const photo = await response.json()
+				console.log('Photo added successfully:', photo)
 				addedPhotos.push(photo)
 			}
 
+			console.log('All photos added, updating local state. Added photos:', addedPhotos)
 			// Update local state with all added photos
 			albumPhotos = [...albumPhotos, ...addedPhotos]
+			console.log('Updated albumPhotos array:', albumPhotos.length, 'photos')
 
 			// Update album photo count
 			if (album._count) {
diff --git a/src/routes/admin/albums/new/+page.svelte b/src/routes/admin/albums/new/+page.svelte
index c9f044b..f730092 100644
--- a/src/routes/admin/albums/new/+page.svelte
+++ b/src/routes/admin/albums/new/+page.svelte
@@ -99,7 +99,47 @@
 
 			const album = await response.json()
 
-			// Redirect to album edit page or albums list
+			// Add selected photos to the newly created album
+			if (albumPhotos.length > 0) {
+				console.log(`Adding ${albumPhotos.length} photos to newly created album ${album.id}`)
+				
+				try {
+					const addedPhotos = []
+					for (let i = 0; i < albumPhotos.length; i++) {
+						const media = albumPhotos[i]
+						console.log(`Adding photo ${media.id} to album ${album.id}`)
+						
+						const photoResponse = await fetch(`/api/albums/${album.id}/photos`, {
+							method: 'POST',
+							headers: {
+								Authorization: `Basic ${auth}`,
+								'Content-Type': 'application/json'
+							},
+							body: JSON.stringify({
+								mediaId: media.id,
+								displayOrder: i
+							})
+						})
+
+						if (!photoResponse.ok) {
+							const errorData = await photoResponse.text()
+							console.error(`Failed to add photo ${media.filename}:`, photoResponse.status, errorData)
+							// Continue with other photos even if one fails
+						} else {
+							const photo = await photoResponse.json()
+							addedPhotos.push(photo)
+							console.log(`Successfully added photo ${photo.id} to album`)
+						}
+					}
+					
+					console.log(`Successfully added ${addedPhotos.length} out of ${albumPhotos.length} photos to album`)
+				} catch (photoError) {
+					console.error('Error adding photos to album:', photoError)
+					// Don't fail the whole creation - just log the error
+				}
+			}
+
+			// Redirect to album edit page
 			goto(`/admin/albums/${album.id}/edit`)
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to create album'