Fetch course for CSR

src/components/Course/components/Lesson/Materials/index.svelte

@@ -1,9 +1,9 @@
 <script>
-  import MODES from "../../../../../utils/constants/mode.js";
+  import MODES from '../../../../../utils/constants/mode.js';
-  import EditMode from "./EditMode.svelte";
+  import EditMode from './EditMode.svelte';
-  import ViewMode from "./ViewMode.svelte";
+  import ViewMode from './ViewMode.svelte';
 
-  export let mode = "";
+  export let mode = '';
 </script>
 
 {#if mode === MODES.edit}

src/components/Courses/api.js

@@ -0,0 +1,16 @@
+import { supabase } from '../../utils/functions/supabase';
+
+export async function fetchCourses(userId) {
+  const { data: orgMember } = await supabase
+    .from('organizationmember')
+    .select(`organization_id`)
+    .eq('profile_id', userId)
+    .single();
+
+  const { data: allCourses } = await supabase
+    .from('course')
+    .select(`id, title, description`)
+    .eq('organization_id', orgMember.organization_id);
+
+  return { allCourses, organizationId: orgMember.organization_id };
+}

src/routes/courses.svelte

@@ -1,35 +1,18 @@
 <script context="module">
   import { profile, user } from '../utils/store/user';
-  import { supabase } from '../utils/functions/supabase';
+  import { fetchCourses } from '../components/Courses/api';
 
   export async function preload(page, params) {
-    console.log('process.browser', process.browser);
-    console.log(`user`, user);
-
-    if (process.browser) {
-      console.log('localstorage', localStorage.getItem('supabase.auth.token'));
-    }
-    console.log(`params`, params);
     const parsedUser = JSON.parse(params.user);
-    console.log(`parsedUser`, parsedUser);
+
     if (parsedUser && parsedUser.id) {
-      const { data: orgMember } = await supabase
+      return fetchCourses(parsedUser.id);
-        .from('organizationmember')
-        .select(`organization_id`)
-        .eq('profile_id', parsedUser.id)
-        .single();
-
-      const { data: allCourses } = await supabase
-        .from('course')
-        .select(`id, title, description`)
-        .eq('organization_id', orgMember.organization_id);
-
-      return { allCourses, organizationId: orgMember.organization_id };
     }
 
     return {
       allCourses: [],
       organizationId: null,
+      cantFetch: !parsedUser,
     };
   }
 </script>
@@ -51,6 +34,7 @@
 
   export let allCourses;
   export let organizationId;
+  export let cantFetch;
 
   let errors = {
     emails: '',
@@ -119,10 +103,25 @@
     });
   }
 
-  onMount(() => {
+  async function getCourses(userId) {
+    console.log(`getCourses process.browser`, process.browser);
+    if (process.browser) {
+      if (!cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
+        const coursesResult = await fetchCourses(userId);
+        console.log(`coursesResult`, coursesResult);
+
+        organizationId = coursesResult.organizationId;
+        courses.set(coursesResult.allCourses);
+      }
+    }
+  }
+
+  onMount(async () => {
+    console.log(`onMount cantFetch`, cantFetch);
     courses.set(allCourses);
   });
-  // $: tab = $page.query.tab || 'mine';
+
+  $: getCourses($profile.id);
 </script>
 
 <svelte:head>

src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte

@@ -80,6 +80,12 @@
   afterUpdate(setLesson);
 
   $: path = $page.path.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
+
+  $: {
+    if (lessonId) {
+      mode = MODES.view;
+    }
+  }
 </script>
 
 <CourseContainer {path} isExercisePage={!isMaterialsTabActive && exerciseId}>