Clean up and bug fix where collaborate link would not immediatly load…

… received to-do
Rerbun · Apr 28, 2024 · 07c8873 · 07c8873
1 parent 8b1ef62
commit 07c8873
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/src/components/TodoList.svelte b/src/components/TodoList.svelte
@@ -9,7 +9,7 @@
 
   let editMode: boolean = false;
 
-  computedTodo.listen((value) => {
+  computedTodo.subscribe((value) => {
     todo = Todo.fromObject(value);
   });
 

diff --git a/src/stores/todo.ts b/src/stores/todo.ts
@@ -1,9 +1,9 @@
 import { browser } from '$app/environment';
 import { atom, computed, type ReadableAtom, type WritableAtom } from 'nanostores';
 import cycle from 'cycle';
-import { source } from 'sveltekit-sse';
 import { Todo } from '../interfaces/Todo';
 import { storeTodo } from '../utils/storage-utils';
+import { initSSE } from '../utils/sse-utils';
 
 export const serializeTodo = (todo: Todo | Record<string, any>) => {
   return JSON.stringify(cycle.decycle(todo));
@@ -21,36 +21,22 @@ const instancedTodo: WritableAtom<Todo | undefined> = atom(null);
 
 export const todoAtom: ReadableAtom<Todo | undefined> = computed(
   [deserializedTodo, instancedTodo],
-  (instance, object) => instance || object
+  (object, instance) => instance || object
 );
 
-let sse: { todoId: string; subscription: any } = { todoId: null, subscription: null };
-todoAtom.listen((todo) => sseHandler(todo?.publishId));
-const sseHandler = (todoId: string) => {
-  if (sse.todoId !== todoId) {
-    sse?.subscription?.close();
-    if (todoId) {
-      sse = {
-        todoId,
-        subscription: source(
-          '/api/events',
-          // @ts-ignore
-          { options: { headers: { 'todo-id': todoId } } }
-        ),
-      };
-      sse.subscription.select('todoUpdate').subscribe((todoString: string) => {
-        if (!todoString) return;
-        const updatedTodo = deserializeTodo(todoString);
-        const currentTodo = instancedTodo.get();
-        if (currentTodo && currentTodo.findDescendantById(updatedTodo.id)) {
-          updatedTodo.publishId = updatedTodo.id;
-          updateTodo(Todo.fromObject(updatedTodo), false);
-        }
-      });
-    }
+const onUpdateReceived = (todoString: string) => {
+  if (!todoString) return;
+  const updatedTodo = deserializeTodo(todoString);
+  const currentTodo = instancedTodo.get();
+  if (currentTodo && currentTodo.findDescendantById(updatedTodo.id)) {
+    updatedTodo.publishId = updatedTodo.id;
+    updateTodo(Todo.fromObject(updatedTodo), false);
   }
 };
 
+// Re-initialize SSE when the publishId changes
+todoAtom.listen((todo) => initSSE(todo?.publishId, onUpdateReceived));
+
 export const updateTodo = async (todo: Todo, publishUpdate: boolean = true) => {
   storeTodo(todo);
   if (publishUpdate && todo.publishId && todo.isInstance) {

diff --git a/src/utils/sse-utils.ts b/src/utils/sse-utils.ts
@@ -0,0 +1,23 @@
+import { source } from 'sveltekit-sse';
+
+let todoId: string = null;
+let subscription: ReturnType<typeof source> = null;
+
+export const initSSE = (publishId: string, callback: (todoString: string) => void) => {
+  if (todoId === publishId) {
+    return;
+  }
+
+  subscription?.close();
+
+  subscription = source('/api/events', {
+    options: {
+      headers: { 'todo-id': publishId },
+      timeout: undefined,
+    },
+  });
+
+  subscription.select('todoUpdate').subscribe(callback);
+
+  todoId = publishId;
+};