fix: prevent duplicate comment channel subscriptions and improve translation check

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/Comments.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import Avatar from '$lib/components/Avatar/index.svelte';
-  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
+  import {
+    lesson,
+    lessonCommentsChannel
+  } from '$lib/components/Course/components/Lesson/store/lessons';
   import { group } from '$lib/components/Course/store';
   import TextArea from '$lib/components/Form/TextArea.svelte';
   import DeleteModal from '$lib/components/Modal/DeleteModal.svelte';
@@ -26,7 +29,6 @@
   export let lessonId = '';
 
   let comment = '';
-  let lessonCommentChannel: RealtimeChannel;
   let comments: LessonComment[] = [];
   let groupmember: GroupPerson | undefined;
   let isSaving: boolean = false;
@@ -243,18 +245,22 @@
   onMount(async () => {
     fetchComments($group.people);
 
-    lessonCommentChannel = supabase
+    if (!$lessonCommentsChannel) {
-      .channel('any')
+      lessonCommentsChannel.set(
-      .on(
+        supabase
-        'postgres_changes',
+          .channel('any')
-        { event: 'INSERT', schema: 'public', table: 'lesson_comment' },
+          .on(
-        handleInsert
+            'postgres_changes',
-      )
+            { event: 'INSERT', schema: 'public', table: 'lesson_comment' },
-      .subscribe();
+            handleInsert
+          )
+          .subscribe()
+      );
+    }
   });
 
   onDestroy(() => {
-    supabase.removeChannel(lessonCommentChannel);
+    supabase.removeChannel($lessonCommentsChannel);
   });
 </script>
 

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte

@@ -16,7 +16,9 @@
     $lesson.locale
   );
   $: hasAtLeastOneTranslation = Object.values($lessonByTranslation[lessonId] || {}).some(
-    (c) => !!c.length
+    (content) => {
+      return content && !!content.length;
+    }
   );
 </script>
 
@@ -29,8 +31,8 @@
     </svelte:fragment>
   </HtmlRender>
 {:else if hasAtLeastOneTranslation}
-  <div class="flex items-center justify-center flex-col text-center">
+  <div class="flex flex-col items-center justify-center text-center">
-    <h3 class="text-lg font-normal italic dark:text-white py-2">
+    <h3 class="py-2 text-lg font-normal italic dark:text-white">
       {$t('course.navItem.lessons.materials.no_translation')}
     </h3>
   </div>

apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts

@@ -10,6 +10,7 @@ import {
 } from '$lib/utils/services/courses';
 
 import { LOCALE } from '$lib/utils/types';
+import type { RealtimeChannel } from '@supabase/supabase-js';
 import { lessonValidation } from '$lib/utils/functions/validator';
 import { snackbar } from '$lib/components/Snackbar/store';
 import { writable } from 'svelte/store';
@@ -23,6 +24,8 @@ export const lessons: Writable<Lesson[]> = writable([]);
 
 export const lessonSections: Writable<LessonSection[]> = writable([]);
 
+export const lessonCommentsChannel: Writable<RealtimeChannel> = writable();
+
 export const lesson = writable<LessonPage>({
   id: null,
   locale: LOCALE.EN,