Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove use of handler functions in favour of Vue router route guards and loading data in the component setup function #12875

Open
rtibbles opened this issue Nov 21, 2024 · 0 comments
Labels
TODO: needs clarification Insufficient information to proceed

Comments

@rtibbles
Copy link
Member

Current state

As a way to consistently handle data loading and redirection, we implemented a special wrapper for Vue Router that allows routes to define a handler property that is responsible for loading the data required to view the main page.

This was deeply interconnected with some of our previous architecture that we have now phased out, such as the CoreBase component, the shared page state vuex state (now mostly, but not completely, unused), the "same page" tracker that was previously used for ConditionalPromise resolution, but now is used in a few places to prevent outdated requests from updating vuex state, and the global loading state. Lastly, a lot of this was done because of the limitations of route level guards, whereby only a routeEnter guard can be defined.

Expected state

Instead of our custom handler function, we should be using a combination of the existing route (which the handler functionality uses under the hood, but through a global guard, rather than route specific) and component guards, and defer data loading to composables and the setup function of the route component.

For an (imperfect) example of a starting point on this work, the learn SPA handlers have been mostly reduced to stubs that do nothing more than handle redirect behaviour: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/routes/index.js#L45

As such, Learn would be the easiest place to start, and see if the handler behaviour can be replaced by a beforeEnter route guard. This may not be possible, because some of the checks need to happen not just on route enter, but also route update - in this case, any logic would have to be handled in route guards in the route component, and not on the route itself.

c.f. https://v3.router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard vs https://v3.router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

Related issues

This is also interconnected with this issue, in coach specifically: #11219

@rtibbles rtibbles added the TODO: needs clarification Insufficient information to proceed label Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
TODO: needs clarification Insufficient information to proceed
Projects
None yet
Development

No branches or pull requests

1 participant