Question re. services and components in Ionic5

Hi, I posted this question earlier but didn’t provide enough information and have re-formatted the question to make it better to understand what I am asking. I am getting 2 errors in ‘favorite.service.ts’ a a result of duplication of 'isFavorite(filmId) and ‘isFavorite(planetId)’. As I am not that familiar with angular, or indeed typescript, I would appreciate any help with what I should do. What I am trying to do is have ‘favorite’ (star) button across all tabs on the StarWars Ionic5 app (Films, People, Planet) but at present can only do it for Films. So I am trying to get it work but having issues with it.

The code in favorite.service.ts is as follows:-

This is exactly how I tried to import the service into the components:-

    import { Injectable } from '@angular/core';
    import { Storage } from '@ionic/storage';
    import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

    const STORAGE_KEY = 'favoriteFilms';
    const STORAGE_KEY1 = 'favoritePlanets';

    @Injectable({
      providedIn: 'root'
    })
    export class FavoriteService {

      constructor(private storage: Storage) {
      }

      getAllFavoriteFilms() {
        return this.storage.get(STORAGE_KEY);
      }

      getAllFavoritePlanets() {
        return this.storage.get(STORAGE_KEY1);
      }
     
      isFavorite(filmId) {
        return this.getAllFavoriteFilms().then(result => {
          return result && result.indexOf(filmId) !== -1;
        });
      }

      isFavorite(planetId) {
        return this.getAllFavoritePlanets().then(result => {
          return result && result.indexOf(planetId) !== -1;
        });
      }


       favoriteFilm(filmId) {
        return this.getAllFavoriteFilms().then(result => {
          result = result || [];
          result.push(filmId);
          return this.storage.set(STORAGE_KEY, result);
        });
      }

      favoritePlanet(planetId) {
        return this.getAllFavoriteFilms().then(result => {
          result = result || [];
          result.push(planetId);
          return this.storage.set(STORAGE_KEY1, result);
        });
      }

      unfavoriteFilm(filmId) {
        return this.getAllFavoriteFilms().then(result => {
          if (result) {
            var index = result.indexOf(filmId);
            result.splice(index, 1);
            return this.storage.set(STORAGE_KEY, result);
          }
        })
      }

      unfavoriteFilm(planetId) {
        return this.getAllFavoritePlanets().then(result => {
          if (result) {
            var index = result.indexOf(planetId);
            result.splice(index, 1);
            return this.storage.set(STORAGE_KEY1, result);
          }
        })
      }
    }

This is the error message I am getting (x4 times) for each duplication:-

>  Duplicate function implementation. ts(2393)

The components page (planet-details.page.ts) is as follows:-
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';
import { EmailComposer } from '@ionic-native/email-composer/ngx';
import { FavoriteService } from 'src/app/services/favorite.service';

@Component({
  selector: 'app-planet-details',
  templateUrl: './planet-details.page.html',
  styleUrls: ['./planet-details.page.scss'],
})
export class PlanetDetailsPage implements OnInit {

  planet: any;
  isFavorite = false;
  planetId = null;
 
  constructor(private activatedRoute: ActivatedRoute, private api: ApiService,
    private emailComposer: EmailComposer, private favoriteService: FavoriteService) { }
 
  ngOnInit() {
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    this.api.getPlanet(id).subscribe(res => {
      this.planet = res;
      console.log(res);
    });
  }
  favoritePlanet() {
    this.favoriteService.favoritePlanet(this.planetId).then(() => {
      this.isFavorite = true;
    });
  }

  unfavoritePlanet() {
    this.favoriteService.unfavoritePlanet(this.planetId).then(() => {
      this.isFavorite = false;
    });
  }

  sharePlanet() {
    let email = {
      to: "",
      subject: `I love this planet: ${this.planet.name}`,
      body: `Do you like it?<br><br>"${this.planet.opening_crawl}"`,
      isHtml: true
    };

    this.emailComposer.open(email);
  }

}
 
> 
> The planet-details.page.html is as follows:-

{{ planet?.title }}
<ion-content padding>
  <ion-card *ngIf="planet" class="planet-card">
    <ion-item class="planet-card" lines="none">
      <ion-icon name="cloudy-night-outline" slot="start"></ion-icon>
      Climate for {{ planet.name }}: {{ planet.climate }}
    </ion-item> 

    <ion-item class="planet-info" lines="none">
      <ion-icon name="planet" slot="start"></ion-icon>
      Rotation Period: {{ planet.rotation_period }}
    </ion-item> 
     
    <ion-item class="planet-info1" lines="none">
      <ion-icon name="people-outline" slot="start"></ion-icon>
      Population: {{ planet.population }}
    </ion-item>
  </ion-card>
 
<ion-button expand="full" (click)="sharePlanet()">Share by Email</ion-button>

</ion-content>





The two errors I am getting are basically due to duplication of 'isFavorite' (for both filmId and planetId).

    > ERROR in src/app/services/favorite.service.ts:24:3 - error TS2393: Duplicate function implementation. [ng] [ng] 24
>     isFavorite(filmId) { [ng] ~~~~~~~~~~ [ng]
>     src/app/services/favorite.service.ts:30:3 - error TS2393: Duplicate function implementation. [ng] [ng] 30 isFavorite(planetId) { [ng] ~~~~~~~~~~

Hi, function overloading differs in typescript from other “traditional” languages.

Here you can read about function overloading in typescript.

2 Likes

Very many thanks for your help. I really appreciate it and will make it much easier now to solve the issues with the services and components.