proper fetching of data once we have course data

src/lib/components/Course/components/Settings/index.svelte

@@ -11,6 +11,7 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { settings } from './store';
   import { course } from '$lib/components/Course/store';
+  import type { Course } from '$lib/utils/types';
   import { updateCourse, deleteCourse } from '$lib/utils/services/courses';
   import { currentOrgPath } from '$lib/utils/store/org';
   import { isObject } from '$lib/utils/functions/isObject';
@@ -154,16 +155,16 @@
     isSaving = false;
   };
 
-  function setDefault(course) {
+  function setDefault(course: Course) {
     if (course && Object.keys(course).length) {
       $settings = {
         course_title: course.title,
         course_description: course.description,
-        logo: course.logo,
+        logo: course.logo || '',
         tabs: course.metadata.lessonTabsOrder || $settings.tabs,
-        grading: course.metadata.grading,
+        grading: !!course.metadata.grading,
-        lesson_download: course.metadata.lessonDownload,
+        lesson_download: !!course.metadata.lessonDownload,
-        is_published: course.is_published,
+        is_published: !!course.is_published,
         allow_new_students: course.metadata.allowNewStudent
       };
     }

src/routes/courses/[id]/attendance/+page.svelte

@@ -24,6 +24,7 @@
   import { attendance } from '$lib/utils/store/attendance.js';
   import { profile } from '$lib/utils/store/user';
   import type { GroupPerson, Lesson } from '$lib/utils/types/index';
+  import { browser } from '$app/environment';
 
   export let data;
 
@@ -120,18 +121,20 @@
     );
   }
 
-  onMount(async () => {
+  async function firstRender(courseId: string) {
-    if ($course.id) {
+    if (courseId) {
       if (!Object.keys($attendance).length) {
         setAttendance($course);
       }
       return;
     }
-  });
+  }
 
   $: students = isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
+
+  $: browser && $course.id && firstRender($course.id);
 </script>
 
 <CourseContainer bind:isStudent bind:courseId={data.courseId}>

src/routes/courses/[id]/marks/+page.svelte

@@ -1,5 +1,4 @@
-<script>
+<script lang="ts">
-  import { onMount } from 'svelte';
   import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
@@ -12,6 +11,8 @@
   import { getLectureNo } from '$lib/components/Course/function';
   import { fetchMarks } from '$lib/utils/services/marks';
   import { profile } from '$lib/utils/store/user';
+  import { browser } from '$app/environment';
+  import { course } from '$lib/components/Course/store';
 
   export let data;
   const { courseId } = data;
@@ -33,7 +34,7 @@
     );
   }
 
-  onMount(async () => {
+  async function firstRender(courseId: string) {
     const { data: marks } = await fetchMarks(courseId);
 
     marks.forEach((mark) => {
@@ -68,11 +69,13 @@
         };
       }
     });
-  });
+  }
 
   $: students = isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
+
+  $: browser && $course.id && firstRender($course.id);
 </script>
 
 <CourseContainer bind:isStudent bind:courseId={data.courseId}>

src/routes/courses/[id]/submissions/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { flip } from 'svelte/animate';
   import { dndzone } from 'svelte-dnd-action';
   import { goto } from '$app/navigation';
@@ -25,6 +24,7 @@
     NOTIFICATION_NAME
   } from '$lib/utils/services/notification/notification';
   import { currentOrg } from '$lib/utils/store/org';
+  import { browser } from '$app/environment';
 
   type items = {
     id: number;
@@ -255,12 +255,14 @@
     await Promise.all(updates);
   }
 
-  onMount(async () => {
+  $: {
-    if (!$course.id) {
+    const query = new URLSearchParams($page.url.search);
-      return;
+    submissionId = query.get('submissionId');
-    }
+    openExercise = !!submissionId && submissionIdData[submissionId];
+  }
 
-    const { data: submissions } = await fetchSubmissions(courseId || $course.id);
+  async function firstRender(courseId: string) {
+    const { data: submissions } = await fetchSubmissions(courseId);
     const sectionById: { [key: number]: sectionType[] } = {};
     if (submissions) {
       for (const submission of submissions) {
@@ -318,13 +320,9 @@
       value: Array.isArray(sectionById[index + 1]) ? sectionById[index + 1].length : 0,
       items: Array.isArray(sectionById[index + 1]) ? sectionById[index + 1] : []
     }));
-  });
-
-  $: {
-    const query = new URLSearchParams($page.url.search);
-    submissionId = query.get('submissionId');
-    openExercise = !!submissionId && submissionIdData[submissionId];
   }
+
+  $: browser && $course.id && firstRender($course.id);
 </script>
 
 <MarkExerciseModal