Currently working on developing a navigation component for an Angular application. The code snippet below shows my current progress. I am looking to avoid the common issue of having multiple subscriptions within each other, known as the multiple subscription anti-pattern. Having trouble with the RxJs syntax and figuring out whether to use forkJoin, mergeMap, etc.
How can I refactor this code to eliminate the need for nested subscriptions?
This is what I currently have, which functions but contains a subscribe within a subscribe:
@Component({
selector: 'ehrcc-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
applicationName: string = 'AppName';
userDisplayName: string = '';
isAuthorizedUser: boolean = false;
isAdminUser: boolean = false;
groupsList: MemberGroup[] = [];
constructor(private userService: UserService,
private auditService: UserAuditService,
private router: Router) { }
ngOnInit() {
this.getDisplayName();
this.userService.getGroupMembershipsForUser().subscribe(members => {
this.groupsList = members;
for (let g of this.groupsList){
if (g.id === this.userService.usersGroupId){
this.isAuthorizedUser = true;
this.router.navigate(['/workItem']);
}
if (g.id === this.userService.adminGroupId){
this.isAdminUser = true;
}
}
this.logUserInfo(); <---- ANTI-PATTERN
});
}
getDisplayName(){
this.userService.getSignedInAzureADUser().subscribe(
(user) => this.userDisplayName = user.displayName,
(error: any) => {
return console.log(' Error: ' + JSON.stringify(<any>error));
});
}
logUserInfo(){
var audit = new UserAudit();
audit.Application = this.applicationName;
audit.Environment = "UI";
audit.EventType= "Authorization";
audit.UserId = this.userDisplayName;
audit.Details = ` User Is Authorized: ${this.isAuthorizedUser}, User Is Admin: ${this.isAdminUser}`;
this.auditService.logUserInfo(audit)
.subscribe({
next: (id)=> console.log('Id created: '+ id),
error: (error: any) => console.log(' Error: ' + JSON.stringify(<any>error) )
});
}
}