feat[ListItemComments]: implement reaction insights

src/controls/listItemComments/components/Comments/LikedUserList.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  DialogType,
+  FontWeights,
+  getTheme,
+  IButtonStyles,
+  IconButton,
+  IIconProps,
+  IStackProps,
+  mergeStyleSets,
+  Modal,
+  Persona,
+  PersonaSize,
+  Stack,
+} from '@fluentui/react';
+import { AppContext } from '../../common';
+import { useListItemCommentsStyles } from './useListItemCommentsStyles';
+
+interface ILikedUserListProps {
+  isDialogOpen: boolean;
+  setShowDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  likedBy: any;
+}
+
+export const LikedUserList = ({
+  isDialogOpen,
+  setShowDialog,
+  likedBy,
+}: ILikedUserListProps) => {
+  const { iconButtonStyles, contentStyles } = useListItemCommentsStyles();
+
+  const PHOTO_URL = '/_layouts/15/userphoto.aspx?size=M&accountname=';
+
+  return (
+    <Modal
+      isOpen={isDialogOpen}
+      onDismiss={() => setShowDialog(false)}
+      styles={{ main: { width: '480px' } }}
+    >
+      <div className={contentStyles.header}>
+        <h2 className={contentStyles.heading}>Liked by</h2>
+        <IconButton
+          styles={iconButtonStyles}
+          iconProps={cancelIcon}
+          ariaLabel="Close popup modal"
+          onClick={() => setShowDialog(false)}
+        />
+      </div>
+      <Stack
+        tokens={{ childrenGap: 12 }}
+        style={{
+          height: 'auto',
+          maxHeight: '450px',
+          overflowY: 'auto',
+          padding: '0 1.5rem 1.5rem 1.5rem',
+        }}
+      >
+        {likedBy.map((user: any, index: number) => (
+          <>
+            <Persona
+              key={index}
+              text={user.name}
+              secondaryText={user.email}
+              size={PersonaSize.size40}
+              imageUrl={`${PHOTO_URL}${user.email}`}
+            />
+          </>
+        ))}
+      </Stack>
+    </Modal>
+  );
+};
+const cancelIcon: IIconProps = { iconName: 'Cancel' };

src/controls/listItemComments/components/Comments/RenderComments.tsx

