Navigation after Modal is messed up


#1

I have a page that loads up a modal window for someone to select an option. Then I have the modal.onDidDismiss function setup in the parent page to navigate to the new page depending on what the user selects in the modal window. The problem is, whenever the page is navigated to, the URL becomes all messed up.
Example, my page is loaded in tabs, there are 5 tabs, clicking on any one of the tabs the URL will stay as “http://localhost:8100” no changes what so ever. Then when someone clicks an option in the modal window the URL becomes something like “http://localhost:8100/#/tabs/t0/chat/private-chat” I can’t seem to figure out why the URL changes when navigating this way. It doesn’t change anywhere else and it is causing problems. Every time I change anything in the code while testing, the page reloads like it should, but it reloads to the new messed up URL and I have to erase the URL and start over. Here is an example of the code I am running that causes this issue…

Chat.ts…

import { Component, NgZone, ViewChild } from '@angular/core';
import { ModalController, IonicPage, NavController, NavParams } from 'ionic-angular';
import { ChatProvider } from '../../providers/chat/chat';
import { DataProvider } from '../../providers/data/data';
import { ChatMessage } from '../../models/chat-message';
import { User } from '@ionic/cloud-angular';
import { ChatModalPage } from '../chat-modal/chat-modal';
import { ChannelChatPage} from '../channel-chat/channel-chat';

