From 7a69748965cb1dfa08ec1d806728f42458bae062 Mon Sep 17 00:00:00 2001
From: ndom91 <yo@ndo.dev>
Date: Sun, 11 Aug 2024 19:58:51 +0200
Subject: [PATCH] fix: reactive add/delete

---
 apps/web/src/lib/components/DragAdd.svelte    |  2 +-
 .../bookmark-row/DeleteDialog.svelte          |  4 +--
 apps/web/src/lib/state/bookmarks.svelte.ts    | 21 +++++++++++++++
 apps/web/src/lib/state/feeds.svelte.ts        | 12 +++++++++
 .../web/src/routes/(dashboard)/+layout.svelte | 15 +++++++++++
 .../routes/(dashboard)/archives/+page.svelte  | 26 +++++++++----------
 .../routes/(dashboard)/bookmarks/+page.svelte |  2 +-
 .../src/routes/(dashboard)/feeds/+page.svelte |  2 +-
 8 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/lib/components/DragAdd.svelte b/apps/web/src/lib/components/DragAdd.svelte
index 1b6739e..e2bc279 100644
--- a/apps/web/src/lib/components/DragAdd.svelte
+++ b/apps/web/src/lib/components/DragAdd.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { toast } from "svelte-sonner"
   import { z } from "zod"
-  import ConfirmAddDialog from "$lib/components/ConfirmAddDialog.svelte"
   import { cn } from "$/lib/utils/style"
