5

I need your help. I have a modal that I'm trying to show right after login. My effect and code inside ngOnInit only fire once, after I've logged in. This code is not working correctly for me, because my condition for showing the modal window is true, but immediately after showing my modal, a redirect happens, regarding the conditions in the effect, and the modal window immediately disappears. Please tell me where the error is in the code? Why does my modal disappear after a redirect and how to fix it? Thank you very much

html

<modalSlideUp [isModalShow]="modalIsShown">
 <form [formGroup]="form">
      <input type="checkbox" formControlName="stayInTheSystem">
      <h4> Don`t ask me again </h4>
      <button> Yes </button>
      <button> No </button>
 </form>
</modalSlideUp>

typescript

 _modalIsShown: boolean = false;

 get modalIsShown(): boolean {
   return this._modalIsShown;
 }

 set modalIsShown(value: boolean) {
   console.log(value, 'value in setter'); // true
   this._modalIsShown = true;
 }


ngOnInit() {
   this.effects.AuthenticationSuccess.subscribe((data) => 
     let isModalShow: boolean =
      (
        this.tokenService.getUserSavedIsa(this.user?.id) === true ||
        localStorage.getItem('userRecords') === null ||
        localStorage.getItem('dontAskAgain') === 'false'
      );
      this.modalIsShown = isModalShow;
      setTimeout(() => {
         console.log(this.isTokenModalWindowOpened, 'timeout'); // true
       }, 5000)
   })

}

effects

AuthenticationSuccess: Observable<any> = createEffect(() => this.actions$.pipe(
  ofType(idenityActions.ActionTypes.AUTHENICATION_SUCCESS),
  tap((user:any) => {

    const savedUrl = localStorage.getItem('intendedUrl');

      if (!(user.payload as AuthenticateResponseModel).isAuthenticated) {
        this.router.navigateByUrl("/non-activate", { skipLocationChange: false });
      } else if (!savedUrl && user.payload.firstSetup === false) {
        this.router.navigateByUrl("/");
      } else if (savedUrl && user.payload.firstSetup === false) {
        this.router.navigateByUrl(savedUrl);
        setTimeout(() => {
          localStorage.removeItem('savedUrl');
        }, 3000)
      } else if (savedUrl && user.payload.firstSetup === true) {
        this.router.navigateByUrl('/my-profile/settings');
      }

  })
),{ dispatch: false });
5
  • Are you using a library for the modal? which one?
    – wlf
    Commented Oct 16, 2023 at 7:58
  • Do you want to show the modal after the redirect? or immediately after login? or does it not matter as long as it appears and stays visible?
    – wlf
    Commented Oct 16, 2023 at 8:32
  • @wlf After my login, my request immediately goes through and the effect is executed 1 time. There are conditions inside my effect - depending on the answer that came, routing should take place to a specific page. After logging in, I must have a modal that asks whether to stay in the system or not, and it doesn't matter before or after routing. The main thing is that it appears and does not disappear by itself, because the user closes it by choosing his choice. Commented Oct 16, 2023 at 10:52
  • and are you using a library for the modal as per first question?
    – wlf
    Commented Oct 16, 2023 at 23:12
  • My guess is you have placed the modalSlideUp inside of a component which is being rendered using router-outlet. but i can't say for sure what's the structure from the section you have shared.
    – Az264
    Commented Oct 20, 2023 at 5:41

1 Answer 1

0

you need to keep eye on whether the redirect has occurred or not. try this and let me know.

  _modalIsShown: boolean = false;
    _redirectOccurred: boolean = false;
    
    get modalIsShown(): boolean {
      return this._modalIsShown;
    }
    
    set modalIsShown(value: boolean) {
      console.log(value, 'value in setter'); // true
      this._modalIsShown = value;
    }
    
    ngOnInit() {
      this.effects.AuthenticationSuccess.subscribe((data) => {
        if (!this._redirectOccurred) {
          let isModalShow: boolean =
            (
              this.tokenService.getUserSavedIsa(this.user?.id) === true ||
              localStorage.getItem('userRecords') === null ||
              localStorage.getItem('dontAskAgain') === 'false'
            );
          this.modalIsShown = isModalShow;
          setTimeout(() => {
            console.log(this.isTokenModalWindowOpened, 'timeout'); // true
          }, 5000);
        }
      });
    
      // Set the redirect occurred flag to true after the modal is shown
      this.effects.Redirect.subscribe(() => {
        this._redirectOccurred = true;
      });
    }
1
  • Thank you very much, but there is no Redirect effect in my ngrx effects. I thought this could be solved with NavigationStart or NavigationEnd. Thank you very much for your reply, but this is not what is needed Commented Oct 13, 2023 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.