feat: implement like and unlike ability to list item comments control

src/controls/listItemComments/common/ECommentAction.ts

@@ -1,4 +1,6 @@
 export enum ECommentAction {
-  "ADD" = "ADD",
-  "DELETE" = "DELETE"
+  'ADD' = 'ADD',
+  'DELETE' = 'DELETE',
+  'LIKE' = 'LIKE',
+  'UNLIKE' = 'UNLIKE',
 }

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

@@ -20,8 +20,22 @@ import { RenderComments } from "./RenderComments";
 export const CommentsList: React.FunctionComponent = () => {
   const { listItemCommentsState, setlistItemCommentsState } = useContext(ListItemCommentsStateContext);
   const { configurationListClasses } = useListItemCommentsStyles();
-  const { getListItemComments, getNextPageOfComments, addComment, deleteComment } = useSpAPI();
-  const { comments, isScrolling, pageInfo, commentAction, commentToAdd, selectedComment } = listItemCommentsState;
+  const {
+    getListItemComments,
+    getNextPageOfComments,
+    addComment,
+    deleteComment,
+    likeComment,
+    unlikeComment,
+  } = useSpAPI();
+  const {
+    comments,
+    isScrolling,
+    pageInfo,
+    commentAction,
+    commentToAdd,
+    selectedComment,
+  } = listItemCommentsState;
   const { hasMore, nextLink } = pageInfo;
   const scrollPanelRef = useRef<HTMLDivElement>();
   const { errorInfo } = listItemCommentsState;
@@ -32,16 +46,23 @@ export const CommentsList: React.FunctionComponent = () => {
         type: EListItemCommentsStateTypes.SET_IS_LOADING,
         payload: true,
       });
-      const _commentsResults: IlistItemCommentsResults = await getListItemComments();
+      const _commentsResults: IlistItemCommentsResults =
+        await getListItemComments();
       setlistItemCommentsState({
         type: EListItemCommentsStateTypes.SET_LIST_ITEM_COMMENTS,
         payload: _commentsResults.comments,
       });
       setlistItemCommentsState({
         type: EListItemCommentsStateTypes.SET_DATA_PAGE_INFO,
-        payload: { hasMore: _commentsResults.hasMore, nextLink: _commentsResults.nextLink } as IPageInfo,
+        payload: {
+          hasMore: _commentsResults.hasMore,
+          nextLink: _commentsResults.nextLink,
+        } as IPageInfo,
+      });
+      setlistItemCommentsState({
+        type: EListItemCommentsStateTypes.SET_COMMENT_ACTION,
+        payload: undefined,
       });
-      setlistItemCommentsState({ type: EListItemCommentsStateTypes.SET_COMMENT_ACTION, payload: undefined });
       setlistItemCommentsState({
         type: EListItemCommentsStateTypes.SET_IS_LOADING,
         payload: false,
@@ -99,25 +120,110 @@ export const CommentsList: React.FunctionComponent = () => {
     [setlistItemCommentsState, _loadComments]
   );
 
+  const _onCommentLike = useCallback(
+    async (commentId: number) => {
+      try {
+        const _errorInfo: IErrorInfo = { showError: false, error: undefined };
+        setlistItemCommentsState({
+          type: EListItemCommentsStateTypes.SET_ERROR_INFO,
+          payload: _errorInfo,
+        });
+        await likeComment(commentId);
+        await _loadComments();
+      } catch (error) {
+        const _errorInfo: IErrorInfo = { showError: true, error: error };
+        setlistItemCommentsState({
+          type: EListItemCommentsStateTypes.SET_ERROR_INFO,
+          payload: _errorInfo,
+        });
+      }
+    },
+    [setlistItemCommentsState, _loadComments]
+  );
+  const _onCommentUnlike = useCallback(
+    async (commentId: number) => {
+      try {
+        const _errorInfo: IErrorInfo = { showError: false, error: undefined };
+        setlistItemCommentsState({
+          type: EListItemCommentsStateTypes.SET_ERROR_INFO,
+          payload: _errorInfo,
+        });
+        await unlikeComment(commentId);
+        await _loadComments();
+      } catch (error) {
+        const _errorInfo: IErrorInfo = { showError: true, error: error };
+        setlistItemCommentsState({
+          type: EListItemCommentsStateTypes.SET_ERROR_INFO,
+          payload: _errorInfo,
+        });
+      }
+    },
+    [setlistItemCommentsState, _loadComments]
+  );
+
   useEffect(() => {
     switch (commentAction) {
       case ECommentAction.ADD:
         (async () => {
           // Add new comment
           await _onAddComment(commentToAdd);
-        })().then(() => { /* no-op; */}).catch(() => { /* no-op; */ });
+        })()
+          .then(() => {
+            /* no-op; */
+          })
+          .catch(() => {
+            /* no-op; */
+          });
+        break;
+      case ECommentAction.LIKE:
+        (async () => {
+          // Add new comment
+          const commentId = Number(selectedComment.id);
+          await _onCommentLike(commentId);
+        })()
+          .then(() => {
+            /* no-op; */
+          })
+          .catch(() => {
+            /* no-op; */
+          });
+        break;
+      case ECommentAction.UNLIKE:
+        (async () => {
+          // Add new comment
+          const commentId = Number(selectedComment.id);
+          await _onCommentUnlike(commentId);
+        })()
+          .then(() => {
+            /* no-op; */
+          })
+          .catch(() => {
+            /* no-op; */
+          });
         break;
       case ECommentAction.DELETE:
         (async () => {
           // delete comment
           const commentId = Number(selectedComment.id);
           await _onADeleteComment(commentId);
-        })().then(() => { /* no-op; */}).catch(() => { /* no-op; */ });
+        })()
+          .then(() => {
+            /* no-op; */
+          })
+          .catch(() => {
+            /* no-op; */
+          });
         break;
       default:
         break;
     }
