Sync with Server

src/routes/courses/[id]/people.svelte

@@ -1,33 +1,41 @@
 <script context="module">
-  export async function preload({ params }) {
-    let [courseId] = params.id;
+  import { fetchCourse } from '../../../utils/services/courses';
 
-    const res = await this.fetch(`api/course?id=${courseId}`);
-    const data = await res.json();
-
-    if (res.status === 200) {
-      return { courseId, courseData: data };
-    } else {
-      this.error(res.status, data.message);
+  export async function preload({ params }, session) {
+    if (process.browser) {
+      return {};
     }
+
+    const {
+      data,
+      // error
+    } = await fetchCourse(params.id, session);
+
+    return { courseData: data };
   }
 </script>
 
 <script>
-  import { stores } from "@sapper/app";
-  import CourseContainer from "../../../components/CourseContainer/index.svelte";
-  import PageNav from "../../../components/PageNav/index.svelte";
-  import UserCard from "../../../components/UserCard/index.svelte";
+  import { onMount } from 'svelte';
+  import { stores } from '@sapper/app';
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import PageNav from '../../../components/PageNav/index.svelte';
+  import UserCard from '../../../components/UserCard/index.svelte';
+  import { setCourseData } from '../../../components/Course/store';
 
   export let courseData = {};
 
   const { page } = stores();
 
-  const teachers = courseData.people;
+  const teachers = [];
   const students = [...teachers, ...teachers, ...teachers];
+
+  onMount(() => {
+    setCourseData(courseData);
+  });
 </script>
 
-<CourseContainer {courseData}>
+<CourseContainer>
   <PageNav title="People" disableSticky={true} />
   <div class="m-3">
     <h3>