Navigation flow with modals

[micahlt]

Since we're using <ion-modal> components to implement projects, profiles, and studios, there are a few issues with navigation. When clicking a project link from another project, the back button goes back to the explore tab. We need to fix that by making it move back to the previous project.

[moeenio]

couldn't we create a new ion-modal for each clicked link?

[micahlt]

@locness3 I've considered that - however, modals are quite literally overlaid on top of the current view. As someone follows more and more links, the DOM will become massive and cause lag in the application.

[moeenio]

Except if you remove the DOM of non-visible modals - or just use something else than modals for what's the main content of the app.

[micahlt]

@locness3 That's possible, but it would be very difficult due to the structured nature of Ionic Vue - maybe you'd like to take a stab at it?

[moeenio]

When I get some time

[moeenio]

At the time, I wasn't aware about all routing stuff. I think, we should create a seperate page/endpoint/route/whatever you name it ProjectPage.vue, and just navigate to it with a query parameter for the project ID. AFAIK, ionic ensures we get a smooth navigation without a full refresh.

[micahlt]

I can work on that. Of course, this isn't top priority right now. The only reason I didn't consider doing this in the first place was that I'm not sure that Ionic will handle transitions if the project page is not a tab (since we're using a tab-based layout).

[moeenio]

Needs some testing, but I'd think it makes a smooth navigation no matter what.

[moeenio]

... it doesn't, even when using an ion-router-link

[moeenio]

Or maybe it would with ion-nav-link? I don't understand how to set that up.

[moeenio]

Okay, it looks like we have to use <router-link> from vue-router. To import it (hopefully saves you from guessing or googling) :

import { RouterLink } from "vue-router";
export default {
  ...
  components: {
    RouterLink
  }
}

[micahlt]

@locness3 So we essentially need to use a <router-link> whenever opening a project?

[moeenio]

Yes, with the project page being its own route.

[micahlt]

@locness3 Ah, so just get rid of the modals. All righty, sounds good. I'll test it out.

[micahlt]

I fixed the problems with modal navigation in 17711bbe84345f3e721b537bdc048a55668bdf76. Closing now.

[moeenio]

Should be using the router, but whatever

[micahlt]

In the future if it becomes a problem I'll change it. For now it works fine.

[moeenio]

Re-opening because using proper routes instead of modals would improve the structure of the code.