interactions copypasta removal

src/stores/statuses.js

@@ -305,34 +305,66 @@ export const useStatusesStore = defineStore('statuses', {
     },
 
     // Actions
-    /// Favorite
+    requestInteract({ name, id, optimisticCall, apiCall, argument, value }) {
-    favorite(id) {
+      const oldValue = !value // Assumption
-      this.setFavorited({ id, value: true })
 
-      favorite({
+      const apiArgs = (() => {
-        id: status.id,
+        switch (name) {
+          case 'emoji':
+            return { emoji: argument }
+          case 'bookmark':
+            return { folder_id: argument }
+          default:
+            return {}
+        }
+      })()
+
+      // Optimistic
+      optimisticCall(id, value, argument)
+
+      return apiCall({
+        id,
+        ...apiArgs,
         credentials: useOAuthStore().token,
-      }).then(({ data: status, timestamp }) => {
+      })
+        .then(({ data: status, timestamp }) => {
           this.addNewStatuses({
             statuses: [status],
             timestamp,
           })
         })
+        .catch((error) => {
+          optimisticCall(id, oldValue, argument)
+
+          useInterfaceStore().pushGlobalNotice({
+            level: 'error',
+            messageKey: 'status.react_error',
+            messageArgs: [error],
+            timeout: 5000,
+          })
+        })
+    },
+
+    /// Favorite
+    favorite(id) {
+      return this.requestInteract({
+        name: 'favorite',
+        id,
+        apiCall: favorite,
+        optimisticCall: this.setFavorited,
+        value: true,
+      })
     },
     unfavorite(id) {
-      this.setFavorited({ id, value: false })
+      return this.requestInteract({
-
+        name: 'favorite',
-      unfavorite({
         id,
-        credentials: useOAuthStore().token,
+        apiCall: unfavorite,
-      }).then(({ data: status, timestamp }) => {
+        optimisticCall: this.setFavorited,
-        this.addNewStatuses({
+        value: false,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
-    setFavorited({ id, value }) {
+    setFavorited(id, value) {
       const newStatus = this.allStatuses.get(id)
 
       if (newStatus.favorited !== value) {
@@ -348,33 +380,25 @@ export const useStatusesStore = defineStore('statuses', {
 
     /// Reprööt
     retweet(id) {
-      this.setRetweeted({ id, value: true })
+      return this.requestInteract({
-
+        name: 'retweet',
-      retweet({
         id,
-        credentials: useOAuthStore().token,
+        apiCall: retweet,
-      }).then(({ data: status, timestamp }) => {
+        optimisticCall: this.setRetweeted,
-        this.addNewStatuses({
+        value: true,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
     unretweet(id) {
-      this.setRetweeted({ id, value: false })
+      return this.requestInteract({
-
+        name: 'retweet',
-      unretweet({
         id,
-        credentials: useOAuthStore().token,
+        apiCall: unretweet,
-      }).then(({ data: status, timestamp }) => {
+        optimisticCall: this.setRetweeted,
-        this.addNewStatuses({
+        value: false,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
-    setRetweeted({ statusId, value }) {
+    setRetweeted(id, value) {
-      const newStatus = this.allStatuses.get(statusId)
+      const newStatus = this.allStatuses.get(id)
 
       if (newStatus.repeated !== value) {
         if (value) {
@@ -389,185 +413,151 @@ export const useStatusesStore = defineStore('statuses', {
 
     // React
     reactWithEmoji(id, emoji) {
-      this.addOwnReaction({ id, emoji })
+      return this.requestInteract({
-
+        name: 'emoji',
-      reactWithEmoji({
         id,
-        emoji,
+        apiCall: reactWithEmoji,
-        credentials: useOAuthStore().token,
+        optimisticCall: this.setOwnReaction,
-      }).then(({ data: status, timestamp }) => {
+        argument: emoji,
-        this.addNewStatuses({
+        value: true,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
     unreactWithEmoji(id, emoji) {
-      this.removeOwnReaction({ id, emoji })
+      return this.requestInteract({
-
+        name: 'emoji',
-      unreactWithEmoji({
         id,
-        emoji,
+        apiCall: unreactWithEmoji,
-        credentials: useOAuthStore().token,
+        optimisticCall: this.setOwnReaction,
-      }).then(({ data: status, timestamp }) => {
+        argument: emoji,
-        this.addNewStatuses({
+        value: false,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
-    addOwnReaction(id, emoji) {
+    setOwnReaction(id, value, emoji) {
       const currentUser = useUsersStore().currentUser
       const status = this.allStatuses.get(id)
       const reactionIndex = status.emoji_reactions.findIndex(
         (react) => react.name === emoji,
       )
+      const reactionPresent = reactionIndex >= 0
+      if (!value && !reactionPresent) return
+
       const reaction = status.emoji_reactions[reactionIndex] || {
         name: emoji,
         count: 0,
         accounts: [],
       }
 
-      const newReaction = {
+      const count = value ? reaction.count + 1 : reaction.count - 1
-        ...reaction,
-        count: reaction.count + 1,
-        me: true,
-        accounts: [...reaction.accounts, currentUser],
-      }
 
-      // Update count of existing reaction if it exists, otherwise append at the end
+      const accounts = value
-      if (reactionIndex >= 0) {
+        ? [...reaction.accounts, currentUser]
-        status.emoji_reactions[reactionIndex] = newReaction
+        : accounts.filter((acc) => acc.id !== currentUser.id)
-      } else {
-        status.emoji_reactions.push(newReaction)
-      }
-    },
-    removeOwnReaction(id, emoji) {
-      const currentUser = useUsersStore().currentUser
-      const status = this.allStatuses.get(id)
-      const reactionIndex = status.emoji_reactions.findIndex(
-        (react) => react.name === emoji,
-      )
-      if (reactionIndex < 0) return
-
-      const reaction = status.emoji_reactions[reactionIndex]
-      const accounts = reaction.accounts || []
 
       const newReaction = {
         ...reaction,
-        count: reaction.count - 1,
+        count,
-        me: false,
+        me: value,
-        accounts: accounts.filter((acc) => acc.id !== currentUser.id),
+        accounts,
       }
 
-      if (newReaction.count > 0) {
+      if (reactionPresent && count > 0) {
         status.emoji_reactions[reactionIndex] = newReaction
-      } else {
+      } else if (count === 0) {
         status.emoji_reactions = status.emoji_reactions.filter(
           (r) => r.name !== emoji,
         )
+      } else {
+        status.emoji_reactions.push(newReaction)
       }
     },
 
     /// Bookmark
     bookmark(id, bookmark_folder_id) {
-      this.setBookmarked({ id, value: true, bookmark_folder_id })
+      return this.requestInteract({
-
+        name: 'bookmark',
-      bookmarkStatus({
         id,
-        folder_id: bookmark_folder_id,
+        apiCall: bookmarkStatus,
-        credentials: useOAuthStore().token,
+        optimisticCall: this.setBookmarked,
-      }).then(({ data: status, timestamp }) => {
+        argument: bookmark_folder_id,
-        this.addNewStatuses({
+        value: false,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
     unbookmark(id) {
-      this.setBookmarked({ id, value: false })
+      return this.requestInteract({
-
+        name: 'bookmark',
-      unbookmarkStatus({
         id,
-        credentials: useOAuthStore().token,
+        apiCall: unbookmarkStatus,
-      }).then(({ data: status, timestamp }) => {
+        optimisticCall: this.setBookmarked,
-        this.addNewStatuses({
+        value: false,
-          statuses: [status],
-          timestamp,
-        })
       })
     },
-    setBookmarked({ id, value, bookmark_folder_id }) {
+    setBookmarked(id, value, bookmark_folder_id) {
       const status = this.allStatuses.get(id)
       status.bookmarked = value
+
+      // When unbookmarking we don't specify folder so we wanna keep
+      // reference to the folder even when setting bookmarked to false
+      // the proper reference will be updated when api call resolves
+      if (bookmark_folder_id) {
         status.bookmark_folder_id = value ? bookmark_folder_id : null
+      }
     },
 
     /// Mute
     muteConversation(id) {
-      return muteConversation({
+      return this.requestInteract({
+        name: 'mute',
         id,
-        credentials: useOAuthStore().token,
+        apiCall: muteConversation,
+        optimisticCall: this.setMutedStatus,
+        value: false,
       })
-        .then(({ data: status, timestamp }) => {
-          this.addNewStatuses({
-            statuses: [status],
-            timestamp,
-          })
-          return status
-        })
-        .then((status) => this.setMutedStatus(status))
     },
     unmuteConversation(id) {
-      return unmuteConversation({
+      return this.requestInteract({
+        name: 'mute',
         id,
-        credentials: useOAuthStore().token,
+        apiCall: unmuteConversation,
+        optimisticCall: this.setMutedStatus,
+        value: false,
       })
-        .then(({ data: status, timestamp }) => {
-          this.addNewStatuses({
-            statuses: [status],
-            timestamp,
-          })
-          return status
-        })
-        .then((status) => this.setMutedStatus(status))
     },
-    setMutedStatus({ id, thread_muted }) {
+    setMutedStatus(id, value) {
       // Setting thread_muted flag on all other known statuses
       // belonging to same conversation
       const newStatus = this.allStatuses.get(id)
-      newStatus.thread_muted = thread_muted
+      newStatus.thread_muted = value
 
       if (newStatus.thread_muted !== undefined) {
         this.conversations
           .get(newStatus.statusnet_conversation_id)
           .forEach((status) => {
-            status.thread_muted = thread_muted
+            status.thread_muted = value
           })
       }
     },
 
     /// Pin
     pinStatus(id) {
-      return pinOwnStatus({
+      return this.requestInteract({
+        name: 'pin',
         id,
-        credentials: useOAuthStore().token,
+        apiCall: pinOwnStatus,
-      }).then(({ data: status, timestamp }) => {
+        optimisticCall: () => {
-        this.addNewStatuses({
+          /* no-op */
-          statuses: [status],
+        },
-          timestamp,
+        value: true,
-        })
       })
     },
     unpinStatus(id) {
-      return unpinOwnStatus({
+      return this.requestInteract({
+        name: 'pin',
         id,
-        credentials: useOAuthStore().token,
+        apiCall: unpinOwnStatus,
-      }).then(({ data: status, timestamp }) => {
+        optimisticCall: () => {
-        this.addNewStatuses({
+          /* no-op */
-          statuses: [status],
+        },
-          timestamp,
+        value: false,
-        })
       })
     },