Move handler to composable

to keep the logic related to lessons
loading in one place

kolibri/plugins/coach/assets/src/composables/__mocks__/useLessons.js

@@ -0,0 +1,46 @@
+/**
+ * `useLessons` composable function mock.
+ *
+ * If default values are sufficient for tests,
+ * you only need call `jest.mock('<useLessons file path>')`
+ * at the top of a test file.
+ *
+ * If you need to override some default values from some tests,
+ * you can import a helper function `useLessonsMock` that accepts
+ * an object with values to be overriden and use it together
+ * with  `mockImplementation` as follows:
+ *
+ * ```
+ * // eslint-disable-next-line import/named
+ * import useLessons, { useLessonsMock } from '<useLessons file path>';
+ *
+ * jest.mock('<useLessons file path>')
+ *
+ * it('test', () => {
+ *   useLessons.mockImplementation(
+ *     () => useLessonsMock({ lessonsAreLoading: true })
+ *   );
+ * })
+ * ```
+ *
+ * You can reset your mock implementation back to default values
+ * for other tests by calling the following in `beforeEach`:
+ *
+ * ```
+ * useLessons.mockImplementation(() => useLessonsMock())
+ * ```
+ */
+
+const MOCK_DEFAULTS = {
+  lessonsAreLoading: false,
+  showLessonsRootPage: jest.fn(),
+};
+
+export function useLessonsMock(overrides = {}) {
+  return {
+    ...MOCK_DEFAULTS,
+    ...overrides,
+  };
+}
+
+export default jest.fn(() => useLessonsMock());

kolibri/plugins/coach/assets/src/composables/useLessons.js

@@ -1,4 +1,6 @@
 import { ref } from 'kolibri.lib.vueCompositionApi';
+import { LearnerGroupResource } from 'kolibri.resources';
+import { LessonsPageNames } from '../constants/lessonsConstants';
 
 // Place outside the function to keep the state
 const lessonsAreLoading = ref(false);
@@ -8,8 +10,37 @@ export function useLessons() {
     lessonsAreLoading.value = loading;
   }
 
+  // Show the Lessons Root Page, where all the Lessons are listed for a given Classroom
+  function showLessonsRootPage(store, classId) {
+    // on this page, don't handle loading state globally so we can do it locally
+    store.dispatch('notLoading');
+
+    setLessonsLoading(true);
+    store.commit('lessonsRoot/SET_STATE', {
+      lessons: [],
+      learnerGroups: [],
+    });
+    const loadRequirements = [
+      // Fetch learner groups for the New Lesson Modal
+      LearnerGroupResource.fetchCollection({ getParams: { parent: classId } }),
+      store.dispatch('lessonsRoot/refreshClassLessons', classId),
+    ];
+
+    return Promise.all(loadRequirements).then(
+      ([learnerGroups]) => {
+        store.commit('lessonsRoot/SET_LEARNER_GROUPS', learnerGroups);
+        store.commit('SET_PAGE_NAME', LessonsPageNames.PLAN_LESSONS_ROOT);
+        setLessonsLoading(false);
+      },
+      error => {
+        store.dispatch('handleApiError', error);
+        setLessonsLoading(false);
+      }
+    );
+  }
+
   return {
     lessonsAreLoading,
-    setLessonsLoading,
+    showLessonsRootPage,
   };
 }

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

@@ -8,10 +8,11 @@ import {
   showLessonResourceBookmarks,
   showLessonResourceBookmarksMain,
 } from '../modules/lessonResources/handlers';
-import { showLessonsRootPage } from '../modules/lessonsRoot/handlers';
 import { showLessonSummaryPage } from '../modules/lessonSummary/handlers';
 import { LessonsPageNames } from '../constants/lessonsConstants';
 
+import { useLessons } from '../composables/useLessons';
+
 import LessonsRootPage from '../views/plan/LessonsRootPage';
 import LessonSummaryPage from '../views/plan/LessonSummaryPage';
 import LessonResourceSelectionPage from '../views/plan/LessonResourceSelectionPage';
@@ -31,6 +32,8 @@ function path(...args) {
   return args.join('');
 }
 
+const { showLessonsRootPage } = useLessons();
+
 export default [
   {
     name: LessonsPageNames.PLAN_LESSONS_ROOT,