How to navigate to a route that requires a parameter when none exists?

Ionic Framework
1

I am trying to create an Ionic 5 / Angular app that provides the following functionality to users:

  • Display a List of Mechanics on Mechanic-List page
  • A user can click on a mechanic so they can then send a message to the mechanic

Below is the structure I’m trying to implement, please let me know if it doesn’t make sense, or if there’s a better way:

Display list of mechanics in Mechanic-List below:

<ion-list>
    <ion-item *ngFor="let mechanic of loadedMechanics" (click)="onMechanicClick(mechanic.id)">
        <h2>{{ mechanic.name }}</h2>
    </ion-item>
</ion-list>

Here is how I am populating Mechanic-List:

Mechanic-list.page.ts:

this.loadedMechanics = this.usersService.getAllMechanics();

Users.service.ts:

private _users: User[] = [
    new User('user1', 'John', 'mechanic'),
    new User('user2', 'Phil', 'mechanic'),
    new User('user3', 'Andrew', 'customer'),
  ];

getAllMechanics() {
    return this.users.filter(user => user.userType === 'mechanic');
  }

Then when the user clicks on a Mechanic, open an ActionController by executing the below code:

onMechanicClick(mechanicId: string) {
    this.actionSheetCtrl.create({
      buttons: [
        {
          text: 'Send Message',
          handler: () => {
            this.goToConversationDetail(mechanicId);
          }
        }
      ]
    }).then(actionSheetEl => {
      actionSheetEl.present();
    });
  }

Then when the user clicks the Send Message button, navigate to the Conversation-Detail page.

This is where I am getting stuck.

Here is the current path for the Conversation-Detail page:

path: 'conversation-detail/:conversationId',

So you have to have an existing conversationId.

This works fine for existing conversations, I just pass the conversationId in using the below structure:

private _conversations: Conversation[] = [
    new Conversation(
      'conversation1',
      'user3',
      'user1',
      [
        new Message('message1', 'Test message', 'user3', '01/01/2020'),
        new Message('message2', 'Another message', 'user1', '02/01/2020')
      ]),
    new Conversation(
      'conversation2',
      'user4',
      'user2',
      [
        new Message('message3', 'my  message', 'user4', '05/03/2020'),
        new Message('message4', 'more messages', 'user2', '08/03/2020')
      ])
  ];

But I want to know whats the best way to start off a new conversation between a Mechanic & a User.

In other words when there is no existing Conversation, what is the best way to begin one? Do I need to have a different page?

Any advice would be greatly appreciated, thanks a lot!

2

https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero