Auto show course w/invite + Fix saving

src/components/Buttons/Close/index.svelte

@@ -4,8 +4,9 @@
 
   export let onClick;
   export let contained;
+  export let color = '';
 </script>
 
-<IconButton {onClick} {contained}>
+<IconButton {onClick} {color} {contained}>
   <Close24 class="carbon-icon" title="Close" />
 </IconButton>

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}
+<Tabs {tabs} {currentTab} {onChange}>
-  <EditMode />
+  <slot:fragment slot="content">
-{:else}
+    <TabContent value={tabs[0].value} index={currentTab}>
-  <ViewMode />
+      {#if mode === MODES.edit}
-{/if}
+        <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: '',
+    note: null,
-    slide: '',
+    slide_url: null,
-    video: '',
+    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) {
+export async function handleUpdateLessonMaterials(lesson, lessonId) {
-  return await updateLesson(lesson.materials, lesson.id);
+  return await updateLesson(lesson.materials, lessonId);
 }

src/components/IconButton/index.svelte

@@ -7,6 +7,7 @@
   export let contained = false;
   export let value = '';
   export let size = 'large';
+  export let color = '';
   export let toolTipProps = {
     title: '',
     hotkeys: [],
@@ -24,7 +25,7 @@
   direction={toolTipProps.direction}
 >
   <button
-    class="root {selected && 'active'} {size} {contained &&
+    class="root {color} {selected && 'active'} {size} {contained &&
       'contained'} {buttonClassName}"
     {disabled}
     on:click={handleClick}
@@ -36,7 +37,6 @@
 <style lang="scss">
   .root {
     flex: 0 0 auto;
-    color: rgba(0, 0, 0, 0.54);
     padding: 12px;
     font-size: 1.5rem;
     text-align: center;

src/components/Snackbar/constants.js

@@ -0,0 +1,13 @@
+export const SNACKBAR_SEVERITY = {
+  ERROR: 'ERROR',
+  WARNING: 'WARNING',
+  INFO: 'INFO',
+  SUCCESS: 'SUCCESS',
+};
+
+export const SNACKBAR_SEVERITY_COLOR = {
+  ERROR: 'bg-red-600',
+  WARNING: 'bg-yellow-600',
+  INFO: 'bg-blue-600',
+  SUCCESS: 'bg-green-600',
+};

src/components/Snackbar/index.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import Information24 from 'carbon-icons-svelte/lib/Information24';
+  import Warning24 from 'carbon-icons-svelte/lib/Warning24';
+  import CheckmarkOutline24 from 'carbon-icons-svelte/lib/CheckmarkOutline24';
+
+  import CloseButton from '../Buttons/Close/index.svelte';
+  import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
+  import { snackbarStore } from './store';
+
+  let severityColor = SNACKBAR_SEVERITY_COLOR[$snackbarStore.severity];
+
+  function handleClose() {
+    if (typeof $snackbarStore.handleClose === 'number') {
+      $snackbarStore.handleClose();
+    }
+
+    $snackbarStore.open = false;
+  }
+
+  // When open is true trigger autoHideDuration
+  function handleOpen(open) {
+    if (!open) {
+      return;
+    }
+
+    const { autoHideDuration } = $snackbarStore;
+
+    if (typeof autoHideDuration === 'number') {
+      setTimeout(handleClose, autoHideDuration);
+    }
+  }
+
+  $: handleOpen($snackbarStore.open);
+</script>
+
+{#if $snackbarStore.open}
+  <div
+    transition:fly={{ y: 200, duration: 1000 }}
+    class="root text-white rounded-md flex justify-between items-center z-50 absolute {severityColor}"
+  >
+    <div class="flex items-center">
+      {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
+        <CheckmarkOutline24 class="carbon-icon" />
+      {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
+        <Warning24 class="carbon-icon" />
+      {:else}
+        <Information24 class="carbon-icon" />
+      {/if}
+      <p class="ml-2 text-lg">{$snackbarStore.message}</p>
+    </div>
+
+    <CloseButton onClick={handleClose} contained={true} color="text-white" />
+  </div>
+{/if}
+
+<style>
+  .root {
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    left: 50%;
+    right: auto;
+    bottom: 24px;
+    transform: translateX(-50%);
+    min-width: 288px;
+    padding: 6px 16px;
+    flex-wrap: wrap;
+  }
+</style>

src/components/Snackbar/store.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+import { SNACKBAR_SEVERITY } from './constants';
+
+export const snackbarStore = writable({
+  open: false,
+  message: '',
+  severity: SNACKBAR_SEVERITY.INFO,
+  handleClose: () => {},
+  autoHideDuration: 6000,
+});

src/routes/_layout.svelte

@@ -9,13 +9,13 @@
   import { stores, goto } from '@sapper/app';
   import Tailwindcss from '../components/Tailwindcss.svelte';
   import Navigation from '../components/Navigation/index.svelte';
+  import Snackbar from '../components/Snackbar/index.svelte';
   // import SideBar from "../components/SideBar/index.svelte";
   // import Footer from '../components/Footer/index.svelte';
   // import Apps from '../components/Apps/index.svelte';
   import { handleAuthChange } from '../utils/functions/api';
   import { user, profile } from '../utils/store/user';
   import { getSupabase } from '../utils/functions/supabase';
-  import { setProfileIdOfGroupMember } from '../utils/services/courses';
 
   export let segment;
   export let config;
@@ -62,11 +62,10 @@
         $user.currentSession = authUser;
 
         profile.set(data[0]);
-        await setProfileIdOfGroupMember(authUser.email, data[0].id);
 
         // If user coming to login page, then
         if (path.includes('login') || path.includes('signup')) {
-          goto('/dashboard');
+          goto('/profile/' + $profile.id);
         }
       }
     } else if (profileData) {
@@ -77,11 +76,9 @@
       console.log(`profileData`, profileData);
       profile.set(profileData);
 
-      setProfileIdOfGroupMember(authUser.email, profileData.id);
-
       // If user coming to login page, then
       if (path.includes('login') || path.includes('signup')) {
-        goto('/dashboard');
+        goto('/profile/' + $profile.id);
       }
     }
   }
@@ -132,6 +129,7 @@
 <Tailwindcss />
 
 <!-- <Nav {segment} /> -->
+<Snackbar />
 
 <main>
   {#if !['login', 'signup'].includes(path) && !isCoursePage(path)}

src/routes/courses.svelte

@@ -31,6 +31,7 @@
   import { ROLE } from '../utils/constants/roles';
   import { addGroupMember } from '../utils/services/courses';
   import { supabase } from '../utils/functions/supabase';
+  import { setProfileIdOfGroupMember } from '../utils/services/courses';
 
   // const { page } = stores();
 
@@ -106,6 +107,11 @@
     console.log(`getCourses process.browser`, process.browser, cantFetch);
     if (process.browser) {
       if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
+        const updatedProfile = await setProfileIdOfGroupMember(
+          $profile.email,
+          userId
+        );
+        console.log(`updatedProfile`, updatedProfile);
         const coursesResult = await fetchCourses(userId);
         console.log(`coursesResult`, coursesResult);
 

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

@@ -4,15 +4,21 @@
     fetchLesson,
   } from '../../../../../utils/services/courses';
 
-  export async function preload({ params }, session) {
+  export async function preload({ params }) {
+    const { id: courseId, lessonParams = [] } = params;
+    const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
+
     return {
-      params,
+      courseId,
+      lessonId,
+      exerciseRouteName,
+      exerciseId,
+      isMaterialsTabActive: !exerciseRouteName,
     };
   }
 </script>
 
 <script>
-  import { onMount, afterUpdate } from 'svelte';
   import { stores } from '@sapper/app';
   import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
 
@@ -28,44 +34,36 @@
   } from '../../../../../components/Course/store';
   import { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
 
-  export let params;
+  export let courseId;
   export let lessonId;
   export let exerciseId;
   export let isMaterialsTabActive;
 
   let path;
   let mode = MODES.view;
+  let prevMode;
   let prevLessonId;
 
   const { page } = stores();
 
-  async function fetchReqData() {
+  async function fetchReqData(lessonId) {
-    const { id: courseId, lessonParams = [] } = params;
-    const [_lessonId, exerciseRouteName, _exerciseId] = lessonParams;
-
-    let courseData;
     let lessonData;
 
     if (!$course.id) {
       const [_course, lesson] = await Promise.all([
         fetchCourse(courseId),
-        fetchLesson(_lessonId),
+        fetchLesson(lessonId),
       ]);
 
-      courseData = _course.data;
       lessonData = lesson.data;
-    } else if (prevLessonId && prevLessonId !== _lessonId) {
-      const lesson = await fetchLesson(_lessonId);
 
+      setCourseData(_course.data);
+    } else if (prevLessonId !== lessonId) {
+      const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;
     }
 
-    prevLessonId = _lessonId;
+    prevLessonId = lessonId;
-    lessonId = _lessonId;
-    exerciseId = _exerciseId;
-    isMaterialsTabActive = !exerciseRouteName;
-
-    setCourseData(courseData);
     setLesson(lessonData);
   }
 
@@ -82,10 +80,9 @@
   $: path = $page.path.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 
   $: {
-    console.log(`params`, params);
+    if (courseId) {
-    if (params) {
       mode = MODES.view;
-      fetchReqData();
+      fetchReqData(lessonId);
     }
   }
 </script>
@@ -111,8 +108,10 @@
           <PrimaryButton
             className="mr-2"
             label={mode === MODES.edit ? 'Save' : 'Edit'}
-            onClick={() =>
+            onClick={() => {
-              (mode = mode === MODES.edit ? MODES.view : MODES.edit)}
+              prevMode = mode;
+              mode = mode === MODES.edit ? MODES.view : MODES.edit;
+            }}
           />
         </div>
       {/if}
@@ -123,7 +122,7 @@
     <Exercises {lessonId} {exerciseId} path={`${path}/exercises`} />
   {:else if !!lessonId}
     <PageBody>
-      <Materials {lessonId} {mode} />
+      <Materials {lessonId} {mode} {prevMode} />
     </PageBody>
   {/if}
 </CourseContainer>

src/routes/profile/[id].svelte

@@ -141,6 +141,13 @@
           className="w-60 mb-4"
           inputClassName="rounded-md"
         />
+        <TextField
+          label="Email"
+          bind:value={currentProfile.email}
+          className="w-60 mb-4"
+          inputClassName="rounded-md"
+          isDisabled={true}
+        />
 
         {#if avatar || initialValueOfUserName !== currentProfile.username || initialValueOfFullName !== currentProfile.fullname}
           <PrimaryButton

src/utils/services/courses/index.js

@@ -137,7 +137,7 @@ export function createLesson(lesson) {
 export function updateLesson(lesson, lessonId) {
   return supabase
     .from('lesson')
-    .update(lesson, { returning: 'minimal' })
+    .update({ ...lesson, id: undefined }, { returning: 'minimal' })
     .match({ id: lessonId });
 }