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.
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.
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
handlerproperty 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
setupfunction 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
beforeEnterroute 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: https://github.com/learningequality/kolibri/issues/11219