Update:Bookmarks modal is not closed on updating/deleting and does not show a toast #882

components/modals/BookmarksModal.vue

@@ -105,30 +105,28 @@ export default {
       this.$nativeHttp
         .delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
         .then(() => {
-          this.$toast.success('Bookmark removed')
+          this.$store.commit('user/deleteBookmark', { libraryItemId: this.libraryItemId, time: bm.time })
         })
         .catch((error) => {
           this.$toast.error(`Failed to remove bookmark`)
           console.error(error)
         })
-      this.show = false
     },
     async clickBookmark(bm) {
       await this.$hapticsImpact()
       this.$emit('select', bm)
     },
     submitUpdateBookmark(updatedBookmark) {
-      var bookmark = { ...updatedBookmark }
       this.$nativeHttp
-        .patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
-        .then(() => {
-          this.$toast.success('Bookmark updated')
+        .patch(`/api/me/item/${this.libraryItemId}/bookmark`, updatedBookmark)
+        .then((bookmark) => {
+          this.$store.commit('user/updateBookmark', bookmark)
+          this.showBookmarkTitleInput = false
         })
         .catch((error) => {
           this.$toast.error(`Failed to update bookmark`)
           console.error(error)
         })
-      this.show = false
     },
     submitCreateBookmark() {
       if (!this.newBookmarkTitle) {

store/user.js

@@ -145,5 +145,21 @@ export const mutations = {
   setSettings(state, settings) {
     if (!settings) return
     state.settings = settings
+  },
+  updateBookmark(state, bookmark) {
+    if (!state.user?.bookmarks) return
+    state.user.bookmarks = state.user.bookmarks.map((bm) => {
+      if (bm.libraryItemId === bookmark.libraryItemId && bm.time === bookmark.time) {
+        return bookmark
+      }
+      return bm
+    })
+  },
+  deleteBookmark(state, { libraryItemId, time }) {
+    if (!state.user?.bookmarks) return
+    state.user.bookmarks = state.user.bookmarks.filter(bm => {
+      if (bm.libraryItemId === libraryItemId && bm.time === time) return false
+      return true
+    })
   }
 }