Waiting for data to be retrieved from local storage

Question

When the gallery is loaded in my gallery app, a functioned is called to check whether the current user has liked an image in an array of images. If the user has liked the image, a solid heart icon is displayed on top of the image. If the hasn't liked the image, a heart outline icon is displayed.

Within the function, we get the current users index in an array of users. This information is retrieved from a user object which is stored in the browsers local storage. The problem I am having is that the function is called before the user data is retrieved from the local storage and I'm not sure how to get around this problem?

Here is the relevant html from the gallery-list component:

<div class="gallery-container">
    <div
      class="image-container"
      *ngFor="let image of galleryList">
      <div *ngIf="checkLike(image.imagePath)" class="heart-icon-container">
        <ion-icon name="heart" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
      </div>
      <div *ngIf="!checkLike(image.imagePath)" class="heart-icon-container">
        <ion-icon name="heart-outline" class="heart-icon" (click)="updateLike(image.imagePath)"></ion-icon>
      </div>
    </div>
</div>

Here is the relevant code from the gallery-list ts file:

  currUsersIndex: number;

ngOnInit() {

    this.currUsersIndex = this.usersService.getCurrUserArrIndex();

}



 checkLike(imageUrl: string): boolean {
    const users = this.usersService.getUsers();

    if(this.isLoggedIn) {
      const FavouritesList = users[this.currUsersIndex].likes;

      if(FavouritesList.includes(imageUrl)) {
          return true;
      } else {
          return false;
      }
  }
    }

Finally, this is where the users index is retrieved from the users.service file:

private users: User[] = [];
 getCurrUserArrIndex() {

        const usersEmail = this.getCurrentUser().email;

        const users = this.getUsers();

        const usersIndex = users.findIndex(user => user.email === usersEmail);

        return usersIndex;

        }


 getCurrentUser() {

    const userData: {

         email: string,
         id: string,
         _token: string,
         _tokenExpirationDate: string

     } = JSON.parse(localStorage.getItem('authUserData')); 

 return userData;

 }



    getUsers() {
        return this.users.slice();
    }

Please note, the users array is initially set to empty but it is set with the users from a firebase database when the app initializes.

The error message I am receiving in the console is: "can't access property "likes", users[this.currUsersIndex] is undefined"

Answer 1

I think, the issue here is that this.currUsersIndex is not set when you call checkLike() in the HTML.

Alternatively what i could recommend you is that, define a boolean variable in your component as,

checkLike = false;

and then call the function checkLike() after setting currUsersIndex

ngOnInit() {
    this.currUsersIndex = this.usersService.getCurrUserArrIndex();
    this.checkLike();
}

checkLike(imageUrl: string): boolean {
    const users = this.usersService.getUsers();
    if(this.isLoggedIn) {
      const FavouritesList = users[this.currUsersIndex].likes;
      if(FavouritesList.includes(imageUrl)) {
          this.checkLike = true;
      } else {
          this.checkLike = false;
     }
  }

You must be already having the imageUrl in the component.ts just replace with that.

Answer 2

You don't need to separate things IMO. You can update your code to this, this will be error-proof.

checkLike(imageUrl: string): boolean {
    const user = this.usersService.getCurrentUser();

    if(user && user.likes) {
      const FavouritesList = user.likes;
      return FavouritesList.includes(imageUrl);
    }

    return false
}

getCurrentUser() {
  const userData: {
        email: string,
        id: string,
        _token: string,
        _tokenExpirationDate: string
    } = JSON.parse(localStorage.getItem('authUserData')); 

  const userEmail = userData.email;

  const users = this.getUsers();
  return users.find(user => user.email === usersEmail);
}