@liveblocks/react 1.4.2 → 1.4.4

package/dist/index.d.mts

@@ -476,6 +476,26 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * deleteComment({ threadId: "th_xxx", commentId: "cm_xxx" })
      */
     useDeleteComment(): (options: DeleteCommentOptions) => void;
+    /**
+     * @beta
+     *
+     * Returns a function that adds a reaction from a comment.
+     *
+     * @example
+     * const addReaction = useAddReaction();
+     * addReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
+     */
+    useAddReaction(): (options: CommentReactionOptions) => void;
+    /**
+     * @beta
+     *
+     * Returns a function that removes a reaction on a comment.
+     *
+     * @example
+     * const removeReaction = useRemoveReaction();
+     * removeReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
+     */
+    useRemoveReaction(): (options: CommentReactionOptions) => void;
 };
 declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends LsonObject, TUserMeta extends BaseUserMeta, TRoomEvent extends Json, TThreadMetadata extends BaseMetadata> = Resolve<RoomContextBundleShared<TPresence, TStorage, TUserMeta, TRoomEvent, TThreadMetadata> & {
     /**

package/dist/index.d.ts

@@ -476,6 +476,26 @@ declare type RoomContextBundleShared<TPresence extends JsonObject, TStorage exte
      * deleteComment({ threadId: "th_xxx", commentId: "cm_xxx" })
      */
     useDeleteComment(): (options: DeleteCommentOptions) => void;
+    /**
+     * @beta
+     *
+     * Returns a function that adds a reaction from a comment.
+     *
+     * @example
+     * const addReaction = useAddReaction();
+     * addReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
+     */
+    useAddReaction(): (options: CommentReactionOptions) => void;
+    /**
+     * @beta
+     *
+     * Returns a function that removes a reaction on a comment.
+     *
+     * @example
+     * const removeReaction = useRemoveReaction();
+     * removeReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
+     */
+    useRemoveReaction(): (options: CommentReactionOptions) => void;
 };
 declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends LsonObject, TUserMeta extends BaseUserMeta, TRoomEvent extends Json, TThreadMetadata extends BaseMetadata> = Resolve<RoomContextBundleShared<TPresence, TStorage, TUserMeta, TRoomEvent, TThreadMetadata> & {
     /**

package/dist/index.js

@@ -5,7 +5,7 @@ var _core = require('@liveblocks/core');
 
 // src/version.ts
 var PKG_NAME = "@liveblocks/react";
-var PKG_VERSION = "1.4.2";
+var PKG_VERSION = "1.4.4";
 var PKG_FORMAT = "cjs";
 
 // src/ClientSideSuspense.tsx
@@ -488,18 +488,37 @@ function createCommentsRoom(room, errorEventSource) {
   }) {
     const threads = getThreads();
     const now = (/* @__PURE__ */ new Date()).toISOString();
+    const userId = getCurrentUserId();
     const optimisticData = threads.map(
       (thread) => thread.id === threadId ? {
         ...thread,
-        comments: thread.comments.map(
-          (comment) => comment.id === commentId ? {
-            ...comment,
-            reactions: [
+        comments: thread.comments.map((comment) => {
+          if (comment.id !== commentId) {
+            return comment;
+          }
+          let reactions;
+          if (comment.reactions.some((reaction) => reaction.emoji === emoji)) {
+            reactions = comment.reactions.map(
+              (reaction) => reaction.emoji === emoji ? {
+                ...reaction,
+                users: [...reaction.users, { id: userId }]
+              } : reaction
+            );
+          } else {
+            reactions = [
               ...comment.reactions,
-              { emoji, userId: getCurrentUserId(), createdAt: now }
-            ]
-          } : comment
-        )
+              {
+                emoji,
+                createdAt: now,
+                users: [{ id: userId }]
+              }
+            ];
+          }
+          return {
+            ...comment,
+            reactions
+          };
+        })
       } : thread
     );
     mutate(room.addReaction({ threadId, commentId, emoji }), {
@@ -521,17 +540,37 @@ function createCommentsRoom(room, errorEventSource) {
     emoji
   }) {
     const threads = getThreads();
+    const userId = getCurrentUserId();
     const optimisticData = threads.map(
       (thread) => thread.id === threadId ? {
         ...thread,
         comments: thread.comments.map((comment) => {
+          if (comment.id !== commentId) {
+            return comment;
+          }
           const reactionIndex = comment.reactions.findIndex(
-            (reaction) => reaction.emoji === emoji && reaction.userId === getCurrentUserId()
+            (reaction) => reaction.emoji === emoji
           );
-          return comment.id === commentId ? {
+          let reactions = comment.reactions;
+          if (reactionIndex > 0 && comment.reactions[reactionIndex].users.some(
+            (user) => user.id === userId
+          )) {
+            if (comment.reactions[reactionIndex].users.length <= 1) {
+              reactions = [...comment.reactions];
+              reactions.splice(reactionIndex, 1);
+            } else {
+              reactions[reactionIndex] = {
+                ...reactions[reactionIndex],
+                users: reactions[reactionIndex].users.filter(
+                  (user) => user.id !== userId
+                )
+              };
+            }
+          }
+          return {
             ...comment,
-            reactions: reactionIndex < 0 ? comment.reactions : comment.reactions.slice(0, reactionIndex).concat(comment.reactions.slice(reactionIndex + 1))
-          } : comment;
+            reactions
+          };
         })
       } : thread
     );
@@ -692,8 +731,12 @@ var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_
 function useSyncExternalStore3(s, gs, gss) {
   return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, s, gs, gss, identity);
 }
-function getEmptyOthers() {
-  return [];
+var STABLE_EMPTY_LIST = Object.freeze([]);
+function alwaysEmptyList() {
+  return STABLE_EMPTY_LIST;
+}
+function alwaysNull() {
+  return null;
 }
 function makeMutationContext(room) {
   const errmsg = "This mutation cannot be used until connected to the Liveblocks room";
@@ -850,7 +893,7 @@ function createRoomContext(client, options) {
     const room = useRoom();
     const subscribe = room.events.others.subscribe;
     const getSnapshot = room.getOthers;
-    const getServerSnapshot = getEmptyOthers;
+    const getServerSnapshot = alwaysEmptyList;
     return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       subscribe,
       getSnapshot,
@@ -965,7 +1008,7 @@ function createRoomContext(client, options) {
       (me) => me !== null ? selector(me) : null,
       [selector]
     );
-    const getServerSnapshot = React2.useCallback(() => null, []);
+    const getServerSnapshot = alwaysNull;
     return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       subscribe,
       getSnapshot,
@@ -978,7 +1021,7 @@ function createRoomContext(client, options) {
     const room = useRoom();
     const subscribe = room.events.storageDidLoad.subscribeOnce;
     const getSnapshot = room.getStorageSnapshot;
-    const getServerSnapshot = React2.useCallback(() => null, []);
+    const getServerSnapshot = alwaysNull;
     return useSyncExternalStore3(subscribe, getSnapshot, getServerSnapshot);
   }
   function useStorageRoot() {
@@ -1065,7 +1108,7 @@ function createRoomContext(client, options) {
         return imm;
       }
     }, [rootOrNull]);
-    const getServerSnapshot = React2.useCallback(() => null, []);
+    const getServerSnapshot = alwaysNull;
     return _withselectorjs.useSyncExternalStoreWithSelector.call(void 0, 
       subscribe,
       getSnapshot,