refactor: inject view getter into StudySession

rather than depend directly on `courses`. Preparation for moving
`StudySession` to `common-ui`

Author: NiloCK

packages/platform-ui/src/views/Study.vue

@@ -35,6 +35,7 @@
       :session-time-limit="sessionTimeLimit"
       :user="user as User"
       :session-config="studySessionConfig"
+      :get-view-component="getViewComponent"
       @session-finished="handleSessionFinished"
     />
   </div>
@@ -50,6 +51,7 @@ import { Router } from 'vue-router';
 import { CourseConfig } from '@vue-skuilder/common';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useDataInputFormStore } from '@/stores/useDataInputFormStore';
+import Courses from '@vue-skuilder/courses';
 
 function randomInt(min: number, max: number): number {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -107,6 +109,7 @@ export default defineComponent({
       sessionPrepared: false,
       sessionContentSources: [] as ContentSourceID[],
       dataInputFormStore: useDataInputFormStore(),
+      getViewComponent: (view_id: string) => Courses.getView(view_id),
     };
   },
 

packages/platform-ui/src/views/StudySession.vue

@@ -79,7 +79,6 @@ import {
   HeatMap,
   CardViewer,
 } from '@vue-skuilder/common-ui';
-import Courses from '@vue-skuilder/courses';
 import {
   getCourseDoc,
   removeScheduledCardReview,
@@ -159,6 +158,10 @@ export default defineComponent({
       type: Object as PropType<StudySessionConfig>,
       default: () => ({ likesConfetti: false }),
     },
+    getViewComponent: {
+      type: Function as PropType<(viewId: string) => ViewComponent>,
+      required: true,
+    },
   },
 
   emits: ['session-finished', 'session-started', 'card-loaded', 'card-response', 'time-changed'],
@@ -522,7 +525,7 @@ export default defineComponent({
           tmpCardData.elo = toCourseElo(tmpCardData.elo);
         }
 
-        const tmpView: ViewComponent = Courses.getView(tmpCardData.id_view);
+        const tmpView: ViewComponent = this.getViewComponent(tmpCardData.id_view);
         const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
           return getCourseDoc<DisplayableData>(_courseID, id, {
             attachments: true,