Improve router handlers architecture in Coach

[MisRob]

Blocks

#11422

Observed behavior

For majority of Coach pages, in addition to fetching data in their individual route handlers (e.g. showExamsPage handler), we fetch some of their data in the global beforeRoute handler, which is run before individual route handlers:

kolibri/kolibri/plugins/coach/assets/src/app.js

Lines 38 to 57 in 0f7b06c

	if (
	to.name &&
	!['CoachClassListPage', 'StatusTestPage', 'CoachPrompts', 'AllFacilitiesPage'].includes(
	to.name
	)
	) {
	promises.push(this.store.dispatch('initClassInfo', to.params.classId));
	} else {
	this.store.dispatch('coachNotifications/stopPolling');
	}
	if (this.store.getters.isSuperuser && this.store.state.core.facilities.length === 0) {
	promises.push(this.store.dispatch('getFacilities').catch(() => {}));
	}
	if (promises.length > 0) {
	Promise.all(promises).then(next, error => {
	this.store.dispatch('handleApiError', { error });
	});
	} else {
	next();
	}

This approach has the following problems:

1. Slows down navigation (user-facing)
Particularly observable on slower networks when after clicking a coach page, until all global beforeRoute promises are finished, user is not even redirected to a new page.

2. Limits individual pages ability to control when and how to display loading states (user-facing)
Many pages have their individual handlers that are sometimes connected to local loading states, however there is no way to factor in waiting time for this global beforeRoute which often seem to take even more time than promises in individual handlers, causing inaccuracy and discrepancy of loading states.

3. It's difficult to build a mental picture of what requests are performed when a page is visited (developer-facing)
Promises in the global beforeRoute are run for majority of pages except of few pages listed here

kolibri/kolibri/plugins/coach/assets/src/app.js

Line 40 in 0f7b06c

!['CoachClassListPage', 'StatusTestPage', 'CoachPrompts', 'AllFacilitiesPage'].includes(

Then, many pages have their separate handlers that have no information or control over the common logic, and are placed in different files.

Expected behavior

• Users are redirected immediately after navigating to another page and appropriate loaders are displayed on the page
• Individual pages have information on what data is being fetched, when it starts, ends and can control loading states in a flexible and simple manner

Steps to reproduce

Navigate Coach main pages and tabs on slower network

Guidance

To be able to achieve the expected behavior, we need to move promises from the global beforeRoute handler

kolibri/kolibri/plugins/coach/assets/src/app.js

Line 26 in 0f7b06c

router.beforeEach((to, from, next) => {

to individual page handlers.

For example, for showExamsPage page handler the steps could be:

1. Search the codebase to locate the name of a page that uses showExamsPage: PageNames.EXAMS

kolibri/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js

Lines 27 to 37 in b88a804

	name: PageNames.EXAMS,
	path: '/:classId/plan/quizzes',
	component: CoachExamsPage,
	handler(toRoute) {
	showExamsPage(store, toRoute.params.classId);
	},
	meta: {
	titleParts: ['quizzesLabel', 'CLASS_NAME'],
	},
	},
	{

2. Add a condition to the global beforeRoute handler instructing it to not run code containing promises fetching data if user is navigating to a page with name PageNames.EXAMS

3. And instead, copy all those promises to showExamsPage

• This needs to be done for all individual page handlers in Coach. In this manner, it can be done gradually. I would recommend opening one pull request for one handler so we can review and QA loading states easily.

• After all individual handlers are updated to have the promises, we can finally remove the promises completely from the global beforeRoute handlers.

Acceptance criteria

• The global beforeRoute handler doesn't contain any promises fetching data
• The promises are instead in individual page handlers
• No regressions in regards to fetching data for Coach pages
• No regressions in the existing loading states

Tasks

• Refactor routes in kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js (DONE in Improved router handlers architecture in Coach - planLessonRoutes #11675)
• Refactor routes in kolibri/plugins/coach/assets/src/routes/planRoutes.js (DONE in Improved route handlers architecture in Coach - planRoutes #11900)
• Refactor routes in kolibri/plugins/coach/assets/src/routes/index.js (WIP, first related PR merged Refactored HomePage route handler to fetch initClassInfo and getFacil… #12358)
• Refactor routes in kolibri/plugins/coach/assets/src/routes/reportRoutes.js
• BLOCKED (as of February 2) Refactor routes in kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
• Finally remove data fetching from the global beforeRoute handler + cleanup temporary ignore list from there as well

[MisRob]

This is a major blocker for any further improvements of loading states on Coach pages --> adding P1 priority

[MisRob]

This might be good for contribution, but probably only if you have a bit of experience with Kolibri already. I would recommend gradual approach - refactoring one page handler at a time, especially for the first few page handlers.

develop branch should be targeted.

[GarvitSinghal47]

@MisRob i would like to work on this issue can you assign it to me.

[MisRob]

Hi @GarvitSinghal47, we'd be happy to have you work on this. Is everything clear in regards to the proposed solution? Feel free to ask any questions before you start working on it, or even jot down briefly the steps you're planning to do here and we will have a look. Please only choose one handler to work on now, for example showExamsPage I referenced and prepare a PR for it. During the review we can make sure that we're on the same page. After this initial step, I can reference other handlers (we have plenty) for which the approach will be exactly the same.

[MisRob]

@GarvitSinghal47 I also updated the issue description with some more references

[MisRob]

Most likely related #11238 (comment)

[MisRob]

Hi @GarvitSinghal47, are you working on this or should we unassign you?

[MisRob]

Unassigning due to no activity