Auto show course w/invite + Fix saving

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

@@ -1,74 +0,0 @@
-<script>
-  import { onMount, onDestroy } from 'svelte';
-  import Tabs from '../../../../Tabs/index.svelte';
-  import TabContent from '../../../../TabContent/index.svelte';
-  import EditContent from '../../../../EditContent/index.svelte';
-  import TextField from '../../../../Form/TextField.svelte';
-  import {
-    lesson,
-    handleUpdateLessonMaterials,
-    isLessonDirty,
-  } from '../store/lessons';
-
-  const tabs = [
-    {
-      label: 'Note',
-      value: 1,
-    },
-    {
-      label: 'Video',
-      value: 2,
-    },
-    {
-      label: 'Slide',
-      value: 3,
-    },
-  ];
-  let currentTab = tabs[0].value;
-
-  function onChange(tabValue) {
-    return () => {
-      currentTab = tabValue;
-    };
-  }
-
-  onMount(() => {
-    isLessonDirty.set(false);
-  });
-
-  onDestroy(() => {
-    if (!$isLessonDirty) {
-      return;
-    }
-    handleUpdateLessonMaterials($lesson);
-  });
-
-  $: console.log(`isLessonDirty`, $isLessonDirty);
-</script>
-
-<Tabs {tabs} {currentTab} {onChange}>
-  <slot:fragment slot="content">
-    <TabContent value={tabs[0].value} index={currentTab}>
-      <EditContent
-        writeLabel="Note"
-        bind:value={$lesson.materials.note}
-        placeholder="Start typing your lesson"
-        onInputChange={() => ($isLessonDirty = true)}
-      />
-    </TabContent>
-    <TabContent value={tabs[1].value} index={currentTab}>
-      <TextField
-        label="Youtube link"
-        bind:value={$lesson.materials.video_url}
-        onChange={() => ($isLessonDirty = true)}
-      />
-    </TabContent>
-    <TabContent value={tabs[2].value} index={currentTab}>
-      <TextField
-        label="Slide link"
-        bind:value={$lesson.materials.slide_url}
-        onChange={() => ($isLessonDirty = true)}
-      />
-    </TabContent>
-  </slot:fragment>
-</Tabs>

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