+  import ConfirmAddDialog from "$lib/components/ConfirmAddDialog.svelte"
 
   const parseData = (text: string | undefined): string | void => {
     try {
diff --git a/apps/web/src/lib/components/bookmark-row/DeleteDialog.svelte b/apps/web/src/lib/components/bookmark-row/DeleteDialog.svelte
index 4452310..7b2ad93 100644
--- a/apps/web/src/lib/components/bookmark-row/DeleteDialog.svelte
+++ b/apps/web/src/lib/components/bookmark-row/DeleteDialog.svelte
@@ -24,8 +24,8 @@
   <div>
     <h3 class="mb-4 text-lg font-bold">Delete</h3>
     <div>
-      Are you sure you want to delete <b>{bookmark?.url}</b>? <br /><br />This action cannot be
-      undone. This will permanently delete your bookmark.
+      Are you sure you want to delete <b class="break-all">{bookmark?.url}</b>? <br /><br />This
+      action cannot be undone. This will permanently delete your bookmark.
     </div>
   </div>
   <div class="flex flex-col gap-4 sm:flex-row sm:justify-end">
diff --git a/apps/web/src/lib/state/bookmarks.svelte.ts b/apps/web/src/lib/state/bookmarks.svelte.ts
index ff09a2a..98780af 100644
--- a/apps/web/src/lib/state/bookmarks.svelte.ts
+++ b/apps/web/src/lib/state/bookmarks.svelte.ts
@@ -10,6 +10,18 @@ export class BookmarksService {
   }
 
   add(bookmark: Bookmark | Bookmark[]) {
+    if (Array.isArray(bookmark)) {
+      bookmark.forEach((bk) => {
+        if (this.bookmarks.find((savedBookmark) => savedBookmark.id === bk.id)) return
+        this.bookmarks.unshift(bk)
+      })
+    } else {
+      if (this.bookmarks.find((savedBookmark) => savedBookmark.id === bookmark.id)) return
+      this.bookmarks.unshift(bookmark)
+    }
+  }
+
+  append(bookmark: Bookmark | Bookmark[]) {
     if (Array.isArray(bookmark)) {
       bookmark.forEach((bk) => {
         if (this.bookmarks.find((savedBookmark) => savedBookmark.id === bk.id)) return
@@ -33,6 +45,15 @@ export class BookmarksService {
     }
   }
 
+  upsert(bookmark: Bookmark) {
+    const bookmarkIndex = this.bookmarks.findIndex((bk) => bk.id === bookmark.id)
+    if (bookmarkIndex) {
+      this.bookmarks[bookmarkIndex] = bookmark
+    } else {
+      this.bookmarks.push(bookmark)
+    }
+  }
+
   find(bookmarkId: string) {
     return this.bookmarks.find((bk) => bk.id === bookmarkId)
   }
diff --git a/apps/web/src/lib/state/feeds.svelte.ts b/apps/web/src/lib/state/feeds.svelte.ts
index 45e8bb7..80e327f 100644
--- a/apps/web/src/lib/state/feeds.svelte.ts
+++ b/apps/web/src/lib/state/feeds.svelte.ts
@@ -10,6 +10,18 @@ export class FeedsService {
   }
 
   add(feeds: Feed | Feed[]) {
+    if (Array.isArray(feeds)) {
+      feeds.forEach((feed) => {
+        if (this.feeds.find((savedFeed) => savedFeed.id === feed.id)) return
+        this.feeds.unshift(feed)
+      })
+    } else {
+      if (this.feeds.find((savedFeed) => savedFeed.id === feeds.id)) return
+      this.feeds.unshift(feeds)
+    }
+  }
+
+  append(feeds: Feed | Feed[]) {
     if (Array.isArray(feeds)) {
       feeds.forEach((feed) => {
         if (this.feeds.find((savedFeed) => savedFeed.id === feed.id)) return
diff --git a/apps/web/src/routes/(dashboard)/+layout.svelte b/apps/web/src/routes/(dashboard)/+layout.svelte
index f39982d..fc7b124 100644
--- a/apps/web/src/routes/(dashboard)/+layout.svelte
+++ b/apps/web/src/routes/(dashboard)/+layout.svelte
@@ -28,6 +28,21 @@
   setContext(FeedEntriesService, feedEntriesService)
   setContext(BookmarksService, bookmarksService)
 
+  $effect(() => {
+    // Deal with invalidated and re-run 'Load' functions
+    if ($page.data.bookmarks.data.length) {
+      // Add newly created to state
+      if (!bookmarksService.find($page.data.bookmarks.data[0])) {
+        bookmarksService.add($page.data.bookmarks.data[0])
+      }
+
+      // Update any potentially changed bookmarks
+      $page.data.bookmarks.data.forEach((bk: LoadBookmarkFlatTags) => {
+        bookmarksService.update(bk)
+      })
+    }
+  })
+
   const ui = useInterface()
 
   // Set current user preferences to store
diff --git a/apps/web/src/routes/(dashboard)/archives/+page.svelte b/apps/web/src/routes/(dashboard)/archives/+page.svelte
index 0de7e7c..3c2bff7 100644
--- a/apps/web/src/routes/(dashboard)/archives/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/archives/+page.svelte
@@ -12,7 +12,7 @@
   import { page } from "$app/stores"
 
   const ui = useInterface()
-  const bookmarkStore = getContext(BookmarksService)
+  const bookmarksService = getContext(BookmarksService)
 
   let pageNumber = $state(0)
   const rootElement = $state<HTMLElement>()
@@ -20,9 +20,9 @@
   const limitLoadCount = 20
   const logger = new Logger({ level: loggerLevels.DEBUG })
 
-  $effect(() => {
-    bookmarkStore.bookmarks = $page.data.bookmarks.data
-  })
+  // $effect(() => {
+  //   bookmarkStore.bookmarks = $page.data.bookmarks.data
+  // })
 
   if ($page.data.error) {
     logger.error(String($page.data.error))
@@ -95,10 +95,10 @@
       }
 
       if (searchResults.data.length) {
-        bookmarkStore.add(searchResults.data as any[])
+        bookmarksService.append(searchResults.data)
       }
 
-      if (bookmarkStore.bookmarks.length >= searchResults.count) {
+      if (bookmarksService.bookmarks.length >= searchResults.count) {
         loaderState.complete()
       } else {
         loaderState.loaded()
@@ -118,7 +118,7 @@
     if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "j" || e.key === "k") {
       e.preventDefault()
       const currentActiveElement = e.target as HTMLElement
-      const currentActiveElementIndex = bookmarkStore.bookmarks.findIndex(
+      const currentActiveElementIndex = bookmarksService.bookmarks.findIndex(
         (item) => item.id === currentActiveElement.dataset.id,
       )
       const nextIndex =
@@ -126,7 +126,7 @@
           ? currentActiveElementIndex + 1
           : currentActiveElementIndex - 1
       const nextElement = document.querySelector(
-        `[data-id="${bookmarkStore.bookmarks[nextIndex]?.id}"]`,
+        `[data-id="${bookmarksService.bookmarks[nextIndex]?.id}"]`,
       ) as HTMLElement
 
       if (nextElement) {
@@ -136,10 +136,10 @@
     if (e.key === "o") {
       e.preventDefault()
       const currentActiveElement = e.target as HTMLElement
-      const currentActiveElementIndex = bookmarkStore.bookmarks.findIndex(
+      const currentActiveElementIndex = bookmarksService.bookmarks.findIndex(
         (item) => item.id === currentActiveElement.dataset.id,
       )
-      const targetLink = bookmarkStore.bookmarks[currentActiveElementIndex]?.url
+      const targetLink = bookmarksService.bookmarks[currentActiveElementIndex]?.url
       if (!targetLink) {
         toast.error("No item selected")
         return
@@ -177,14 +177,14 @@
 
 <Navbar />
 <main class="align-start flex flex-col justify-start gap-2 overflow-y-scroll outline-none">
-  {#if bookmarkStore.bookmarks?.length}
+  {#if bookmarksService.bookmarks?.length}
     <div class="h-full">
       <InfiniteLoader triggerLoad={loadMore} intersectionOptions={{ root: rootElement }}>
-        {#each bookmarkStore.bookmarks as item (item.id)}
+        {#each bookmarksService.bookmarks as item (item.id)}
           <BookmarkRow bookmark={item} />
         {/each}
         {#snippet noData()}
-          {#if bookmarkStore.bookmarks.length >= 10}
+          {#if bookmarksService.bookmarks.length >= 10}
             <div class="text-2xl">No more data</div>
           {/if}
         {/snippet}
diff --git a/apps/web/src/routes/(dashboard)/bookmarks/+page.svelte b/apps/web/src/routes/(dashboard)/bookmarks/+page.svelte
index ef0624f..2ad34b6 100644
--- a/apps/web/src/routes/(dashboard)/bookmarks/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/bookmarks/+page.svelte
@@ -111,7 +111,7 @@
       }
 
       if (searchResults.data.length) {
-        bookmarkService.add(searchResults.data)
+        bookmarkService.append(searchResults.data)
       }
 
       if (bookmarkService.bookmarks.length >= searchResults.count) {
diff --git a/apps/web/src/routes/(dashboard)/feeds/+page.svelte b/apps/web/src/routes/(dashboard)/feeds/+page.svelte
index 9546190..4349448 100644
--- a/apps/web/src/routes/(dashboard)/feeds/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/feeds/+page.svelte
@@ -122,7 +122,7 @@
       }
 
       if (searchResults.data.length) {
-        feedEntriesService.add(searchResults.data)
+        feedEntriesService.append(searchResults.data)
       }
 
       if (feedEntriesService.feedEntries.length >= searchResults.count) {