gothinkster / angular-realworld-example-app

Exemplary real world application built with Angular

Home Page:https://angular.realworld.how/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

duplicate navbar once the user is logged in

JavaZakariae opened this issue · comments

image

The <ul *appShowAuthed="true" class="nav navbar-nav pull-xs-right"> is renderer many times.
To reproduce the bug:

  • After the user is logged in, and the user click successively on new article->Home ->new article->Home
    The nav bar is duplicated as shown in the image.

Is the bug related to the fact that we are not unsubscribing from the observable:

import {
  Directive,
  Input,
  OnInit,
  TemplateRef,
  ViewContainerRef,
} from "@angular/core";
import { UserService } from "../core/services/user.service";

@Directive({
  selector: "[appShowAuthed]",
  standalone: true,
})
export class ShowAuthedDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private userService: UserService,
    private viewContainer: ViewContainerRef
  ) {}

  condition: boolean = false;

  ngOnInit() {
    this.userService.isAuthenticated.subscribe((isAuthenticated: boolean) => {
      if (
        (isAuthenticated && this.condition) ||
        (!isAuthenticated && !this.condition)
      ) {
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
    });
  }

  @Input() set appShowAuthed(condition: boolean) {
    this.condition = condition;
  }
}

For duplication found some issue in the ngOnInit() of editor.component.ts if we comment it, the duplication of nav links does not happen.
Issue i found was in the get() method in article.service.ts we're trying to get an article but that'll always return bad request because https://[api.realworld.io/api/articles/ returns an array, now from there we need to filter based on our slug value, i could not get data based on that url. Please let me know if you get some solution.

@JavaZakariae Thanks for the report: the problem was the existing view was not checked before adding it.

@shambhu-22 the get function is using a slug already. Feel free to add more context if needed.