Hot fix 2024 45 2 (#1481)

* Fixing bugs around deleting image and modifying only the caption

* fixes
- caption errors on edit
- console errors for handleUpload

* fix for not editing images

* fixing weird caption issue

* ok edit fixed

* Fix cutoff posts for empty images

---------

Co-authored-by: ushahidlee <[email protected]>

Author: tuxpiper

apps/web-mzima-client/src/app/post/post-details/post-details.component.html

@@ -163,7 +163,9 @@ <h3>{{ field.label }}</h3>
                 </div>
               </ng-container>
 
-              <ng-container *ngIf="field.input === 'upload' && field.value[0].url">
+              <ng-container
+                *ngIf="field.input === 'upload' && field.value.length === 1 && field.value[0].url"
+              >
                 <span *ngIf="!field.value[0].value">-</span>
                 <div class="post__media">
                   <img *ngIf="field.value[0].value" [src]="field.value[0].url" [alt]="post.title" />

apps/web-mzima-client/src/app/post/post-details/post-details.component.ts

@@ -188,16 +188,18 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
         if (Array.isArray(mediaField.value)) {
           const mediaFiles: MediaFile[] = [];
           for await (const mediaValue of mediaField.value) {
-            const media = await lastValueFrom(this.mediaService.getById(mediaValue.value!));
-            const mediaFile: MediaFile = new MediaFile(
-              media.result,
-              media.result.original_file_url,
-            );
-            mediaFile.id = mediaValue.id;
-            mediaFile.value = media.result.id;
-            mediaFile.caption = media.result.caption;
-            mediaFile.status = MediaFileStatus.READY;
-            mediaFiles.push(mediaFile);
+            if (mediaValue.value) {
+              const media = await lastValueFrom(this.mediaService.getById(mediaValue.value));
+              const mediaFile: MediaFile = new MediaFile(
+                media.result,
+                media.result.original_file_url,
+              );
+              mediaFile.id = mediaValue.id;
+              mediaFile.value = media.result.id;
+              mediaFile.caption = media.result.caption;
+              mediaFile.status = MediaFileStatus.READY;
+              mediaFiles.push(mediaFile);
+            }
           }
           mediaField.value = mediaFiles;
         } else if (mediaField.value?.value) {

apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts

@@ -359,7 +359,7 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   }
 
   private async handleUpload(key: string, value: any) {
-    if (!value[0].value) return;
+    if (!value?.[0]?.value) return;
     try {
       const response: any = await lastValueFrom(this.mediaService.getById(value[0].value));
       this.form.patchValue({
@@ -662,23 +662,27 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
                       this.form.value[field.key]?.id,
                     );
                     await lastValueFrom(deleteObservable);
-                    value.value = null;
+                    value.value = [];
                   } catch (error: any) {
                     throw new Error(`Error deleting file: ${error.message}`);
                   }
-                } else if (originalValue?.value[0].caption !== value.value?.caption) {
+                } else if (
+                  originalValue?.value?.length > 0 &&
+                  originalValue.value[0].caption !== value.value.caption
+                ) {
                   try {
                     const captionObservable = await this.mediaService.updateCaption(
-                      originalValue.value[0].id,
+                      originalValue.value[0].value,
                       value.value.caption,
                     );
                     await lastValueFrom(captionObservable);
-                    value.value = [originalValue.value[0].id];
+                    value.value = [originalValue.value[0].value];
                   } catch (error: any) {
                     throw new Error(`Error updating caption: ${error.message}`);
                   }
                 } else {
-                  value.value = this.form.value[field.key]?.id || [];
+                  if (this.form.value[field.key]) value.value = [this.form.value[field.key]?.id];
+                  else value.value = [];
                 }
                 break;
               case 'image':