-  }, [commentAction, selectedComment, commentToAdd, _onAddComment, _onADeleteComment]);
+  }, [
+    commentAction,
+    selectedComment,
+    commentToAdd,
+    _onAddComment,
+    _onADeleteComment,
+  ]);
 
   useEffect(() => {
     (async () => {

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

@@ -1,36 +1,92 @@
-import { IconButton } from "@fluentui/react/lib/Button";
-import { DocumentCard, DocumentCardDetails } from "@fluentui/react/lib/DocumentCard";
-import { Stack } from "@fluentui/react/lib/Stack";
-import * as React from "react";
-import { useCallback } from "react";
-import { useContext } from "react";
-import { ConfirmDelete } from "../ConfirmDelete/ConfirmDelete";
-import { EListItemCommentsStateTypes, ListItemCommentsStateContext } from "../ListItemCommentsStateProvider";
-import { CommentItem } from "./CommentItem";
-import { IComment } from "./IComment";
-import { RenderSpinner } from "./RenderSpinner";
-import { useListItemCommentsStyles } from "./useListItemCommentsStyles";
-import { useBoolean } from "@fluentui/react-hooks";
-import { List } from "@fluentui/react/lib/List";
-import { AppContext, ECommentAction } from "../..";
+import { IconButton } from '@fluentui/react/lib/Button';
+import {
+  DocumentCard,
+  DocumentCardDetails,
+} from '@fluentui/react/lib/DocumentCard';
+import { Stack } from '@fluentui/react/lib/Stack';
+import * as React from 'react';
+import { useCallback } from 'react';
+import { useContext } from 'react';
+import { ConfirmDelete } from '../ConfirmDelete/ConfirmDelete';
+import {
+  EListItemCommentsStateTypes,
+  ListItemCommentsStateContext,
+} from '../ListItemCommentsStateProvider';
+import { CommentItem } from './CommentItem';
+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 { AppContext, ECommentAction } from '../..';
 
-export interface IRenderCommentsProps { }
+export interface IRenderCommentsProps {}
 
-export const RenderComments: React.FunctionComponent<IRenderCommentsProps> = () => {
+export const RenderComments: React.FunctionComponent<
+  IRenderCommentsProps
+> = () => {
   const { highlightedCommentId } = useContext(AppContext);
-  const { listItemCommentsState, setlistItemCommentsState } = useContext(ListItemCommentsStateContext);
-  const { documentCardStyles,documentCardHighlightedStyles, itemContainerStyles, deleteButtonContainerStyles } = useListItemCommentsStyles();
+  const { listItemCommentsState, setlistItemCommentsState } = useContext(
+    ListItemCommentsStateContext
+  );
+  const {
+    documentCardStyles,
+    documentCardHighlightedStyles,
+    itemContainerStyles,
+    ButtonsContainerStyles,
+  } = useListItemCommentsStyles();
   const { comments, isLoading } = listItemCommentsState;
 
   const [hideDialog, { toggle: setHideDialog }] = useBoolean(true);
 
+  const _likeComment = useCallback(() => {
+    setlistItemCommentsState({
+      type: EListItemCommentsStateTypes.SET_COMMENT_ACTION,
+      payload: ECommentAction.LIKE,
+    });
+  }, []);
+
+  const _unLikeComment = useCallback(() => {
+    setlistItemCommentsState({
+      type: EListItemCommentsStateTypes.SET_COMMENT_ACTION,
+      payload: ECommentAction.UNLIKE,
+    });
+  }, []);
+
   const onRenderCell = useCallback(
     (comment: IComment, index: number): JSX.Element => {
       return (
-        <DocumentCard styles={ highlightedCommentId && comment.id===highlightedCommentId? documentCardHighlightedStyles : documentCardStyles} key={index}>
-          <Stack horizontal horizontalAlign="end" styles={deleteButtonContainerStyles}>
+        <DocumentCard
+          styles={
+            highlightedCommentId && comment.id === highlightedCommentId
+              ? documentCardHighlightedStyles
+              : documentCardStyles
+          }
+          key={index}
+        >
+          <Stack
+            horizontal
+            horizontalAlign="end"
+            styles={ButtonsContainerStyles}
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <Text>{comment.likeCount}</Text>
+              <IconButton
+                iconProps={{
+                  iconName: `${comment.isLikedByUser ? 'LikeSolid' : 'Like'}`,
+                }}
+                style={{ fontSize: 10 }}
+                onClick={() => {
+                  setlistItemCommentsState({
+                    type: EListItemCommentsStateTypes.SET_SELECTED_COMMENT,
+                    payload: comment,
+                  });
+                  !comment.isLikedByUser ? _likeComment() : _unLikeComment();
+                }}
+              />
+            </div>
             <IconButton
-              iconProps={{ iconName: "Delete" }}
+              iconProps={{ iconName: 'Delete' }}
               style={{ fontSize: 10 }}
               onClick={async () => {
                 setlistItemCommentsState({
@@ -57,10 +113,13 @@ export const RenderComments: React.FunctionComponent<IRenderCommentsProps> = ()
     },
     [comments]
   );
-
   return (
     <>
-      {isLoading ? <RenderSpinner /> : <List items={comments} onRenderCell={onRenderCell} />}
+      {isLoading ? (
+        <RenderSpinner />
+      ) : (
+        <List items={comments} onRenderCell={onRenderCell} />
+      )}
       <ConfirmDelete
         hideDialog={hideDialog}
         onDismiss={(deleteComment: boolean) => {