Refactored ReactionFile to EmojiReaction and CommentReaction; Made tr…

…ansitReactions post agnostic;
homebase-id · Oct 24, 2024 · f71e0aa · f71e0aa
1 parent 33a2c41
commit f71e0aa
Show file tree

Hide file tree

Showing 18 changed files with 263 additions and 228 deletions.
diff --git a/packages/chat-app/src/components/Chat/Composer/ChatReactionComposer.tsx b/packages/chat-app/src/components/Chat/Composer/ChatReactionComposer.tsx
@@ -64,9 +64,8 @@ export const ChatReactionComposer = ({
               setIsReact(false);
             }}
             doUnlike={(emoji) => {
-              const reactionFile = myReactions?.find((reaction) => reaction.body === emoji);
-              if (reactionFile)
-                removeReaction({ conversation, message: msg, reaction: reactionFile });
+              const reaction = myReactions?.find((reaction) => reaction.body === emoji);
+              if (reaction) removeReaction({ conversation, message: msg, reaction: reaction });
               setIsReact(false);
             }}
           />

diff --git a/packages/chat-app/src/hooks/chat/useChatReaction.ts b/packages/chat-app/src/hooks/chat/useChatReaction.ts
@@ -6,7 +6,7 @@ import {
   getGroupReactions,
   GroupEmojiReaction,
   HomebaseFile,
-  ReactionFile,
+  EmojiReaction,
   ReactionPreview,
   uploadGroupReaction,
 } from '@homebase-id/js-lib/core';
