AlexGalays/abyssa-js

Exiting all states when changing a query param

Closed this issue · 4 comments

I have a strange behaviour using Abyssa but not sure if that's a bug or normal or my code totally wrong... I'm trying to update some query params, staying on the same state. Something like:

router.updateCurrentParams = function (newParams) {
  const state = router.currentState();
  if (!Utils.is.equal(newParams, state.params)) {
    // Triple state!! (this is not a bug)
    router.state(state.state.fullName, newParams);
  }
};

Then I have a state tree like that, root has a query param named bis defined on it.

root
 ── home (@ /)
 ── main
     ── base (@ /base)

Then I try to move from /base to /base?bis=default. I would expect the transition to only go through all the update methods since I am staying on the same state, only updating a param (even if it's a param from a parent state). Here is what happen from Abyssa logs

Changing state to root.main.base
Starting transition from root.main.base:{} to root.main.base:{"bis":"default"}
Exit root.main.base
Exit root.main
Exit root
Enter root
Enter root.main
Enter root.main.base
Updating URL: /base?bis=default
Transition from root.main.base:{} to root.main.base:{"bis":"default"} completed

It clearly says that it will transition to the same state root.main.base but it exits everything up to the root parent and then enter everything again.

What do you think?

That the root is exited is normal since it owns the query param (https://github.com/AlexGalays/abyssa-js/blob/master/src/Transition.js#L122)

However, any substate that defines an update method should be updated instead of fully exited/entered.

Are you sure you defined update methods in at least a few of the substates? can you post the full code on a gist if not?

There are no update method in any state at all. I understand better now... I didn't think the states were all exiting when a param was changed and only the ones with an update method would be skipping the exit part. That's a bit strange IMO. If you are on an update transition (same state, different params), why should any state be entered or exited? I mean, we are staying in the same state, so all init or destoy stuff inside enter and exit should be left untouched, isn't it? Is the only solution to put some update methods in every states?

What I want to do is just updating the query string to keep my url consistent without entering and exiting any state. Since my query param is at the top level state, is there another solution than to add an update method in every states?

Try redefining the query param on the lowest state as well?

No can do dear sir. It's a query param that indicate an aside menu has been opened, so it can be toggled from literally any state (only purpose is to support back button, damn you Android). It would mean redefining the query param in all leaf states... not really better than adding some update here and there to cancel the exit call.

You can close the issue, I have a solution for my problem, I'm just wondering if this is the right way for Abyssa to handle a query param change now...