/**
 * Generated class for the ChatPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
})
export class ChatPage {

  @ViewChild('chat') chatter: any;

  messages: any;
  zone: NgZone;
  chatBox: string;
  following: any;
  followers: any;

  constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public chat: ChatProvider,
      public user: User,
      public modalCtrl: ModalController,
      public data: DataProvider
  ) {
    this.chat.initialize();
    this.messages = [];
    this.zone = new NgZone({enableLongStackTrace: false});
    this.chatBox = '';
    this.chat.socketService.subscribe(event => {
      if(event.category === 'message') {
        this.zone.run(() => {
          this.messages.push(event.message);
        });
      }
    });
  }

  formatMessage(msg: string) {
    if(msg) {
      let chatMessage: ChatMessage = {
        to: 'recipient',
        from: this.user.details.username,
        message: msg,
        channel: 'channel'
      };
      return chatMessage;
    }
    return null;
  }

  send(message) {
    let newMsg = this.formatMessage(message);
    if(newMsg) {
      this.chat.sendMessage(newMsg);
      this.messages.push(newMsg);
    }
    this.chatBox = '';
  }

  ionViewDidLoad() {
  }

  startPrivateChat(user_id) {
    this.chat.joinPrivateChat(user_id).then(data => {
      this.navCtrl.push(ChannelChatPage, {channel: data});
    });
  }

  showMenu(type: string, fab) {
    switch(type) {
      case 'channels':
        this.showChannelsMenu();
        break;
      case 'private':
        this.showPrivateMenu();
        break;
      case 'start':
        this.showNewChatMenu();
        break;
      default:
        this.showChannelsMenu();
        break;
    }
    fab.close();
  }

  showChannelsMenu() {
    this.chat.getChannels().then(data => {
      let modal = this.modalCtrl.create(ChatModalPage, {type: 'channels', items: data});
      modal.present();
      modal.onDidDismiss(data => {
        if(data) {
          console.log("Modal Dismissed. Heres the Data:");
          console.log(data);

          this.navCtrl.push(data.page, data.pageData);
        }
      });
    });
  }

  showPrivateMenu() {
    this.chat.getPrivateMessageChannels().then(data => {
      let modal = this.modalCtrl.create(ChatModalPage, {type: 'private', items: data});
      modal.present();
      modal.onDidDismiss(data => {
        if(data) {
          console.log("Modal Dismissed. Heres the Data:");
          console.log(data);
          this.navCtrl.push(data.page, data.pageData);
        }
      })
    })
  }

  showNewChatMenu() {
    let followers = this.user.get('followers', []);
    let following = this.user.get('following', []);
    console.log("Followers: ", followers);
    console.log("following: ", following);
    this.data.retrieveUsers([followers, following]).then(data => {
      let newFollowing = data[0], newFollowers = data[1];
      // for(let index in data[0]) {
      //   newFollowing.push(data[0][index]);
      // }
      // for(let ind in data[1]) {
      //   newFollowers.push(data[1][ind]);
      // }
      let modal = this.modalCtrl.create(ChatModalPage, {type: 'newChat', items: {following: newFollowing, followers: newFollowers}});
      modal.present();
      modal.onDidDismiss(data => {
        if(data) {
          console.log("Modal Dismissed. Heres the Data:");
          console.log(data);
          this.navCtrl.push(data.page, data.pageData);
        }
      })
    })

  }

}

So, I have the “showMenu” function that is responsible for setting up the options that go to the “ChatModal” page, that way I only have to have one chatmodal and it can just change the options depending on which the user clicks. Each of the functions has a “modal.onDidDismiss” function that just pushes the correct page to “this.navCtrl”. Inside the chat modal page is very simple, just a view page with the options. Each of the options has a (click) event that is either “joinChannel” or “joinPrivateChannel” which call the function…

this.viewCtrl.dismiss({page: "SELECTEDPAGEHERE", pageData: {channel: "CHANNEL RECIEVED FROM SERVER"});

That way the navigation stays on the correct page and not from the modal page. However, for some reason every time I click an option it changes the URL, which doesn’t happen in any other place. I am using “this.navCtrl.push(…)” in many places throughout my app with no problems what so ever. It is just this modal thing, whenever I click an option, it calls dismiss on the modal and passes data back to the chat page, which calls this.navCtrl.push(…); however the URL gets changed to some weird stuff like “http://localhost:8100/#/tabs/t0/chat/channel-chat” Is there any possible way to stop that from happening and leave the URL alone? Thank you.

P.S. If you need to see more of the code and display pages please ask, I will be more than happy to provide them, I was just trying to keep my post from being too long. Thank you.


#2

I wouldn’t do any URL creation for a while. It really helps to read the changelogs and milestones of a framework before pushing it in a particular direction. URLs are in a state of flux.


#3

What do you mean? I am not generating any URLs or anything, just using the built in this.navCtrl.push(…) to navigate throughout the app. I either us nav.setRoot or nav.push/pop to navigate, I don’t actually generate or use URLs anywhere in the code. That’s why I am so confused as to why when I navigate using nav.push it changes the URL of the page, but only when I do it at the response of a modal window.


#4

Don’ t do anything that depends on URLs in any way until further notice. Read the changelog and you’ll see what I mean.


#5

Thank you. I’m not really relying on URLs currently. The main problem is, when I do nav.push from the callback of a modal window the URL gets all messed up, then let’s say I change something in my code, the live update automatically tries to refresh the page so the new code is there. The problem is the url is no longer “http://localhost:3000”, it is “http://localhost:3000/#/tabs/t0/chat/channel-chat” so the application fails because that page needs information sent to it, which it gets from the nav.push(page, data); call. I am worried that if I try to actually push a mobile version of the app, to say Android, if someone goes in and starts doing normal chat, I don’t know what will happen because for whatever reason that nav.push screws up the URL. I will see if I can find anything in the changelog, but I was hoping someone could tell me why the nav.push is destroying the URL, but only when called from a modal.onDidDismiss. That way I don’t run in to any troub;e down the line. Like if someone is in private chat, then exits the app (on mobile) when they open the app again, is it going to try to go to that messed up URL that, or will it actually work correctly. It is all just confusing, I just don’t understand why nav.push breaks the URL, only in the context of a modal callback.


#6

Also, if it matters, when I run ionic-v I am running 3.4.0, not the newest 3.5.0. Not sure if that matters or not, just wanted to put it out there.