Styling and Refinements

Styling and Refinements

Now we just have a few remaining loose ends to finish up — there are a few minor changes we are going to make just to provide a better experience in the application, and to make it look a little nicer.

Adding Titles and Comments

The first thing we are going to do is display a bar below each GIF that will show the title of the GIF, along with how many comments it has, and a link to that GIF on Reddit.

Action

Add the following beneath the ion-item in the GifListComponent:

        <ion-list-header>
          <ion-label> {{ gif.title }} </ion-label>
          <ion-button (click)="showComments(gif)">
            <ion-icon name="chatbubbles"></ion-icon> {{ gif.comments }}
          </ion-button>
        </ion-list-header>

We are binding to a showComments method here that we haven’t implemented yet. This is another good change to try and implement this yourself before we look at my solution. This method should use the Capacitor Browser plugin to launch the link to view this post on Reddit.

Click here to reveal solution

Solution

Action

Run the following command:

npm install @capacitor/browser

Action

Create a showComments method in the class for GifListComponent:

  showComments(gif: Gif) {
    Browser.open({
      toolbarColor: '#fff',
      url: `https://reddit.com/${gif.permalink}`,
      windowName: '_system',
    });
  }

This should have things looking pretty good! We’re still going to tackle just one more challenge though.

Handling Errors

There is a very high chance the user will encounter an error whilst using this application. We search for gifs as soon as they enter a search term, so if they were in the process of writing chemicalreactiongifs and they stopped at chemicalre we are going to fail to get any gifs because that subreddit doesn’t exist. Likewise if they accidentally made a typo or something.

So, we are going to add some proper error handling. We’ve already added some state for our error in the RedditService now we just need to set it in there.

Action

Add an error$ source:

  private error$ = new Subject<string | null>();

Action

Add a reducer for error$:

    this.error$.pipe(takeUntilDestroyed()).subscribe((error) =>
      this.state.update((state) => ({
        ...state,
        error,
      }))
    );

Action

Add the following method to the RedditService:

  private handleError(err: HttpErrorResponse) {
    // Handle specific error cases
    if (err.status === 404 && err.url) {
      this.error$.next(`Failed to load gifs for /r/${err.url.split('/')[4]}`);
      return;
    }

    // Generic error if no cases match
    this.error$.next(err.statusText);
  }