Ionic5 FavoriteService that doesn’t duplicate - ionic5

Question

I’ve been following tutorials to create an Ionic5 StarWars app and although it’s almost completed, have ran into trouble understanding how I can get ‘favorite’ star button on all tabs (ie) Films, People, Planets. I'm not very familiar with Ionic5 and trying to figure out how to add favorite buttons across all tabs. Have done a lot of research and spent time trying to get this to work.
So far there is only a function to ‘favorite’ films and not people or planets. When I try to replicate the code for Films to extend to people and planets, I can’t and get errors that duplication is not allowed.
Would really appreciate any help with this, as I want to get all - Films, People and Planets to be starred as favorites. Thanks for any help with this.
The code in favorite.service.ts is as follows:-
import { Injectable } from '#angular/core';
import { Storage } from '#ionic/storage';
const STORAGE_KEY = 'favoriteFilms';
#Injectable({
providedIn: 'root'
})
export class FavoriteService {
constructor(private storage: Storage) {
}
getAllFavoriteFilms() {
return this.storage.get(STORAGE_KEY);
}
isFavorite(filmId) {
return this.getAllFavoriteFilms().then(result => {
return result && result.indexOf(filmId) !== -1;
});
}
favoriteFilm(filmId) {
return this.getAllFavoriteFilms().then(result => {
result = result || [];
result.push(filmId);
return this.storage.set(STORAGE_KEY, 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);
}
})
}
}
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:-
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/planets"></ion-back-button>
</ion-buttons>
<ion-title>{{ planet?.title }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="unfavoritePlanet()" *ngIf="isFavorite">
<ion-icon name="star" slot="icon-only" color="secondary"></ion-icon>
</ion-button>
<ion-button (click)="favoritePlanet()" *ngIf="!isFavorite">
<ion-icon name="star-outline" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<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 same two errors as outlined above (Duplicate Function Implementation) ts.2393 in favorite.service.ts, but now only get 2 errors, instead of 4. Both errors are due to repetition of 'isFavorite(filmId)' and 'isFavorite(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] ~~~~~~~~~~