Move handler to composable

to keep the logic related to groups
loading in one place

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

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

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

@@ -1,4 +1,6 @@
 import { ref } from 'kolibri.lib.vueCompositionApi';
+import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
+import { LearnerGroupResource, FacilityUserResource } from 'kolibri.resources';
 
 // Place outside the function to keep the state
 const groupsAreLoading = ref(false);
@@ -8,8 +10,62 @@ export function useGroups() {
     groupsAreLoading.value = loading;
   }
 
+  function showGroupsPage(store, classId) {
+    // On this page, handle loading state locally
+    // TODO: Open follow-up so that we don't need to do this
+    store.dispatch('notLoading');
+
+    setGroupsLoading(true);
+
+    const promises = [
+      FacilityUserResource.fetchCollection({
+        getParams: { member_of: classId },
+        force: true,
+      }),
+      LearnerGroupResource.fetchCollection({
+        getParams: { parent: classId },
+        force: true,
+      }),
+    ];
+    const shouldResolve = samePageCheckGenerator(store);
+    return Promise.all(promises).then(
+      ([classUsers, groupsCollection]) => {
+        if (shouldResolve()) {
+          const groups = groupsCollection.map(group => ({ ...group, users: [] }));
+          const groupUsersPromises = groups.map(group =>
+            FacilityUserResource.fetchCollection({
+              getParams: { member_of: group.id },
+              force: true,
+            })
+          );
+
+          Promise.all(groupUsersPromises).then(
+            groupsUsersCollection => {
+              if (shouldResolve()) {
+                groupsUsersCollection.forEach((groupUsers, index) => {
+                  groups[index].users = [...groupUsers];
+                });
+                store.commit('groups/SET_STATE', {
+                  classUsers: [...classUsers],
+                  groups,
+                  groupModalShown: false,
+                });
+                setGroupsLoading(false);
+                store.dispatch('clearError');
+              }
+            },
+            error => (shouldResolve() ? store.dispatch('handleError', error) : null)
+          );
+        }
+      },
+      error => {
+        shouldResolve() ? store.dispatch('handleError', error) : null;
+      }
+    );
+  }
+
   return {
     groupsAreLoading,
-    setGroupsLoading,
+    showGroupsPage,
   };
 }

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

@@ -1,12 +1,14 @@
 import store from 'kolibri.coreVue.vuex.store';
 import { PageNames } from '../constants';
+import { useGroups } from '../composables/useGroups';
 import GroupsPage from '../views/plan/GroupsPage';
 import GroupMembersPage from '../views/plan/GroupMembersPage';
 import GroupEnrollPage from '../views/plan/GroupEnrollPage';
-import { showGroupsPage } from '../modules/groups/handlers';
 import planLessonsRoutes from './planLessonsRoutes';
 import planExamRoutes from './planExamRoutes';
 
+const { showGroupsPage } = useGroups();
+
 export default [
   ...planLessonsRoutes,
   ...planExamRoutes,