fix(album): after updating the album, the photos are dissapearing from the page

frontend/src/views/creators/AboutCreator.vue

@@ -157,12 +157,12 @@ const canSave = computed(() => {
 });
 
 const thumbnailUrls = computed(() => {
-  return photos.value.map(photo => photo.thumbnailUrl)
+  return photos.value.map(photo => photo.image.thumbnailUrl)
 })
 
 // Add this computed property to get the original image URLs
 const originalUrls = computed(() => {
-  return photos.value.map(photo => photo.originalUrl);
+  return photos.value.map(photo => photo.image.originalUrl);
 });
 
 // Computed property to check if there are images
@@ -211,6 +211,7 @@ function toggleEditMode() {
 
 // Fetch album data
 async function fetchAlbumData() {
+  console.log('in fetchAlbumData()');
   if (!brandingStore.value?.id) return;
 
   albumId.value = brandingStore.value.id;
@@ -223,7 +224,12 @@ async function fetchAlbumData() {
       // Store original photos for comparison
       originalPhotos.value = response.data.photos;
       // Extract photo URLs from the album photos
-      photos.value = response.data.photos;
+      photos.value = response.data.photos.map(photo => ({
+        file: null,
+        image: photo,
+        isProcessing: false,
+        isUploading: false,
+      }));
     } else {
       // Initialize with empty array instead of empty slots
       photos.value = [];
@@ -295,13 +301,18 @@ async function saveChanges() {
     description.value = editableDescription.value;
     videoUrl.value = extractVideoId(editableVideoUrl.value) || "";
 
-
     // Check for deleted photos
+    console.log('originalPhotos', originalPhotos.value);
+    console.log('photos', photos.value);
+    const photosOriginalUrls = photos.value.map(photo => photo.image.originalUrl);
+    console.log('photosThumbnailUrls', photosOriginalUrls);
     const deletedPhotos = originalPhotos.value.filter(originalPhoto => {
       // If the photo URL is not in the current images array, it was deleted
-      return !photos.value.includes(originalPhoto.thumbnailUrl);
+      return !photosOriginalUrls.includes(originalPhoto.originalUrl);
     });
 
+    console.log('deletedPhotos', deletedPhotos);
+
     // Save album photos if they've changed
     if (photos.value.length > 0 || deletedPhotos.length > 0) {
       // Create or update the album
@@ -329,30 +340,19 @@ async function saveChanges() {
       }
 
       // Now add or update photos
-      for (let i = 0; i < photos.value.length; i++) {
+      const newImages = photos.value.filter(photo => photo && photo.image && photo.image.originalUrl.startsWith('data:'));
-        const imageData = photos.value[i];
+      console.log('newImages', newImages);
+      for (let i = 0; i < newImages.length; i++) {
+        const imageData = newImages[i];
         console.log('Image Data to be uploaded:', imageData);
-        if (imageData && imageData.image && imageData.image.originalUrl.startsWith('data:')) {
         // This is a new image that needs to be uploaded
         const photoId = crypto.randomUUID();
         const formData = new FormData();
 
-          // Extract MIME type from data URL
-          const mimeMatch = imageData.image.originalUrl.match(/^data:(.*?);base64,/);
-          if (!mimeMatch) {
-            console.warn(`Invalid data URL at index ${i}`);
-            continue;
-          }
-
-          const mimeType = mimeMatch[1];
-
-          // Determine file extension from MIME type
-          const extension = mimeType.split('/')[1]; // e.g., "jpeg", "png", "webp", etc.
-
         // Convert data URL to file
         const response = await fetch(imageData.image.originalUrl);
         const blob = await response.blob();
-          const file = new File([blob], `photo-${i}.${extension}`, { type: mimeType });
+        const file = new File([blob], imageData.file.name, { type: imageData.file.type });
 
         formData.append('file', file);
 
@@ -364,7 +364,7 @@ async function saveChanges() {
             photoId: photoId
           }
         });
-        }
+
       }
 
       // Refresh album data after changes

frontend/src/views/creators/AlbumEditor.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useI18n } from 'vue-i18n';
 import { v7 } from 'uuid';
 import draggable from 'vuedraggable';
@@ -78,12 +78,7 @@ const localImages = ref([]);
 
 onMounted(() => {
   // Initialize local images with IDs and states
-  localImages.value = props.images.map((image) => ({
+  localImages.value = props.images;
-    image: image,
-    file: null,
-    isProcessing: false,
-    isUploading: false,
-  }));
 });
 
 watch(localImages, (newVal) => {