@@ -1,106 +0,0 @@
-<script>
-  import Tabs from '../../../../Tabs/index.svelte';
-  import TabContent from '../../../../TabContent/index.svelte';
-  import MarkdownRender from '../../../../MarkdownRender/index.svelte';
-  import Box from '../../../../Box/index.svelte';
-  import { lesson } from '../store/lessons';
-
-  const tabs = [
-    {
-      label: 'Note',
-      value: 1,
-    },
-    {
-      label: 'Video',
-      value: 2,
-    },
-    {
-      label: 'Slide',
-      value: 3,
-    },
-  ];
-
-  let currentTab = tabs[0].value;
-  let errors = {};
-
-  function onChange(tabValue) {
-    return () => {
-      currentTab = tabValue;
-    };
-  }
-
-  function formatYoutubeVideo(url) {
-    console.log(`url`, url);
-    if (url.includes('embed')) {
-      return url;
-    }
-
-    const splitedUrl = url.split('watch');
-
-    if (splitedUrl.length !== 2) {
-      errors.video = 'Wrong url format';
-
-      return;
-    }
-
-    const query = new URLSearchParams(splitedUrl[1]);
-
-    return `https://www.youtube.com/embed/${query.get('v')}`;
-  }
-</script>
-
-<Tabs {tabs} {currentTab} {onChange}>
-  <slot:fragment slot="content">
-    <TabContent value={tabs[0].value} index={currentTab}>
-      {#if $lesson.materials.note}
-        <MarkdownRender content={$lesson.materials.note} />
-      {:else}
-        <Box>
-          <h3 class="text-3xl text-gray-500">No note added</h3>
-          <img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
-        </Box>
-      {/if}
-    </TabContent>
-    <TabContent value={tabs[1].value} index={currentTab}>
-      {#if $lesson.materials.video_url && $lesson.materials.video_url.includes('youtube')}
-        {#each $lesson.materials.video_url.split(',') as url}
-          <div class="mb-5">
-            <iframe
-              width="100%"
-              height="569"
-              src={formatYoutubeVideo(url)}
-              title="YouTube video player"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
-            />
-          </div>
-        {/each}
-      {:else}
-        <Box>
-          <h3 class="text-3xl text-gray-500">No youtube video added</h3>
-          <img alt="Video not found" src="/notfound.webp" class="w-80" />
-        </Box>
-      {/if}
-    </TabContent>
-    <TabContent value={tabs[2].value} index={currentTab}>
-      {#if $lesson.materials.slide_url}
-        <iframe
-          title="Embeded Slides"
-          src={$lesson.materials.slide_url}
-          frameborder="0"
-          width="100%"
-          height="569"
-          allowfullscreen="true"
-          mozallowfullscreen="true"
-          webkitallowfullscreen="true"
-        />
-      {:else}
-        <Box>
-          <h3 class="text-3xl text-gray-500">No slide added</h3>
-          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
-        </Box>
-      {/if}
-    </TabContent>
-  </slot:fragment>
-</Tabs>

src/components/Course/components/Lesson/Materials/constants.js

@@ -0,0 +1,14 @@
+export const tabs = [
+  {
+    label: 'Note',
+    value: 1,
+  },
+  {
+    label: 'Video',
+    value: 2,
+  },
+  {
+    label: 'Slide',
+    value: 3,
+  },
+];

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

@@ -1,13 +1,137 @@
 <script>
   import MODES from '../../../../../utils/constants/mode.js';
-  import EditMode from './EditMode.svelte';
-  import ViewMode from './ViewMode.svelte';
 
-  export let mode = '';
+  import Tabs from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../TabContent/index.svelte';
+  import MarkdownRender from '../../../../MarkdownRender/index.svelte';
+  import Box from '../../../../Box/index.svelte';
+  import EditContent from '../../../../EditContent/index.svelte';
+  import TextField from '../../../../Form/TextField.svelte';
+  import {
+    lesson,
+    handleUpdateLessonMaterials,
+    isLessonDirty,
+  } from '../store/lessons';
+  import { tabs } from './constants';
+  import { onMount } from 'svelte';
+
+  export let mode = MODES.view;
+  export let prevMode = null;
+  export let lessonId;
+
+  let currentTab = tabs[0].value;
+  let errors = {};
+
+  const onChange = (tab) => () => (currentTab = tab);
+
+  function formatYoutubeVideo(url) {
+    console.log(`url`, url);
+    const prefix = 'https://www.youtube.com/embed';
+
+    // https://www.youtube.com/embed/qajK1J1neAM
+    if (url.includes('embed')) {
+      return url;
+    }
+
+    // https://youtu.be/qajK1J1neAM
+    if (url.includes('.be/')) {
+      const splittedUrlWithBe = url.split('.be/');
+
+      return `${prefix}/${splittedUrlWithBe[1]}`;
+    }
+
+    // https://www.youtube.com/watch?v=qajK1J1neAM
+    const splitedUrl = url.split('watch');
+    if (splitedUrl.length !== 2) {
+      errors.video = 'Wrong url format';
+      return;
+    }
+
+    const query = new URLSearchParams(splitedUrl[1]);
+
+    return `${prefix}/${query.get('v')}`;
+  }
+
+  function handleSave(prevMode) {
+    if (prevMode === MODES.edit) {
+      handleUpdateLessonMaterials($lesson, lessonId);
+    }
+  }
+
+  $: handleSave(prevMode);
 </script>
 
-{#if mode === MODES.edit}
-  <EditMode />
-{:else}
-  <ViewMode />
-{/if}
+<Tabs {tabs} {currentTab} {onChange}>
+  <slot:fragment slot="content">
+    <TabContent value={tabs[0].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <EditContent
+          writeLabel="Note"
+          bind:value={$lesson.materials.note}
+          placeholder="Start typing your lesson"
+          onInputChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.note}
+        <MarkdownRender content={$lesson.materials.note} />
+      {:else}
+        <Box>
+          <h3 class="text-3xl text-gray-500">No note added</h3>
+          <img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
+        </Box>
+      {/if}
+    </TabContent>
+    <TabContent value={tabs[1].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <TextField
+          label="Youtube link"
+          bind:value={$lesson.materials.video_url}
+          onChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.video_url && $lesson.materials.video_url.includes('youtube')}
+        {#each $lesson.materials.video_url.split(',') as url}
+          <div class="mb-5">
+            <iframe
+              width="100%"
+              height="569"
+              src={formatYoutubeVideo(url)}
+              title="YouTube video player"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            />
+          </div>
+        {/each}
+      {:else}
+        <Box>
+          <h3 class="text-3xl text-gray-500">No youtube video added</h3>
+          <img alt="Video not found" src="/notfound.webp" class="w-80" />
+        </Box>
+      {/if}
+    </TabContent>
+    <TabContent value={tabs[2].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <TextField
+          label="Slide link"
+          bind:value={$lesson.materials.slide_url}
+          onChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.slide_url}
+        <iframe
+          title="Embeded Slides"
+          src={$lesson.materials.slide_url}
+          frameborder="0"
+          width="100%"
+          height="569"
+          allowfullscreen="true"
+          mozallowfullscreen="true"
+          webkitallowfullscreen="true"
+        />
+      {:else}
+        <Box>
+          <h3 class="text-3xl text-gray-500">No slide added</h3>
+          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
+        </Box>
+      {/if}
+    </TabContent>
+  </slot:fragment>
+</Tabs>

src/components/Course/components/Lesson/store/lessons.js

@@ -9,9 +9,9 @@ export const lessons = writable([]);
 export const lesson = writable({
   id: null,
   materials: {
-    note: '',
-    slide: '',
-    video: '',
+    note: null,
+    slide_url: null,
+    video_url: null,
   },
   exercises: [],
 });
@@ -52,7 +52,7 @@ export function handleDelete(lessonId) {
 }
 
 export async function handleSaveLesson(lesson, course_id) {
-  console.log(`lesson`, lesson);
+  console.log(`handleSaveLesson lesson`, lesson);
   const newLesson = {
     title: lesson.title,
     lesson_at: lesson.lesson_at,
@@ -84,6 +84,6 @@ export async function handleSaveLesson(lesson, course_id) {
   );
 }
 
-export async function handleUpdateLessonMaterials(lesson) {
-  return await updateLesson(lesson.materials, lesson.id);
+export async function handleUpdateLessonMaterials(lesson, lessonId) {
+  return await updateLesson(lesson.materials, lessonId);
 }