@@ -5,7 +5,7 @@ import {
 } from '@fluentui/react/lib/DocumentCard';
 import { Stack } from '@fluentui/react/lib/Stack';
 import * as React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useContext } from 'react';
 import { ConfirmDelete } from '../ConfirmDelete/ConfirmDelete';
 import {
@@ -17,8 +17,9 @@ import { IComment } from './IComment';
 import { RenderSpinner } from './RenderSpinner';
 import { useListItemCommentsStyles } from './useListItemCommentsStyles';
 import { useBoolean } from '@fluentui/react-hooks';
-import { List, Text } from '@fluentui/react';
+import { Link, List, Text } from '@fluentui/react';
 import { AppContext, ECommentAction } from '../..';
+import { LikedUserList } from './LikedUserList';
 
 export interface IRenderCommentsProps {}
 
@@ -38,6 +39,8 @@ export const RenderComments: React.FunctionComponent<
   const { comments, isLoading } = listItemCommentsState;
 
   const [hideDialog, { toggle: setHideDialog }] = useBoolean(true);
+  const [showDialog, setShowDialog] = useState(false);
+  const [selectedLikedBy, setSelectedLikedBy] = useState<any>([]);
 
   const _likeComment = useCallback(() => {
     setlistItemCommentsState({
@@ -70,7 +73,19 @@ export const RenderComments: React.FunctionComponent<
             styles={buttonsContainerStyles}
           >
             <div style={{ display: 'flex', alignItems: 'center' }}>
-              <Text>{comment.likeCount}</Text>
+              {comment.likeCount > 0 ? (
+                <Link
+                  onClick={() => {
+                    setSelectedLikedBy(comment.likedBy);
+                    setShowDialog(true);
+                  }}
+                >
+                  {comment.likeCount}
+                </Link>
+              ) : (
+                <Text>{comment.likeCount}</Text>
+              )}
+
               <IconButton
                 iconProps={{
                   iconName: `${comment.isLikedByUser ? 'LikeSolid' : 'Like'}`,
@@ -136,6 +151,11 @@ export const RenderComments: React.FunctionComponent<
           setHideDialog();
         }}
       />
+      <LikedUserList
+        isDialogOpen={showDialog}
+        setShowDialog={setShowDialog}
+        likedBy={selectedLikedBy}
+      />
     </>
   );
 };

src/controls/listItemComments/components/Comments/useListItemCommentsStyles.ts

@@ -2,12 +2,15 @@ import * as React from "react";
 import { IDocumentCardStyles } from "@fluentui/react/lib/DocumentCard";
 import { IStackStyles } from "@fluentui/react/lib/Stack";
 import {
+  FontWeights,
+  getTheme,
   IStyle,
   mergeStyles,
   mergeStyleSets,
-} from "@fluentui/react/lib/Styling";
-import { AppContext } from "../../common";
-import { TILE_HEIGHT } from "../../common/constants";
+} from '@fluentui/react/lib/Styling';
+import { AppContext } from '../../common';
+import { TILE_HEIGHT } from '../../common/constants';
+import { IButtonStyles } from '@fluentui/react';
 
 interface returnObjectStyles {
   itemContainerStyles: IStackStyles;
@@ -19,10 +22,14 @@ interface returnObjectStyles {
   documentCardHighlightedStyles: Partial<IDocumentCardStyles>;
   documentCardUserStyles: Partial<IDocumentCardStyles>;
   configurationListClasses: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  contentStyles: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  iconButtonStyles: Partial<IButtonStyles>;
 }
 
 export const useListItemCommentsStyles = (): returnObjectStyles => {
   const { theme, numberCommentsPerPage } = React.useContext(AppContext);
+  const fluentTheme = getTheme();
+
   // Calc Height List tiles Container Based on number Items per Page
   const tilesHeight: number = numberCommentsPerPage
     ? (numberCommentsPerPage < 5 ? 5 : numberCommentsPerPage) * TILE_HEIGHT + 35
@@ -140,6 +147,55 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     } as IStyle,
   });
 
+  const contentStyles = mergeStyleSets({
+    container: {
+      display: 'flex',
+      flexFlow: 'column nowrap',
+      alignItems: 'stretch',
+    },
+    header: [
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      fluentTheme.fonts.xLargePlus,
+      {
+        flex: '1 1 auto',
+        borderTop: `4px solid ${theme.themePrimary}`,
+        color: theme.neutralPrimary,
+        display: 'flex',
+        alignItems: 'center',
+        fontWeight: FontWeights.semibold,
+        padding: '12px 12px 14px 24px',
+      },
+    ],
+    heading: {
+      color: theme.neutralPrimary,
+      fontWeight: FontWeights.semibold,
+      fontSize: 'inherit',
+      margin: '0',
+    },
+    body: {
+      flex: '4 4 auto',
+      padding: '0 24px 24px 24px',
+      overflowY: 'hidden',
+      selectors: {
+        p: { margin: '14px 0' },
+        'p:first-child': { marginTop: 0 },
+        'p:last-child': { marginBottom: 0 },
+      },
+    },
+  });
+
+  const iconButtonStyles: Partial<IButtonStyles> = {
+    root: {
+      color: theme.neutralPrimary,
+      marginLeft: 'auto',
+      marginTop: '4px',
+      marginRight: '2px',
+    },
+    rootHovered: {
+      color: theme.neutralDark,
+    },
+  };
+
   return {
     itemContainerStyles,
     buttonsContainerStyles,
@@ -150,5 +206,7 @@ export const useListItemCommentsStyles = (): returnObjectStyles => {
     documentCardHighlightedStyles,
     documentCardUserStyles,
     configurationListClasses,
+    contentStyles,
+    iconButtonStyles,
   };
 };

src/controls/listItemComments/hooks/useSpAPI.ts

@@ -120,7 +120,7 @@ export const useSpAPI = (): returnObject => {
         webUrl ?? _webUrl
       }/_api/web/lists(@a1)/GetItemById(@a2)/GetComments()?@a1='${listId}'&@a2='${itemId}'&$top=${
         numberCommentsPerPage ?? 10
-      }`;
+      }&$expand=likedBy`;
       const _listResults: SPHttpClientResponse = await spHttpClient.get(
         `${_endPointUrl}`,
         SPHttpClient.configurations.v1