My application is designed to add an object to a Firebase database based on user ID. However, I am facing an issue where the process only works when I manually refresh the page. If I navigate to the page through the app's navigation, it shows that the user ID is undefined.
In my auth.service.ts file:
import { Router } from '@angular/router';
import { User } from './interface/user';
import { Observable, Subject } from 'rxjs';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user: Observable<User | null>;
private logInErrorSubject = new Subject<string>();
private signUpErrorSubject = new Subject<string>();
constructor(public afAuth: AngularFireAuth, private router: Router) {
this.user = this.afAuth.authState;
}
getUser(){
return this.user;
}
SignUp(email: string, password: string) {
this.afAuth
.auth
.createUserWithEmailAndPassword(email, password)
.then(res => {
console.log('Successful Sign Up', res);
this.router.navigate(['/welcome']);
})
.catch (error => this.signUpErrorSubject.next(error.message));
console.log(this.signUpErrorSubject);
}
Logout() {
this.afAuth.auth.signOut();
}
login(email: string, password: string) {
this.afAuth
.auth.signInWithEmailAndPassword(email, password)
.then(res => {
console.log('Successful Login', res);
this.router.navigate(['/welcome']);
}
)
.catch(error => this.logInErrorSubject.next(error.message));
}
public getLoginErrors(): Subject<string> {
return this.logInErrorSubject;
}
public getSignUpErrors(): Subject<string> {
return this.signUpErrorSubject;
}
}
In temperature.component.ts :
import { AuthService } from './../auth.service';
import { Weather } from './../interface/weather';
import { Observable } from 'rxjs';
import { WeatherService } from './../temp.service';
import { Component, OnInit, } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-temperatures',
templateUrl: './temperatures.component.html',
styleUrls: ['./temperatures.component.css']
})
export class TemperaturesComponent implements OnInit {
constructor(private authService: AuthService, private route: ActivatedRoute, private weatherService: WeatherService) {}
userId: string;
likes = 0;
temperature;
image;
city;
tempData$: Observable<Weather>;
errorMessage: string;
hasError: boolean = false;
saveBtn: string = "Save";
addLikes() {
this.likes++;
}
saveCity() {
if(this.userId)
this.weatherService.addCity(this.userId, this.city, this.temperature);
}
ngOnInit() {
this.authService.user.subscribe(user => {
if (user) {
this.userId = user.uid;
}
});
//this.temperature = this.route.snapshot.params.temp;
this.city = this.route.snapshot.params.city;
this.tempData$ = this.weatherService.searchWeatherData(this.city);
this.tempData$.subscribe(
data => {
console.log(data);
this.temperature = data.temperature;
this.image = data.image;
},
error => {
console.log(error.message);
this.hasError = true;
this.errorMessage = error.message;
}
);
}
}
It seems like my subscription to the userID is not working as expected. Any help would be greatly appreciated. Thank you in advance!