Styling and Refinements

Styling and Refinements

The application is mostly done now, all we have left to do is a few final refinements and style tweaks.

Adding Delete Functionality

Once again, we are going to use the same strategy as we did in Quicklists to delete photos from this application. We will add a method to support deleting and then trigger that delete using sliding list items.

However, there is one interesting aspect to this and that is: in the case of the application running natively, the photo will be stored in the native filesystem. We can just delete the entry from our StorageService using the Ionic Storage API, but that would only remove the path to that photo. The photo itself will still exist on the device (we can just no longer access it). To properly clean up after ourselves, we are going to again use the Filesystem API to remove the photo on the device if it exists.

Action

Add the following source to the PhotoService:

  remove$ = new Subject<string>();

Action

Add the following reducer to the PhotoService:

    this.remove$
      .pipe(
        concatMap((name) => {
          if (this.platform.is('capacitor')) {
            return from(
              Filesystem.deleteFile({
                path: name,
                directory: Directory.Data,
              }),
            ).pipe(
              catchError(() => EMPTY),
              map(() => name),
            );
          }

          return of(name);
        }),
        takeUntilDestroyed(),
      )
      .subscribe((name) =>
        this.photos.update((photos) =>
          photos.filter((photos) => photos.name !== name),
        ),
      );

This is similar in concept to our add$ reducer. Our remove$ source will be triggered with the name of the photo. If we are not running natively then we just simply pass that name through our concatMap by returning a stream of the name value.

If we are running natively, we create a stream that emits once the deleteFile call resolves, and then we map that back to the name of the photo so that we can still do our normal clean up where we also remove that particular photo from our local state.

Now we are going to modify our PhotoListComponent to use sliding list items and to emit an event when an item is selected to be deleted. Remember that we want to handle the actual deletion in the parent HomeComponent file which is why we will create a delete output on our dumb component, rather than just having the dumb component delete the item directly (because then it wouldn’t be a dumb component anymore!).

Action

Add the following output to the PhotoListComponent:

delete = output<string>();

I will paste the code for updating to use the ion-item-sliding component in just a moment. However, this would be a good exercise if you want to try and do it for yourself (it is the same as what we did in the Quicklists application). Use the ion-item-sliding component (refer to the documentation if you need) to add a button beneath the photo items. Also trigger the delete output that we just added when this button is clicked.

Click here to reveal solution

Solution

Action

Modify the PhotoListComponent template to reflect the following:

    <ion-list lines="none">
      @for (photo of photoList(); track photo.name) {
        <ion-item-sliding>
          <ion-item>
            <img [src]="photo.safeResourceUrl" />
            <ion-badge slot="end" color="light">
              {{ photo.daysAgo }}
            </ion-badge>
          </ion-item>
          <ion-item-options side="end">
            <ion-item-option (click)="delete.emit(photo.name)" color="danger">
              <ion-icon name="trash" slot="icon-only"></ion-icon>
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
      }
    </ion-list>