Upload avatar

src/components/Course/components/Navigation/index.svelte

@@ -1,14 +1,17 @@
 <script>
   import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
   import { stores, goto } from '@sapper/app';
   import hotkeys from 'hotkeys-js';
+  import Home32 from 'carbon-icons-svelte/lib/Home32';
   import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
   import Settings20 from 'carbon-icons-svelte/lib/Settings20';
-  import ChevronLeft32 from 'carbon-icons-svelte/lib/ChevronLeft32';
+  import ChevronLeft16 from 'carbon-icons-svelte/lib/ChevronLeft16';
-  import ChevronRight32 from 'carbon-icons-svelte/lib/ChevronRight32';
+  import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
   import Expandable from '../../../Expandable/index.svelte';
   import PageNav from '../../../PageNav/index.svelte';
   import IconButton from '../../../IconButton/index.svelte';
+  import Avatar from '../../../Avatar/index.svelte';
   import {
     getNavItemRoute,
     getLessonsRoute,
@@ -20,10 +23,11 @@
   import { lessons } from '../Lesson/store/lessons';
   import { course } from '../../store';
   import { updateCourse } from '../../../../utils/services/courses';
+  import { profile } from '../../../../utils/store/user';
 
   // export let lessonId;
   export let path;
-  let show = null;
+  let show = true;
 
   const { page } = stores();
 
@@ -45,7 +49,11 @@
   }
 
   onMount(() => {
-    show = localStorage.getItem('hideCourseNav') === 'false';
+    if (localStorage.getItem('hideCourseNav')) {
+      show = localStorage.getItem('hideCourseNav') === 'false';
+    } else {
+      show = true;
+    }
 
     hotkeys('b', function (event, handler) {
       event.preventDefault();
@@ -101,23 +109,22 @@
 </script>
 
 <Settings />
+
 <div class="root z-10 {!show && 'hide'}">
   {#if show}
-    <PageNav
+    <div class="relative h-full">
-      bind:title={$course.title}
+      <PageNav bind:title={$course.title} paddingClass="pl-2">
-      onEditComplete={handleSaveTitle}
+        <slot:fragment slot="image">
-      isTitleEditable={true}
+          <Avatar src={$course.logo} />
-      paddingClass="pl-2"
+        </slot:fragment>
-    >
+        <slot:fragment slot="widget">
-      <slot:fragment slot="widget">
+          <IconButton
-        <IconButton
+            onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
-          onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
+          >
-        >
+            <Settings20 class="carbon-icon" />
-          <Settings20 class="carbon-icon" />
+          </IconButton>
-        </IconButton>
+        </slot:fragment>
-      </slot:fragment>
+      </PageNav>
-    </PageNav>
-    <div>
       {#each navItems as navItem}
         <Expandable
           label={navItem.label}
@@ -134,7 +141,9 @@
                   'cursor-not-allowed'}"
                 href={getLessonsRoute($course.id, item.id)}
               >
-                <span class="course-counter"> {getLectureNo(index + 1)} </span>
+                <span class="course-counter">
+                  {getLectureNo(index + 1)}
+                </span>
                 <span>{item.title}</span>
                 {#if item.is_complete}
                   <span class="ml-2 success">
@@ -148,12 +157,28 @@
           {/if}
         </Expandable>
       {/each}
+
+      <div
+        class="w-full footer p-3 absolute bottom-2 flex items-center justify-between"
+      >
+        <IconButton
+          value="toggle"
+          onClick={() => goto('/courses')}
+          buttonClassName="mx-3"
+        >
+          <Home32 class="carbon-icon" />
+        </IconButton>
+        <a class="block mx-3" href={`/profile/${$profile.id}`}>
+          <Avatar src={$profile.avatar_url} name={$profile.username} />
+        </a>
+      </div>
     </div>
   {/if}
-  <div class="toggler absolute bottom-0 -right-0.5">
+  <div class="toggler rounded-full shadow-lg absolute bottom-0">
     <IconButton
       value="toggle"
       onClick={() => (show = !show)}
+      size="small"
       toolTipProps={{
         title: 'Toggle sidebar',
         hotkeys: ['B'],
@@ -161,9 +186,9 @@
       }}
     >
       {#if show}
-        <ChevronLeft32 class="carbon-icon" />
+        <ChevronLeft16 class="carbon-icon" />
       {:else}
-        <ChevronRight32 class="carbon-icon" />
+        <ChevronRight16 class="carbon-icon" />
       {/if}
     </IconButton>
   </div>
@@ -171,7 +196,7 @@
 
 <style lang="scss">
   .root {
-    height: 93vh;
+    height: 100vh;
     display: flex;
     flex-direction: column;
     min-width: 360px;
@@ -182,11 +207,16 @@
     background-color: rgb(250, 251, 252);
 
     &.hide {
-      min-width: 0px;
+      min-width: 15px;
-      max-width: 0px;
+      max-width: 15px;
     }
   }
 
+  .footer {
+    border-top: 1px solid var(--border-color);
+    height: 50px;
+  }
+
   .active {
     background-color: #cae2f9;
     border-left: 3px solid var(--main-primary-color);
@@ -209,10 +239,11 @@
   }
 
   .toggler {
-    right: -58px;
+    right: -15px;
     z-index: 10;
     border: 1px solid var(--border-color);
-    border-top-right-radius: 20px;
+    top: 50px;
-    border-bottom-right-radius: 20px;
+    height: fit-content;
+    background: var(--border-color);
   }
 </style>

src/components/Course/components/People/InviationModal.svelte

@@ -65,6 +65,7 @@
   onClose={resetForm}
   bind:open={$invitationModal.open}
   width="w-2/5"
+  maxWidth="max-w-lg"
   modalHeading="Invite people"
 >
   <form on:submit|preventDefault={addPerson}>

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

@@ -1,7 +1,9 @@
 <script>
   import Modal from '../../../Modal/index.svelte';
+  import TextField from '../../../Form/TextField.svelte';
   import TextArea from '../../../Form/TextArea.svelte';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import UploadImage from '../../../UploadImage/index.svelte';
 
   import { VARIANTS } from '../../../PrimaryButton/constants';
   import { settingsDialog } from './store';
@@ -12,22 +14,43 @@
   } from '../../../../utils/services/courses';
 
   let shouldDelete = false;
+  let avatar;
+  let errors = {};
 
   async function updateDescription() {
-    console.log('update');
+    if (!$course.title) {
+      errors.title = 'Title cannot be empty';
+      return;
+    }
+    if (!$course.description) {
+      errors.description = 'Description cannot be empty';
+      return;
+    }
 
     $settingsDialog.open = false;
-    await updateCourse($course.id, {
+    const logo = await updateCourse($course.id, {
+      avatar,
+      title: $course.title,
       description: $course.description,
     });
+
+    if (logo) {
+      $course.logo = logo;
+    }
+
+    avatar = undefined;
   }
 
   async function handleDelete() {
-    console.log('delete');
-
     $settingsDialog.open = false;
     await deleteCourse($course.id);
   }
+
+  function setAvatar(logo) {
+    avatar = logo;
+  }
+
+  $: setAvatar($course.logo);
 </script>
 
 <Modal
@@ -57,6 +80,14 @@
     </form>
   {:else}
     <form on:submit|preventDefault={updateDescription}>
+      <UploadImage bind:avatar />
+      <TextField
+        bind:value={$course.title}
+        placeholder="Course title"
+        className="mb-4"
+        isRequired={true}
+        errorMessage={errors.title}
+      />
       <TextArea
         label="Short description"
         bind:value={$course.description}
@@ -65,6 +96,7 @@
         placeholder="A little description about this course"
         className="mb-4"
         isRequired={true}
+        errorMessage={errors.description}
       />
 
       <div class="mt-5 flex items-center justify-between">

src/components/Course/index.svelte

@@ -38,7 +38,7 @@
   </svelte:fragment>
 </PageNav>
 
-<PageBody>
+<PageBody width="max-w-3xl px-3">
   {#if mode === MODES.edit}
     <EditContent
       writeLabel="Note"
@@ -50,6 +50,8 @@
       }}
     />
   {:else}
-    {@html marked($course.overview || '', { breaks: true, gfm: true })}
+    <article class="preview prose prose-sm sm:prose p-2">
+      {@html marked($course.overview || '')}
+    </article>
   {/if}
 </PageBody>

src/components/IconButton/index.svelte

@@ -6,6 +6,7 @@
   export let buttonClassName = '';
   export let contained = false;
   export let value = '';
+  export let size = 'large';
   export let toolTipProps = {
     title: '',
     hotkeys: [],
@@ -23,7 +24,7 @@
   direction={toolTipProps.direction}
 >
   <button
-    class="root {selected && 'active'} {contained &&
+    class="root {selected && 'active'} {size} {contained &&
       'contained'} {buttonClassName}"
     {disabled}
     on:click={handleClick}
@@ -58,6 +59,10 @@
     }
   }
 
+  .root.small {
+    padding: 5px;
+  }
+
   .contained {
     background-color: rgba(0, 0, 0, 0.04);
   }

src/components/Modal/index.svelte

@@ -6,6 +6,7 @@
   export let onClose = () => {};
   export let modalHeading = '';
   export let width = '';
+  export let maxWidth = '';
   export let containerClass = '';
 
   afterUpdate(() => {
@@ -23,7 +24,8 @@
   >
     <div aria-hidden="true" class="backdrop" />
     <div
-      class="container bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
+      class="{maxWidth ||
+        'container'} bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
     >
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-xl m-0">

src/components/PageBody/index.svelte

@@ -19,7 +19,7 @@
 
 <style>
   .root {
-    overflow-y: scroll;
+    overflow-y: auto;
     height: 85vh;
   }
   .head {

src/components/PageNav/index.svelte

@@ -46,7 +46,10 @@
         />
       {/if}
     {:else}
-      <h4 class="title">{title}</h4>
+      <div class="flex items-center" {title}>
+        <slot name="image" />
+        <h4 class="title">{title}</h4>
+      </div>
     {/if}
   {/if}
   {#if Array.isArray(navItems) && navItems.length}
@@ -78,7 +81,12 @@
   }
 
   .title {
-    font-size: 20px;
+    font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 250px;
+    margin-left: 5px;
   }
 
   h4 {
@@ -121,11 +129,4 @@
     text-overflow: ellipsis;
     padding: 10px;
   }
-
-  @media only screen and (max-width: 1002px) {
-    .header {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
 </style>

src/components/UploadImage/index.svelte

@@ -0,0 +1,79 @@
+<script>
+  export let avatar;
+  export let src;
+  export let widthHeight;
+
+  let fileinput;
+
+  const onFileSelected = (e) => {
+    const image = e.target.files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(image);
+    reader.onload = (e) => {
+      avatar = image;
+      src = e.target.result;
+    };
+  };
+</script>
+
+<section class="flex justify-center">
+  <div
+    class="avatar-container {widthHeight ||
+      'setwidthheight'} pointer border-2 border-gray-200 relative hover:bg-gray-400 hover:bg-opacity-75 cursor-pointer rounded-full"
+    on:click={() => {
+      fileinput.click();
+    }}
+  >
+    {#if src}
+      <img class="w-full h-full rounded-full" {src} alt="d" />
+    {:else if avatar}
+      <img class="w-full h-full rounded-full" src={avatar} alt="d" />
+    {:else}
+      <img
+        class="w-full h-full rounded-full"
+        src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png"
+        alt=""
+      />
+    {/if}
+    <div
+      class="upload-icon w-full h-full flex items-center justify-center top-0"
+    >
+      <svg
+        class="text-white"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        role="presentation"
+        ><g fill="currentColor" fill-rule="evenodd"
+          ><path
+            d="M2 6.994C2 5.893 2.898 5 3.99 5h16.02C21.108 5 22 5.895 22 6.994v12.012A1.997 1.997 0 0120.01 21H3.99A1.994 1.994 0 012 19.006V6.994zM12 17a4 4 0 100-8 4 4 0 000 8zm5-8c0 .556.448 1 1 1 .556 0 1-.448 1-1 0-.556-.448-1-1-1-.556 0-1 .448-1 1zM8 4c0-.552.453-1 .997-1h6.006c.55 0 .997.444.997 1v1H8V4z"
+          /><circle cx="12" cy="13" r="2" /></g
+        ></svg
+      >
+    </div>
+  </div>
+
+  <input
+    style="display:none"
+    type="file"
+    accept=".jpg, .jpeg, .png"
+    on:change={(e) => onFileSelected(e)}
+    bind:this={fileinput}
+  />
+</section>
+
+<style>
+  .avatar-container.setwidthheight {
+    height: 128px;
+    width: 128px;
+  }
+
+  .upload-icon {
+    display: none;
+  }
+
+  .avatar-container:hover .upload-icon {
+    display: flex;
+    position: absolute;
+  }
+</style>

src/config.js

@@ -1,7 +1,7 @@
 export default {
   // isProd: process.env.NODE_ENV === 'development',
   supabaseConfig: {
-    url: process.env.SVELTE_APP_SUPABASE_URL,
+    bucketPath:
-    anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY,
+      'https://koxqonvbkeakwvmdegcf.supabase.in/storage/v1/object/sign/',
   },
 };

src/routes/_layout.svelte

@@ -62,7 +62,7 @@
         $user.currentSession = authUser;
 
         profile.set(data[0]);
-        await setProfileIdOfGroupMember(authUser.email, data[0].id);
+        // await setProfileIdOfGroupMember(authUser.email, data[0].id);
 
         // If user coming to login page, then
         if (path.includes('login') || path.includes('signup')) {
@@ -77,7 +77,7 @@
       console.log(`profileData`, profileData);
       profile.set(profileData);
 
-      setProfileIdOfGroupMember(authUser.email, profileData.id);
+      // setProfileIdOfGroupMember(authUser.email, profileData.id);
 
       // If user coming to login page, then
       if (path.includes('login') || path.includes('signup')) {
@@ -86,6 +86,10 @@
     }
   }
 
+  function isCoursePage(path) {
+    return /courses\/[a-z 0-9 -]/.test(path);
+  }
+
   onMount(() => {
     const _isMvpUser = localStorage.getItem('mvp');
 
@@ -130,7 +134,7 @@
 <!-- <Nav {segment} /> -->
 
 <main>
-  {#if !['login', 'signup'].includes(path)}
+  {#if !['login', 'signup'].includes(path) && !isCoursePage(path)}
     <Navigation {segment} disableLogin={!allowUser} />
   {/if}
 

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

@@ -12,13 +12,15 @@
 
   export let courseId;
 
+  let prevCourseId;
+
   async function onCourseIdChange(courseId) {
-    if (!courseId) return;
+    if (!courseId || prevCourseId === courseId) return;
-    console.log(`overview courseId`, courseId);
 
     const { data } = await fetchCourse(courseId);
 
     setCourseData(data);
+    prevCourseId = courseId;
   }
 
   $: onCourseIdChange(courseId);

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

@@ -248,5 +248,6 @@
 <style>
   .group {
     min-height: 170px;
+    background-color: #fafafa;
   }
 </style>

src/routes/profile/[id].svelte

@@ -14,17 +14,17 @@
   import Book16 from 'carbon-icons-svelte/lib/Book16';
   import TextField from '../../components/Form/TextField.svelte';
   import PrimaryButton from '../../components/PrimaryButton/index.svelte';
+  import UploadImage from '../../components/UploadImage/index.svelte';
   import { supabase } from '../../utils/functions/supabase';
   import { user, profile } from '../../utils/store/user';
 
   export let profileId;
 
+  let avatar;
   let loading = false;
   let currentProfile = {};
   let isOwner = false;
-  let docs = [];
+  let initialValueOfUserName, initialValueOfFullName, initialValueOfAvatar;
-  let initialValueOfUserName;
-  let initialValueOfFullName;
 
   async function getProfile(profileId) {
     loading = true;
@@ -56,9 +56,28 @@
       const updates = {
         fullname: currentProfile.fullname,
         username: currentProfile.username,
-        avatar_url: currentProfile.avatar_url,
       };
 
+      if (avatar) {
+        const filename = `user/${currentProfile.username + Date.now()}.webp`;
+
+        const { data } = await supabase.storage
+          .from('avatars')
+          .upload(filename, avatar, {
+            cacheControl: '3600',
+            upsert: false,
+          });
+
+        if (data && data.Key) {
+          const { publicURL } = supabase.storage
+            .from('avatars')
+            .getPublicUrl(filename);
+
+          updates.avatar_url = publicURL;
+        }
+        avatar = undefined;
+      }
+
       let { error } = await supabase
         .from('profile')
         .update(updates, {
@@ -66,6 +85,13 @@
         })
         .match({ id: profileId });
 
+      if (isOwner) {
+        profile.update((_profile) => ({
+          ..._profile,
+          ...updates,
+        }));
+      }
+
       if (error) throw error;
     } catch (error) {
       alert(error.message);
@@ -78,12 +104,8 @@
     }
   }
 
-  onMount(() => {});
-
   $: isOwner = $profile.id === profileId;
-  $: {
+  $: getProfile(profileId);
-    getProfile(profileId);
-  }
 </script>
 
 <svelte:head>
@@ -93,12 +115,17 @@
 <section class="root w-11/12 mt-3 m-auto flex items-start justify-between">
   {#if currentProfile.id}
     <div class="w-1/4 flex items-center flex-col">
-      <img
+      <!-- <img
         alt={currentProfile.username}
         src={currentProfile.avatar_url}
         height="260"
         width="260"
         class="rounded-full bg-light-blue-100 mb-4"
+      /> -->
+      <UploadImage
+        bind:avatar
+        src={currentProfile.avatar_url}
+        widthHeight="w-60 h-60"
       />
 
       {#if isOwner}
@@ -115,7 +142,7 @@
           inputClassName="rounded-md"
         />
 
-        {#if initialValueOfUserName !== currentProfile.username || initialValueOfFullName !== currentProfile.fullname}
+        {#if avatar || initialValueOfUserName !== currentProfile.username || initialValueOfFullName !== currentProfile.fullname}
           <PrimaryButton
             label={loading ? 'Updating...' : 'Update profile'}
             onClick={updateProfile}

src/server.js

@@ -14,6 +14,8 @@ const config = {
   isDev: process.env.NODE_ENV === 'development',
   telegramToken: process.env.SVELTE_APP_TELEGRAM_API_TOKEN,
   supabaseConfig: {
+    bucketPath:
+      'https://koxqonvbkeakwvmdegcf.supabase.in/storage/v1/object/sign',
     url: process.env.SVELTE_APP_SUPABASE_URL,
     anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY,
   },

src/utils/services/courses/index.js

@@ -7,16 +7,16 @@ export async function fetchCourse(courseId, session) {
   let jsonUser;
 
   if (!process.browser) {
-    try {
+    // try {
-      jsonUser = JSON.parse(session.user);
+    //   jsonUser = JSON.parse(session.user);
-    } catch (error) {
+    // } catch (error) {
-      console.log('Token is expired probably cause user not found');
+    //   console.log('Token is expired probably cause user not found');
-      return {
+    //   return {
-        data: [],
+    //     data: [],
-        cantFetch: true,
+    //     cantFetch: true,
-      };
+    //   };
-      // return this.redirect(301, '/login');
+    //   // return this.redirect(301, '/login');
-    }
+    // }
   }
 
   const { data, error } = await supabase
@@ -27,6 +27,7 @@ export async function fetchCourse(courseId, session) {
       title,
       description,
       overview,
+      logo,
       group(*,
         members:groupmember(*,
           profile(*)
@@ -40,7 +41,7 @@ export async function fetchCourse(courseId, session) {
     )
     .match({ id: courseId })
     .single();
-
+  console.log(`error`, error);
   if (!data || error) {
     console.log(`data`, data);
     console.log(`fetchCourse => error`, error);
@@ -82,10 +83,33 @@ export async function setProfileIdOfGroupMember(email, profileId) {
 }
 
 export async function updateCourse(courseId, course) {
-  return await supabase
+  if (course.avatar) {
+    const filename = `course/${courseId + Date.now()}.webp`;
+
+    const { data } = await supabase.storage
+      .from('avatars')
+      .upload(filename, course.avatar, {
+        cacheControl: '3600',
+        upsert: false,
+      });
+
+    if (data && data.Key) {
+      const { publicURL } = supabase.storage
+        .from('avatars')
+        .getPublicUrl(filename);
+
+      course.logo = publicURL;
+    }
+  }
+
+  delete course.avatar;
+
+  await supabase
     .from('course')
     .update(course, { returning: 'minimal' })
     .match({ id: courseId });
+
+  return course.logo;
 }
 
 export async function deleteCourse(courseId, course) {