fix(album): improving the creation/update workflow

frontend/src/views/creators/AboutCreator.vue

@@ -214,11 +214,11 @@ async function fetchAlbumData() {
   console.log('in fetchAlbumData()');
   if (!brandingStore.value?.id) return;
 
-  albumId.value = brandingStore.value.id;
+  const creatorId = brandingStore.value.id;
 
   try {
     // Try to get the album
-    const response = await client.get(`/api/albums/${albumId.value}`);
+    const response = await client.get(`/api/albums/${creatorId}`);
 
     if (response.data && response.data.photos) {
       // Store original photos for comparison
@@ -230,15 +230,15 @@ async function fetchAlbumData() {
         isProcessing: false,
         isUploading: false,
       }));
+      albumId.value = creatorId;
     } else {
       // Initialize with empty array instead of empty slots
+      console.log('WOW! You found how to get here! Take a look at the stack!');
       photos.value = [];
       originalPhotos.value = [];
     }
-  } catch (error) {
-    // Album might not exist yet, which is fine
-    console.log("Album might not exist yet:", error);
-    // Initialize with empty array instead of empty slots
+  }
+  catch (error) {
     photos.value = [];
     originalPhotos.value = [];
   }
@@ -302,46 +302,48 @@ async function saveChanges() {
     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 !photosOriginalUrls.includes(originalPhoto.originalUrl);
     });
+    const newImages = photos.value.filter(photo => photo && photo.image && photo.image.originalUrl.startsWith('data:'));
 
+    console.log('originalPhotos', originalPhotos.value);
+    console.log('photos', photos.value);
     console.log('deletedPhotos', deletedPhotos);
+    console.log('newImages', newImages);
 
     // Save album photos if they've changed
     if (photos.value.length > 0 || deletedPhotos.length > 0) {
-      // Create or update the album
-      const albumId = brandingStore.value.id;
+      console.log('We got pending changes');
 
-      try {
-        // Try to create the album first (it will fail if it already exists)
-        await client.post('/api/albums', {
-          albumId: albumId,
-          title: `${brandingStore.value.name}'s Album`,
-          description: "Photo album for the creator"
-        });
-      } catch (error) {
-        // Album might already exist, which is fine
-        console.log("Album might already exist:", error);
+      // Create the Album if we do not have one yet
+      if (albumId.value == null) {
+        console.log('We do not have an album yet')
+        try {
+          await client.post('/api/albums', {
+            albumId: brandingStore.value.id,
+            title: `${brandingStore.value.name}'s Album`,
+            description: "Photo album for the creator"
+          });
+          albumId.value = brandingStore.value.id;
+        } catch (error) {
+          // Album might already exist, which is fine
+          console.log("Couldn't create an Album", error);
+        }
       }
 
       // Delete removed photos
       for (const photo of deletedPhotos) {
         try {
-          await client.delete(`/api/albums/${albumId}/photos/${photo.id}`);
+          await client.delete(`/api/albums/${albumId.value}/photos/${photo.id}`);
         } catch (error) {
           console.error("Error deleting photo:", error);
         }
       }
 
       // Now add or update photos
-      const newImages = photos.value.filter(photo => photo && photo.image && photo.image.originalUrl.startsWith('data:'));
-      console.log('newImages', newImages);
       for (let i = 0; i < newImages.length; i++) {
         const imageData = newImages[i];
         console.log('Image Data to be uploaded:', imageData);
@@ -356,7 +358,7 @@ async function saveChanges() {
 
         formData.append('file', file);
 
-        await client.post(`/api/albums/${albumId}/photos`, formData, {
+        await client.post(`/api/albums/${albumId.value}/photos`, formData, {
           headers: {
             'Content-Type': 'multipart/form-data'
           },