Allow ROUTER_EVENT handler (//) to stop propagation of other event (#SomeComponent) about apprun HOT 12 CLOSED

Not too much use of the ROUTER_EVENT event currently. I only use it to set active menu.

I usually check user permission in each component. It just needs one line.

update = {
  '#Profile': state => {
    if (!authorized) return app.run('#Login', {returnURL: '#Profile'}); // this stops the event
    //....
    return state;
  }
}

If you wan to have a centralized authorization, you can add another internal event.

app.on('//', (name) => {
  if (!authorized(name)) app.run('#Login', {returnURL: name});
  else app.run(name + '//' ); 
})

Profile component shows up upon the #Profile// event, instead of #Profile.

from apprun.

Thanks for solution.
Anyway, I'm still confused about:

1. What is the purpose of ROUTER_EVENT handler, if not general handling use cases like mine?
2. The code above should be placed in every component that needs authorization or similar conditions to run and leads to lot of code duplication. I know I can create a function which do the same thing to minimize duplication.

My proposal:

export interface IApp 
{
  ....
  // Router Event Handler; initially does nothing
  onRoute(name: string, ...rest): boolean
}

...
// Router Event Handler; initially does nothing
app.onRoute = (name: string, ...rest) => { return true; }

then in route function:

if (app.onRoute(name, ...rest) app.run(name, ...rest);

and finally in client code:

// set new onRoute handler

app.onRoute = (name :string, ...rest) => {
  if (!authorized) { 
    app.run("#Login, {returnURL: name});
    return false; // block #name event
  }
  ....
  return true; // allow #name event
}

What do you think about?

from apprun.

I think you can do it without using the // event.

update = {
  '#Profile': state => {
    if (!authorized) {
      app.run('#Login', {returnURL: '#Profile'});
        return; // this stops the event
     }
     //....
     return state;
  }
}

from apprun.

I really liked last one-liner approach. It doesn't work well, however.
my code:

import app, {Component} from 'apprun';

export default class ProfileComponent extends Component {
  state = 'Profile';

  view = (state) => {
    return <div>
      <h1>{state}</h1>
    </div>
  }

  update = {
    '#Profile//': state => state,
  }
}

then

app.on('//', route => {
  let user = app['user'];
  if (!user) {
    user = auth.getUser();
  }
  if (!user) {
      console.log("MUST LOGIN")
      app.run("#Login", {returnUrl: route})
  } else {
    app.run(route + "//")
  }
})

when enter url http://localhost:3000/#Profile in browser, I'm getting
Assertion failed: No subscriber for event: #Profile error
because #Profile event is fired from router. Of course, the login form is displayed as expected, and ProfileComponent is not updated, as expected too.

from apprun.

Add an empty handler to avoid the error:
app.on(‘#Profile’, ()=>{})

from apprun.

Your first approach

update = {
  '#Profile': state => {
    if (!authorized) return app.run('#Login', {returnURL: '#Profile'}); // this stops the event
    //....
    return state;
  }
}

is far better and I'll adopt it for now.
I would appreciate some centralized solution, though.

from apprun.

I've just completed my idea in separate branch https://github.com/ludmiloff/apprun/tree/patches and write some tests. Will test it on a real app I'm currently working on and report later

from apprun.

Hello @yysun ,
In regard to your commit convert / to #, could you explain a bit what is the point of having "#" event at all.
The real-app-example example and route function from apprun show only a useless (IMO) url splitting and rewriting again. So, I wonder what is the real purpose?

from apprun.

Some applications use the convention of #, #Home, #About and #Contact, in like the default Bootstrap template. AppRun by default supports this convention. The real-world example uses a different convention of #/, #/Profile and etc.. Therefore in the real-world example, we use // to handle it.

In order to support SSR, the commit 536e186 breaks the default convention that it fires / instead of #. Other applications started to fail. Therefore, it has to converts / to # to make other applications work.

from apprun.

BTW In the SSR example, it is expecting / for the home page. The # is converted to / in the main.tsx.

app.on('#', () => app.run('/'));

I am going to add this line to AppRun router, so that it fires both / and # when the application starts.

from apprun.

Ok then. I'm giving up.
Here the result:

1. I'm able to effectively stop the events on condition (e.g not authorized) and prevent unnecessary rendering.
2. I'm facing double rendering of Home component with #/ convention and the code borrowed from real-app-example:

app.on('#', (route, ...p) => {
  if (!route && !p.length) {
    document.location.hash = '#/';    
  }
  app.run(`#/${route || ''}`, ...p);
})

The later is not related to my patch and is also reproducable with apprun v1.13.5
If you are OK I'm going to close this.

from apprun.

from apprun.