chore: debugging improvements 🚀 (#77)

* improve layout.server * fix date behavior * change direction of padlock icon on lesson * feat: implement delete confirmation on lesson * fix: course landing page improvements
2023-12-04 19:39:39 +03:00
parent 1b69c6106f
commit f4141b08b3
16 changed files with 179 additions and 160 deletions
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import cloneDeep from 'lodash/cloneDeep';
  import set from 'lodash/set';
  import get from 'lodash/get';
@@ -7,32 +7,37 @@
  import TextField from '$lib/components/Form/TextField.svelte';
  import UploadImage from '$lib/components/UploadImage/index.svelte';
  import { uploadAvatar } from '$lib/utils/services/courses';
+  import type { Course } from '$lib/utils/types';

-  export let course = {};
-  let name;
-  let role;
-  let imgUrl;
-  let description;
-  let courseNo;
-  let avatar;
+  export let course: Course;
+  let name: string | undefined;
+  let role: string | undefined;
+  let imgUrl: string | undefined;
+  let description: string | undefined;
+  let courseNo: string | undefined;
+  let avatar: string | undefined;
  let hasBeenSet = false;

-  function setter(value, setterKey) {
+  function setter(value: any, setterKey: string) {
    if (!value) return;

    const _course = cloneDeep(course);
    set(_course, setterKey, value);
+
    course = _course;
  }

-  async function onAvatarChange(_avatar) {
-    if (!_avatar) return;
+  async function onAvatarChange(_avatar: string | undefined) {
+    if (!_avatar || !course.id) return;

    const logo = await uploadAvatar(course.id, _avatar);
+
+    if (!logo) return;
+
    imgUrl = logo;
  }

-  function setDefaults(course) {
+  function setDefaults(course: Course) {
    if (isEmpty(course) || hasBeenSet) return;

    hasBeenSet = true;
@@ -78,7 +83,7 @@
 <TextArea
  label="About instructor"
  placeholder="A short background about the instructor"
-  rows="6"
+  rows={6}
  className="mt-5"
  labelClassName="font-bold"
  bind:value={description}
@@ -1,7 +1,7 @@
 <script lang="ts">
  import TextEditor from '$lib/components/TextEditor/index.svelte';

-  export let value: string;
+  export let value: string | undefined;
 </script>

 <div class="h-2/5">
@@ -27,6 +27,7 @@

  export let course: Course;
  export let courseId: string;
+  export let syncCourseStore: (course: Course) => void;

  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
  let loading = false;
@@ -123,9 +124,9 @@
      polls: undefined,
      slug: course.slug
    });
-    loading = false;

-    return `${window.location.origin}/course/${course.slug}`;
+    loading = false;
+    syncCourseStore(course);
  }
  /**
   * 1. Use all you have for editing now
@@ -149,10 +150,11 @@
      size={$isMobile ? 'large' : 'small'}
      color="text-black"
      toolTipProps={$isMobile
-        ? {}
+        ? undefined
        : {
            title: 'Toggle editor',
-            direction: 'right'
+            direction: 'right',
+            hotkeys: []
          }}
    >
      {#if show}
@@ -86,7 +86,7 @@
  $: video = get(courseData, 'metadata.videoUrl');
  $: bannerImage = get(courseData, 'logo');
  $: lessons = get(courseData, 'lessons', []);
-  $: instructor = courseData?.metadata?.instructor || {};
+  $: instructor = get(courseData, 'metadata.instructor') || {};
  $: initPlyr(player, video);
  $: {
    reviews = get(courseData, 'metadata.reviews') || [];
@@ -276,7 +276,7 @@
                  {/if}
                  {#if lesson.note}
                    <span class="text-sm font-light flex w-2/4"
-                      ><Notebook size={16} class="mr-1" />1 note</span
+                      ><Notebook size={16} class="mr-1" />note</span
                    >
                  {/if}
                </div>