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,46 +0,0 @@
-<script>
-  import Editor from 'cl-editor/src/Editor.svelte';
-
-  export let html = '';
-  export let editor;
-
-  let colors = [
-    '#000000',
-    '#e60000',
-    '#ff9900',
-    '#ffff00',
-    '#008a00',
-    '#0066cc',
-    '#9933ff',
-    '#ffffff',
-    '#facccc',
-    '#ffebcc',
-    '#ffffcc',
-    '#cce8cc',
-    '#cce0f5',
-    '#ebd6ff',
-    '#bbbbbb',
-    '#f06666',
-    '#ffc266',
-    '#ffff66',
-    '#66b966',
-    '#66a3e0',
-    '#c285ff',
-    '#888888',
-    '#a10000',
-    '#b26b00',
-    '#b2b200',
-    '#006100',
-    '#0047b2',
-    '#6b24b2',
-    '#444444',
-    '#5c0000',
-    '#663d00',
-    '#666600',
-    '#003700',
-    '#002966',
-    '#3d1466'
-  ];
-</script>
-
-<Editor bind:this={editor} {html} {colors} on:change={(evt) => (html = evt.detail)} />
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  export let lessonTitle: string;
+  export let openDeleteModal = false;
+  export let deleteLesson = () => {};
+
+  async function handleDelete() {
+    deleteLesson();
+    openDeleteModal = false;
+  }
+</script>
+
+<Modal
+  onClose={() => (openDeleteModal = false)}
+  bind:open={openDeleteModal}
+  width="w-96"
+  modalHeading="Delete"
+>
+  <div>
+    <h1 class="dark:text-white text-lg">
+      Are you sure you want to delete: <strong>{lessonTitle}</strong>?
+    </h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="No"
+        onClick={() => (openDeleteModal = false)}
+      />
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="Yes"
+        onClick={handleDelete}
+      />
+    </div>
+  </div>
+</Modal>
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import type { Writable, Updater } from 'svelte/store';
 import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses';
 import type { Lesson, Course, LessonPage, LessonComment } from '$lib/utils/types';
+import { snackbar } from '$lib/components/Snackbar/store';

 export const uploadCourseVideoStore = writable({
  isModalOpen: false
@@ -43,20 +44,20 @@ export function handleAddLesson() {
  }) as Updater<any>);
 }

-export function handleDelete(lessonId: Lesson['id']) {
-  return async () => {
-    // Need to implement soft delete
-    if (lessonId) {
-      const { error } = await deleteLesson(lessonId);
+export async function handleDelete(lessonId: Lesson['id'] | undefined) {
+  // Need to implement soft delete
+  if (lessonId) {
+    const { error } = await deleteLesson(lessonId);

-      if (error) {
-        return alert('Please delete all exercises first');
-      }
+    if (error) {
+      snackbar.error(error.message);
+      return console.error('Error deleting course', error);
    }

    lessons.update((_lessons) => _lessons.filter((lesson) => lesson.id !== lessonId));
-    console.log(`lessonId`, lessonId);
-  };
+  }
+
+  console.log(`lessonId`, lessonId);
 }

 export async function handleSaveLesson(lesson: Lesson, course_id: Course['id']) {
@@ -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>
@@ -1,7 +1,7 @@
 <script>
-  export let label;
-  export let placeholder;
-  export let value;
+  export let label = '';
+  export let placeholder = '';
+  export let value = '';
  export let className = '';
  export let onChange = () => {}; // This is to know if element is 'dirty'
 </script>
@@ -4,7 +4,7 @@
  import { appStore } from '$lib/utils/store/app';

  export let id = '';
-  export let value: string;
+  export let value: string | undefined = '';
  export let onChange = (html: string) => {};
  export let height = 300;
  export let placeholder = '';
@@ -14,7 +14,7 @@
  const apiKey = PUBLIC_TINYMCE_API_KEY;

  let tinmycEditor: any;
-  let unmount = false
+  let unmount = false;

  // editor configuration
  let conf = {
@@ -73,6 +73,6 @@

 <div>
  {#if !unmount}
-  <Editor bind:value {apiKey} bind:conf />
+    <Editor bind:value {apiKey} bind:conf />
  {/if}
 </div>
@@ -1,21 +1,22 @@
-<script>
+<script lang="ts">
  import Camera from 'carbon-icons-svelte/lib/Camera.svelte';

-  export let avatar = null;
-  export let src = null;
+  export let avatar: string | undefined;
+  export let src: string | undefined;
  export let widthHeight = '';
  export let shape = 'rounded-full';
-  export let errorMessage = null;
+  export let errorMessage: string | null = null;

-  let fileinput;
+  let fileinput: HTMLInputElement;

-  const onFileSelected = (e) => {
+  const onFileSelected = (e: Event<HTMLInputElement>) => {
    const image = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(image);
    reader.onload = (e) => {
      avatar = image;
-      src = e.target.result;
+      // @ts-ignore
+      src = e.target?.result || undefined;
    };
  };
 </script>