From e0cf5fec3b7aff4db8429aa55f69a8a073f18cb4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 9 Jan 2025 16:35:53 +0300
Subject: [PATCH 1/3] adds prop on the routes

---
 .../plugins/learn/assets/src/routes/classesRoutes.js   |  6 ++++++
 .../assets/src/views/classes/ClassAssignmentsPage.vue  | 10 +++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/routes/classesRoutes.js b/kolibri/plugins/learn/assets/src/routes/classesRoutes.js
index e2a9bece697..d0e0407d502 100644
--- a/kolibri/plugins/learn/assets/src/routes/classesRoutes.js
+++ b/kolibri/plugins/learn/assets/src/routes/classesRoutes.js
@@ -36,6 +36,12 @@ export default [
   {
     name: ClassesPageNames.CLASS_ASSIGNMENTS,
     path: '/classes/:classId',
+    props: route => {
+      const classId = route.params.classId;
+      return {
+        classId,
+      };
+    },
     handler: toRoute => {
       const { classId } = toRoute.params;
       return noClassesGuard() || showClassAssignmentsPage(store, classId);
diff --git a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
index 4b5ffb27c8a..9557cc7d0c4 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
@@ -16,7 +16,6 @@
           :label="className"
         />
       </h1>
-
       <AssignedLessonsCards :lessons="activeLessons" />
       <AssignedQuizzesCards
         :quizzes="activeQuizzes"
@@ -57,11 +56,11 @@
       LearnAppBarPage,
     },
     mixins: [commonCoreStrings, commonLearnStrings],
-    setup(_, { root }) {
+    setup(props) {
       const { fetchClass, getClass, getClassActiveLessons, getClassActiveQuizzes } =
         useLearnerResources();
 
-      const classId = root.$router.currentRoute.params.classId;
+      const classId = computed(() => props.classId);
       const classroom = computed(() => getClass(classId));
       const className = computed(() => (get(classroom) ? get(classroom).name : ''));
       const activeLessons = computed(() => getClassActiveLessons(get(classId)));
@@ -98,6 +97,10 @@
         type: Boolean,
         default: false,
       },
+      classId: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       breadcrumbs() {
@@ -112,6 +115,7 @@
           },
           {
             text: this.className,
+            link: { name: ClassesPageNames.CLASS_ASSIGNMENTS },
           },
         ];
       },

From 2fc8b7ca6f669184607017cab9b4f1ade87fb576 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 9 Jan 2025 18:10:02 +0300
Subject: [PATCH 2/3] fixes failing class name display

---
 .../learn/assets/src/views/classes/ClassAssignmentsPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
index 9557cc7d0c4..2cc5da5c837 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
@@ -61,10 +61,10 @@
         useLearnerResources();
 
       const classId = computed(() => props.classId);
-      const classroom = computed(() => getClass(classId));
+      const classroom = computed(() => getClass(classId.value));
       const className = computed(() => (get(classroom) ? get(classroom).name : ''));
-      const activeLessons = computed(() => getClassActiveLessons(get(classId)));
-      const activeQuizzes = computed(() => getClassActiveQuizzes(get(classId)));
+      const activeLessons = computed(() => getClassActiveLessons(get(classId.value)));
+      const activeQuizzes = computed(() => getClassActiveQuizzes(get(classId.value)));
 
       let pollTimeoutId;
 

From 34a398ece721da71260bde43ebff09c7f6a36275 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 9 Jan 2025 19:12:33 +0300
Subject: [PATCH 3/3] use .value to access reactive value of the  classId

---
 .../assets/src/views/classes/ClassAssignmentsPage.vue     | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
index 2cc5da5c837..8ce939fca24 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/ClassAssignmentsPage.vue
@@ -30,7 +30,6 @@
 <script>
 
   import { computed, onBeforeMount, onBeforeUnmount } from 'vue';
-  import { get } from '@vueuse/core';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
 
@@ -62,10 +61,9 @@
 
       const classId = computed(() => props.classId);
       const classroom = computed(() => getClass(classId.value));
-      const className = computed(() => (get(classroom) ? get(classroom).name : ''));
-      const activeLessons = computed(() => getClassActiveLessons(get(classId.value)));
-      const activeQuizzes = computed(() => getClassActiveQuizzes(get(classId.value)));
-
+      const className = computed(() => (classroom.value ? classroom.value.name : ''));
+      const activeLessons = computed(() => getClassActiveLessons(classId.value));
+      const activeQuizzes = computed(() => getClassActiveQuizzes(classId.value));
       let pollTimeoutId;
 
       function schedulePoll() {