fix: prevent duplicate comment channel subscriptions and improve translation check

2025-08-03 17:59:21 +01:00
parent db21265136
commit c841823bda
3 changed files with 25 additions and 14 deletions
@@ -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) {
+      lessonCommentsChannel.set(
+        supabase
          .channel('any')
          .on(
            'postgres_changes',
            { event: 'INSERT', schema: 'public', table: 'lesson_comment' },
            handleInsert
          )
-      .subscribe();
+          .subscribe()
+      );
+    }
  });

  onDestroy(() => {
-    supabase.removeChannel(lessonCommentChannel);
+    supabase.removeChannel($lessonCommentsChannel);
  });
 </script>

@@ -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">
-    <h3 class="text-lg font-normal italic dark:text-white py-2">
+  <div class="flex flex-col items-center justify-center text-center">
+    <h3 class="py-2 text-lg font-normal italic dark:text-white">
      {$t('course.navItem.lessons.materials.no_translation')}
    </h3>
  </div>
@@ -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,