Individual reactions for meetings (#4271)

webkom · Nov 22, 2023 · d76f248 · d76f248
1 parent 4bb84ce
commit d76f248
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 2 deletions.
diff --git a/app/actions/ReactionActions.ts b/app/actions/ReactionActions.ts
@@ -1,14 +1,17 @@
 import callAPI from 'app/actions/callAPI';
 import { Reaction } from './ActionTypes';
 import type { ID } from 'app/models';
+import type { CurrentUser } from 'app/store/models/User';
 import type { Thunk } from 'app/types';
 
 export function addReaction({
   emoji,
+  user,
   contentTarget,
   unicodeString,
 }: {
   emoji: string;
+  user?: CurrentUser;
   contentTarget: string;
   unicodeString: string;
 }): Thunk<void> {
@@ -24,6 +27,7 @@ export function addReaction({
         },
         meta: {
           emoji,
+          user: user,
           contentTarget,
           unicodeString,
         },

diff --git a/app/components/LegoReactions/index.tsx b/app/components/LegoReactions/index.tsx
@@ -3,11 +3,14 @@ import Reaction from 'app/components/Reactions/Reaction';
 import type { ID } from 'app/store/models';
 import type Emoji from 'app/store/models/Emoji';
 import type { ReactionsGrouped } from 'app/store/models/Reaction';
+import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
 type Props = {
+  user: CurrentUser;
   addReaction: (args: {
     emoji: string;
+    user: CurrentUser;
     contentTarget: ContentTarget;
     unicodeString: string;
   }) => Promise<void>;
@@ -21,6 +24,7 @@ type Props = {
   parentEntity: {
     contentTarget: ContentTarget;
     reactionsGrouped?: ReactionsGrouped[];
+    reactions?: { author: { fullName: string }; emoji: string }[];
   };
   loggedIn: boolean;
 };
@@ -32,6 +36,7 @@ export type EmojiWithReactionData = Emoji & {
 
 const LegoReactions = (props: Props) => {
   const {
+    user,
     addReaction,
     deleteReaction,
     emojis,
@@ -58,24 +63,38 @@ const LegoReactions = (props: Props) => {
     });
   }
 
+  const usersByReaction = {};
+
+  if (parentEntity.reactions) {
+    for (const reaction of parentEntity.reactions) {
+      if (!usersByReaction[reaction.emoji]) {
+        usersByReaction[reaction.emoji] = [];
+      }
+      usersByReaction[reaction.emoji].push(reaction.author);
+    }
+  }
+
   return (
     <Reactions
       emojis={mappedEmojis}
+      user={user}
       fetchEmojis={fetchEmojis}
       fetchingEmojis={fetchingEmojis}
       addReaction={addReaction}
       deleteReaction={deleteReaction}
       contentTarget={parentEntity.contentTarget}
       loggedIn={loggedIn}
     >
-      {parentEntity.reactionsGrouped.map((reaction) => {
+      {parentEntity.reactionsGrouped?.map((reaction) => {
         return (
           <Reaction
             key={`reaction-${reaction.emoji}`}
             emoji={reaction.emoji}
             count={reaction.count}
+            users={usersByReaction[reaction.emoji]}
             unicodeString={reaction.unicodeString}
             reactionId={reaction.reactionId}
+            user={user}
             hasReacted={reaction.hasReacted}
             canReact={loggedIn}
             addReaction={addReaction}

diff --git a/app/components/Reactions/Reaction.tsx b/app/components/Reactions/Reaction.tsx
@@ -4,15 +4,19 @@ import Emoji from 'app/components/Emoji';
 import Tooltip from 'app/components/Tooltip';
 import styles from './Reaction.css';
 import type { ID } from 'app/store/models';
+import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
 type Props = {
   className?: string;
+  user: CurrentUser;
   emoji: string;
   count: number;
+  users?: { fullName: string }[];
   unicodeString: string;
   addReaction: (args: {
     emoji: string;
+    user: CurrentUser;
     contentTarget: ContentTarget;
     unicodeString?: string;
   }) => Promise<void>;
@@ -30,8 +34,10 @@ type Props = {
 
 const Reaction = ({
   className,
+  user,
   emoji,
   count,
+  users,
   unicodeString,
   addReaction,
   deleteReaction,
@@ -53,9 +59,20 @@ const Reaction = ({
     return <></>;
   }
 
+  let tooltipContent = '';
+  if (users && users.length > 0) {
+    tooltipContent += users
+      .filter((user) => user)
+      .map((user) => user.fullName)
+      .join(', ');
+    tooltipContent += ' reagerte med ';
+  }
+
+  tooltipContent += emoji;
+
   return (
     <>
-      <Tooltip content={emoji}>
+      <Tooltip content={tooltipContent}>
         <Flex
           gap={4}
           justifyContent="center"
@@ -67,10 +84,12 @@ const Reaction = ({
                   hasReacted
                     ? deleteReaction({
                         reactionId,
+                        user: user,
                         contentTarget: contentTarget,
                       })
                     : addReaction({
                         emoji,
+                        user: user,
                         contentTarget,
                         unicodeString,
                       })

diff --git a/app/components/Reactions/ReactionPicker.tsx b/app/components/Reactions/ReactionPicker.tsx
@@ -9,13 +9,16 @@ import ReactionPickerFooter from './ReactionPickerFooter';
 import ReactionPickerHeader from './ReactionPickerHeader';
 import type { EmojiWithReactionData } from 'app/components/LegoReactions';
 import type { ID } from 'app/store/models';
+import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
 type Props = {
   isLoading: boolean;
+  user: CurrentUser;
   emojis: EmojiWithReactionData[];
   addReaction: (args: {
     emoji: string;
+    user: CurrentUser;
     contentTarget: ContentTarget;
     unicodeString: string;
   }) => Promise<void>;
@@ -143,6 +146,7 @@ const searchEmojis = (
 
 const ReactionPicker = ({
   isLoading,
+  user,
   emojis,
   addReaction,
   deleteReaction,
@@ -209,6 +213,7 @@ const ReactionPicker = ({
               ? categories[activeCategory].emojis
               : []
           }
+          user={user}
           searchResults={searchResults}
           addReaction={addReaction}
           deleteReaction={deleteReaction}

diff --git a/app/components/Reactions/ReactionPickerContent.tsx b/app/components/Reactions/ReactionPickerContent.tsx
@@ -2,13 +2,16 @@ import Emoji from 'app/components/Emoji';
 import styles from './ReactionPickerContent.css';
 import type { EmojiWithReactionData } from 'app/components/LegoReactions';
 import type { ID } from 'app/store/models';
+import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 
 type Props = {
   emojis: EmojiWithReactionData[];
+  user: CurrentUser;
   searchResults: EmojiWithReactionData[] | null;
   addReaction: (args: {
     emoji: string;
+    user: CurrentUser;
     contentTarget: ContentTarget;
     unicodeString: string;
   }) => Promise<void>;
@@ -21,6 +24,7 @@ type Props = {
 
 const ReactionPickerContent = ({
   emojis,
+  user,
   searchResults,
   addReaction,
   deleteReaction,
@@ -49,6 +53,7 @@ const ReactionPickerContent = ({
                     })
                   : addReaction({
                       emoji: emoji.shortCode,
+                      user: user,
                       contentTarget,
                       unicodeString: emoji.unicodeString,
                     })

diff --git a/app/components/Reactions/index.tsx b/app/components/Reactions/index.tsx
@@ -7,16 +7,19 @@ import AddReactionEmoji from './assets/AddReactionEmoji';
 import styles from './index.css';
 import type { EmojiWithReactionData } from 'app/components/LegoReactions';
 import type { ID } from 'app/models';
+import type { CurrentUser } from 'app/store/models/User';
 import type { ContentTarget } from 'app/store/utils/contentTarget';
 import type { ReactNode, SyntheticEvent } from 'react';
 
 type Props = {
+  user: CurrentUser;
   children: ReactNode;
   className?: string;
   emojis: EmojiWithReactionData[];
   fetchingEmojis: boolean;
   addReaction: (args: {
     emoji: string;
+    user: CurrentUser;
     contentTarget: ContentTarget;
     unicodeString: string;
   }) => Promise<void>;
@@ -33,6 +36,7 @@ type Props = {
 // app/components/LegoReactions.
 
 const Reactions = ({
+  user,
   children,
   className,
   emojis,
@@ -111,6 +115,7 @@ const Reactions = ({
         <div className={styles.reactionPickerContainer}>
           <ReactionPicker
             emojis={emojis}
+            user={user}
             isLoading={fetchingEmojis}
             addReaction={addReaction}
             deleteReaction={deleteReaction}

diff --git a/app/reducers/__tests__/reactions.spec.ts b/app/reducers/__tests__/reactions.spec.ts
@@ -19,6 +19,16 @@ describe('reducers', () => {
           id: 3,
           text: 'hello world',
           name: 'welcome',
+          reactions: [
+            {
+              author: {
+                fullName: 'test',
+              },
+              emoji: ':joy:',
+              reactionId: 33,
+              unicodeString: '123',
+            },
+          ],
           reactionsGrouped: [
             {
               emoji: ':joy:',
@@ -32,6 +42,7 @@ describe('reducers', () => {
           id: 4,
           text: 'test',
           name: 'test',
+          reactions: [],
           reactionsGrouped: [],
         },
       },
@@ -59,6 +70,16 @@ describe('reducers', () => {
             id: 3,
             text: 'hello world',
             name: 'welcome',
+            reactions: [
+              {
+                author: {
+                  fullName: 'test',
+                },
+                emoji: ':joy:',
+                reactionId: 33,
+                unicodeString: '123',
+              },
+            ],
             reactionsGrouped: [
               {
                 emoji: ':joy:',
@@ -72,6 +93,14 @@ describe('reducers', () => {
             id: 4,
             text: 'test',
             name: 'test',
+            reactions: [
+              {
+                author: undefined,
+                emoji: ':joy:',
+                reactionId: 33,
+                unicodeString: '123',
+              },
+            ],
             reactionsGrouped: [
               {
                 emoji: ':joy:',
@@ -108,6 +137,22 @@ describe('reducers', () => {
             id: 3,
             text: 'hello world',
             name: 'welcome',
+            reactions: [
+              {
+                author: {
+                  fullName: 'test',
+                },
+                emoji: ':joy:',
+                reactionId: 33,
+                unicodeString: '123',
+              },
+              {
+                author: undefined,
+                emoji: ':joy:',
+                reactionId: 33,
+                unicodeString: '123',
+              },
+            ],
             reactionsGrouped: [
               {
                 emoji: ':joy:',
@@ -122,6 +167,7 @@ describe('reducers', () => {
             id: 4,
             text: 'test',
             name: 'test',
+            reactions: [],
             reactionsGrouped: [],
           },
         },
@@ -138,6 +184,16 @@ describe('reducers', () => {
             id: 3,
             text: 'hello world',
             name: 'welcome',
+            reactions: [
+              {
+                author: {
+                  fullName: 'test',
+                },
+                emoji: ':joy:',
+                reactionId: 33,
+                unicodeString: '123',
+              },
+            ],
             reactionsGrouped: [
               {
                 emoji: ':joy:',
@@ -166,6 +222,7 @@ describe('reducers', () => {
             id: 3,
             text: 'hello world',
             name: 'welcome',
+            reactions: [],
             reactionsGrouped: [],
           },
         },