@@ -71,7 +71,7 @@ export const useChatReaction = (props?: {
   }: {
     conversation: HomebaseFile<UnifiedConversation>;
     message: HomebaseFile<ChatMessage>;
-    reaction: ReactionFile;
+    reaction: EmojiReaction;
   }) => {
     const conversationContent = conversation.fileMetadata.appData.content;
     const identity = dotYouClient.getIdentity();
@@ -99,9 +99,9 @@ export const useChatReaction = (props?: {
       onMutate: async ({ message, reaction }) => {
         // Update the reaction overview
         const previousReactions =
-          queryClient.getQueryData<ReactionFile[]>(['chat-reaction', message.fileId]) || [];
+          queryClient.getQueryData<EmojiReaction[]>(['chat-reaction', message.fileId]) || [];
 
-        const newReaction: ReactionFile = {
+        const newReaction: EmojiReaction = {
           authorOdinId: dotYouClient.getIdentity(),
           body: reaction,
         };
@@ -141,7 +141,7 @@ export const useChatReaction = (props?: {
 
       onMutate: async ({ message, reaction }) => {
         // Update the reaction overview
-        const previousReactions = queryClient.getQueryData<ReactionFile[] | undefined>([
+        const previousReactions = queryClient.getQueryData<EmojiReaction[] | undefined>([
           'chat-reaction',
           message.fileId,
         ]);
@@ -199,7 +199,7 @@ export const insertNewReaction = (
   messageLocalFileId: string,
   newReaction: GroupEmojiReaction
 ) => {
-  const currentReactions = queryClient.getQueryData<ReactionFile[] | undefined>([
+  const currentReactions = queryClient.getQueryData<EmojiReaction[] | undefined>([
     'chat-reaction',
     messageLocalFileId,
   ]);
@@ -209,20 +209,20 @@ export const insertNewReaction = (
     return;
   }
 
-  const reactionAsReactionFile: ReactionFile = {
+  const reactionAsEmojiReaction: EmojiReaction = {
     authorOdinId: newReaction.odinId,
     body: tryJsonParse<{ emoji: string }>(newReaction.reactionContent).emoji,
   };
 
-  queryClient.setQueryData<ReactionFile[]>(
+  queryClient.setQueryData<EmojiReaction[]>(
     ['chat-reaction', messageLocalFileId],
     [
       ...currentReactions.filter(
         (reaction) =>
-          reaction.authorOdinId !== reactionAsReactionFile.authorOdinId ||
-          reaction.body !== reactionAsReactionFile.body
+          reaction.authorOdinId !== reactionAsEmojiReaction.authorOdinId ||
+          reaction.body !== reactionAsEmojiReaction.body
       ),
-      reactionAsReactionFile,
+      reactionAsEmojiReaction,
     ]
   );
 };
@@ -232,7 +232,7 @@ export const removeReaction = (
   messageLocalFileId: string,
   removedReaction: GroupEmojiReaction
 ) => {
-  const currentReactions = queryClient.getQueryData<ReactionFile[] | undefined>([
+  const currentReactions = queryClient.getQueryData<EmojiReaction[] | undefined>([
     'chat-reaction',
     messageLocalFileId,
   ]);
@@ -242,17 +242,17 @@ export const removeReaction = (
     return;
   }
 
-  const reactionAsReactionFile: ReactionFile = {
+  const reactionAsEmojiReaction: EmojiReaction = {
     authorOdinId: removedReaction.odinId,
     body: tryJsonParse<{ emoji: string }>(removedReaction.reactionContent).emoji,
   };
 
-  queryClient.setQueryData<ReactionFile[]>(
+  queryClient.setQueryData<EmojiReaction[]>(
     ['chat-reaction', messageLocalFileId],
     currentReactions.filter(
       (reaction) =>
-        reaction.authorOdinId !== reactionAsReactionFile.authorOdinId ||
-        reaction.body !== reactionAsReactionFile.body
+        reaction.authorOdinId !== reactionAsEmojiReaction.authorOdinId ||
+        reaction.body !== reactionAsEmojiReaction.body
     )
   );
 };
diff --git a/packages/common-app/src/hooks/reactions/comments/useComments.tsx b/packages/common-app/src/hooks/reactions/comments/useComments.tsx
@@ -1,13 +1,13 @@
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 import { getComments, ReactionContext } from '@homebase-id/js-lib/public';
 
-import { HomebaseFile, ReactionFile } from '@homebase-id/js-lib/core';
+import { HomebaseFile, CommentReaction } from '@homebase-id/js-lib/core';
 import { useDotYouClient } from '../../auth/useDotYouClient';
 
 const PAGE_SIZE = 30;
 
 export interface UseCommentsVal {
-  comments: HomebaseFile<ReactionFile>[];
+  comments: HomebaseFile<CommentReaction>[];
   cursorState: string | undefined;
 }
 
@@ -24,7 +24,7 @@ export const useComments = ({ context }: { context: ReactionContext }) => {
     pageParam?: string;
   }): Promise<UseCommentsVal> => {
     if (!context.odinId || !context.channelId || !context.target.globalTransitId)
-      return { comments: [] as HomebaseFile<ReactionFile>[], cursorState: undefined };
+      return { comments: [] as HomebaseFile<CommentReaction>[], cursorState: undefined };
 
     const response = await getComments(dotYouClient, context, PAGE_SIZE, pageParam);
     setTimeout(() => {

diff --git a/packages/common-app/src/hooks/reactions/emojis/useEmojiReactions.tsx b/packages/common-app/src/hooks/reactions/emojis/useEmojiReactions.tsx
@@ -1,7 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { getReactions, ReactionContext } from '@homebase-id/js-lib/public';
+import { GetTargetDriveFromChannelId, ReactionContext } from '@homebase-id/js-lib/public';
 
-import { ReactionFile } from '@homebase-id/js-lib/core';
+import { getReactions, EmojiReaction } from '@homebase-id/js-lib/core';
 import { useDotYouClient } from '../../auth/useDotYouClient';
 
 const PAGE_SIZE = 15;
@@ -21,9 +21,19 @@ export const useEmojiReactions = (context?: ReactionContext) => {
       !context?.channelId ||
       (!context?.target?.fileId && !context?.target?.globalTransitId)
     ) {
-      return { reactions: [] as ReactionFile[], cursor: undefined };
+      return { reactions: [] as EmojiReaction[], cursor: undefined };
     }
-    return await getReactions(dotYouClient, context, PAGE_SIZE, pageParam);
+    return await getReactions(
+      dotYouClient,
+      context.odinId,
+      {
+        fileId: context.target.fileId,
+        globalTransitId: context.target.globalTransitId,
+        targetDrive: GetTargetDriveFromChannelId(context.channelId),
+      },
+      PAGE_SIZE,
+      pageParam
+    );
   };
 
   return {

diff --git a/packages/common-app/src/hooks/reactions/useReaction.tsx b/packages/common-app/src/hooks/reactions/useReaction.tsx
@@ -12,7 +12,7 @@ import {
 import { getRichTextFromString } from '../../helpers/richTextHelper';
 import { UseCommentsVal } from './comments/useComments';
 
-import { HomebaseFile, NewHomebaseFile, ReactionFile } from '@homebase-id/js-lib/core';
+import { CommentReaction, HomebaseFile, NewHomebaseFile } from '@homebase-id/js-lib/core';
 import { useDotYouClient } from '../auth/useDotYouClient';
 
 export const useReaction = () => {
@@ -25,7 +25,7 @@ export const useReaction = () => {
   }: {
     context: ReactionContext;
     commentData:
-      | Omit<HomebaseFile<ReactionFile>, 'serverMetadata'>
+      | Omit<HomebaseFile<CommentReaction>, 'serverMetadata'>
       | Omit<NewHomebaseFile<RawReactionContent>, 'serverMetadata'>;
   }) => {
     return await saveComment(dotYouClient, context, {
@@ -50,7 +50,7 @@ export const useReaction = () => {
     commentFile,
   }: {
     context: ReactionContext;
-    commentFile: HomebaseFile<ReactionFile>;
+    commentFile: HomebaseFile<CommentReaction>;
   }) => {
     return await removeComment(dotYouClient, context, commentFile);
   };
@@ -91,7 +91,7 @@ export const useReaction = () => {
         let newInfinite: InfiniteData<UseCommentsVal>;
         if (prevInfinite) {
           if (
-            (toSaveCommentData.commentData as HomebaseFile<ReactionFile>).fileMetadata
+            (toSaveCommentData.commentData as HomebaseFile<CommentReaction>).fileMetadata
               .globalTransitId
           ) {
             newInfinite = {
@@ -101,11 +101,11 @@ export const useReaction = () => {
                   ...page,
                   comments: page.comments.map((comment) =>
                     comment.fileMetadata.globalTransitId ===
-                    (toSaveCommentData.commentData as HomebaseFile<ReactionFile>).fileMetadata
+                    (toSaveCommentData.commentData as HomebaseFile<CommentReaction>).fileMetadata
                       .globalTransitId
                       ? toSaveCommentData.commentData
                       : comment
-                  ) as HomebaseFile<ReactionFile>[],
+                  ) as HomebaseFile<CommentReaction>[],
                 };
               }),
             };
@@ -116,7 +116,7 @@ export const useReaction = () => {
               comments: [
                 toSaveCommentData.commentData,
                 ...firstPage.comments,
-              ] as HomebaseFile<ReactionFile>[],
+              ] as HomebaseFile<CommentReaction>[],
             };
             const newPages = [newFirtPage, ...prevInfinite.pages.slice(1)];
 
@@ -133,7 +133,8 @@ export const useReaction = () => {
       },
       onSuccess: (savedGlobalId, savedCommentData) => {
         if (
-          (savedCommentData.commentData as HomebaseFile<ReactionFile>).fileMetadata.globalTransitId
+          (savedCommentData.commentData as HomebaseFile<CommentReaction>).fileMetadata
+            .globalTransitId
         ) {
           // it was a normal update, already covered on the onMutate;
           return;

diff --git a/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/Comment.tsx b/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/Comment.tsx
@@ -9,7 +9,7 @@ import { CommentHead } from './Parts/CommentHead';
 import { CommentBody } from './Parts/CommentBody';
 import { CommentMeta } from './Parts/CommentMeta';
 import { CommentThread } from './Parts/CommentThread';
-import { HomebaseFile, NewHomebaseFile, ReactionFile } from '@homebase-id/js-lib/core';
+import { HomebaseFile, NewHomebaseFile, CommentReaction } from '@homebase-id/js-lib/core';
 import { CanReactInfo } from '../../../../hooks/reactions/useCanReact';
 import { useReaction } from '../../../../hooks/reactions/useReaction';
 import { ErrorNotification } from '../../../../ui/Alert/ErrorNotification';
@@ -21,7 +21,7 @@ import { t } from '../../../../helpers/i18n/dictionary';
 export interface CommentProps {
   context: ReactionContext;
   canReact?: CanReactInfo;
-  commentData: HomebaseFile<ReactionFile> | NewHomebaseFile<RawReactionContent>;
+  commentData: HomebaseFile<CommentReaction> | NewHomebaseFile<RawReactionContent>;
   isThread: boolean;
   onReply?: () => void;
 }
@@ -51,8 +51,8 @@ export const Comment = ({ context, canReact, commentData, onReply, isThread }: C
     ...context,
     target: {
       fileId: commentData.fileId,
-      globalTransitId: (commentData as HomebaseFile<ReactionFile>).fileMetadata.globalTransitId,
-      isEncrypted: (commentData as HomebaseFile<ReactionFile>).fileMetadata.isEncrypted || false,
+      globalTransitId: (commentData as HomebaseFile<CommentReaction>).fileMetadata.globalTransitId,
+      isEncrypted: (commentData as HomebaseFile<CommentReaction>).fileMetadata.isEncrypted || false,
     },
   };
 
@@ -103,7 +103,7 @@ export const Comment = ({ context, canReact, commentData, onReply, isThread }: C
                   ? () =>
                       removeComment({
                         context,
-                        commentFile: commentData as HomebaseFile<ReactionFile>,
+                        commentFile: commentData as HomebaseFile<CommentReaction>,
                       })
                   : undefined
               }
@@ -113,7 +113,9 @@ export const Comment = ({ context, canReact, commentData, onReply, isThread }: C
               content={commentContent}
               previewThumbnail={commentData.fileMetadata.appData.previewThumbnail}
               commentFileId={fileId}
-              commentLastModifed={(commentData as HomebaseFile<ReactionFile>).fileMetadata.updated}
+              commentLastModifed={
+                (commentData as HomebaseFile<CommentReaction>).fileMetadata.updated
+              }
               isEdit={isEdit}
               onCancel={() => setIsEdit(false)}
               onUpdate={doUpdate}
@@ -125,8 +127,8 @@ export const Comment = ({ context, canReact, commentData, onReply, isThread }: C
           <CommentMeta
             canReact={canReact}
             threadContext={threadContext as ReactionContext}
-            created={(commentData as HomebaseFile<ReactionFile>).fileMetadata.created}
-            updated={(commentData as HomebaseFile<ReactionFile>).fileMetadata.updated}
+            created={(commentData as HomebaseFile<CommentReaction>).fileMetadata.created}
+            updated={(commentData as HomebaseFile<CommentReaction>).fileMetadata.updated}
             onReply={isThread ? undefined : () => (onReply ? onReply() : setIsReply(!isReply))}
           />
         ) : null}

diff --git a/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/Parts/CommentBody.tsx b/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/Parts/CommentBody.tsx
@@ -7,7 +7,7 @@ import { RichTextRenderer } from '../../../../../richText';
 import { CommentEditor } from '../CommentComposer';
 import { CommentMedia, CommentMediaPreview } from './CommentMedia';
 import { ActionButtonState } from '../../../../../ui';
-import { EmbeddedThumb, ReactionFile } from '@homebase-id/js-lib/core';
+import { CommentReaction, EmbeddedThumb } from '@homebase-id/js-lib/core';
 
 export const CommentBody = ({
   context,
@@ -23,7 +23,7 @@ export const CommentBody = ({
   context?: ReactionContext;
   commentFileId?: string;
   commentLastModifed?: number;
-  content: RawReactionContent | ReactionFile;
+  content: RawReactionContent | CommentReaction;
   isEdit?: boolean;
   onUpdate?: (commentBody: string, attachment?: File) => void;
   onCancel?: () => void;

diff --git a/...ommon-app/src/socialFeed/Blocks/Interacts/ReactionDetailsDialog/ReactionDetailsDialog.tsx b/...ommon-app/src/socialFeed/Blocks/Interacts/ReactionDetailsDialog/ReactionDetailsDialog.tsx
@@ -1,7 +1,7 @@
 import { ReactionContext } from '@homebase-id/js-lib/public';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ReactionFile } from '@homebase-id/js-lib/core';
+import { EmojiReaction } from '@homebase-id/js-lib/core';
 import { t } from '../../../../helpers';
 import { usePortal, useEmojiReactions, useEmojiSummary } from '../../../../hooks';
 import { DialogWrapper, ActionButton } from '../../../../ui';
@@ -34,10 +34,10 @@ export const ReactionDetailsDialog = ({
 
   const flattenedReactions = reactionDetails?.pages
     .flatMap((page) => page?.reactions)
-    .filter(Boolean) as ReactionFile[];
+    .filter(Boolean) as EmojiReaction[];
 
   const filteredEmojis = reactionSummary?.reactions?.filter((reaction) =>
-    flattenedReactions?.some((reactionFile) => reactionFile.body === reaction.emoji)
+    flattenedReactions?.some((rct) => rct.body === reaction.emoji)
   );
 
   useEffect(() => {

diff --git a/...es/community-app/src/components/Community/Message/reactions/CommunityReactionComposer.tsx b/...es/community-app/src/components/Community/Message/reactions/CommunityReactionComposer.tsx
@@ -36,8 +36,8 @@ export const CommunityReactionComposer = ({
       defaultValue={[]}
       doLike={(emoji) => addReaction({ community, message: msg, reaction: emoji })}
       doUnlike={(emoji) => {
-        const reactionFile = myReactions?.find((reaction) => reaction.body === emoji);
-        if (reactionFile) removeReaction({ community, message: msg, reaction: reactionFile });
+        const reaction = myReactions?.find((reaction) => reaction.body === emoji);
+        if (reaction) removeReaction({ community, message: msg, reaction: reaction });
       }}
     />
   );