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] ~~~~~~~~~~