refactored node comments to component

src/components/node/NodeComments/index.tsx

@@ -1,17 +1,13 @@
-import React, { FC, memo, useCallback, useMemo } from 'react';
+import React, { FC, memo, useMemo } from 'react';
 import { Comment } from '../../comment/Comment';
 
 import styles from './styles.module.scss';
 import { IComment, ICommentGroup, IFile } from '~/redux/types';
-import { groupCommentsByUser } from '~/utils/fn';
 import { IUser } from '~/redux/auth/types';
 import { canEditComment } from '~/utils/node';
-import { nodeLoadMoreComments, nodeLockComment } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
 import { COMMENTS_DISPLAY } from '~/redux/node/constants';
 import { plural } from '~/utils/dom';
-import { modalShowPhotoswipe } from '~/redux/modal/actions';
-import { useDispatch } from 'react-redux';
 import { useGrouppedComments } from '~/utils/hooks/node/useGrouppedComments';
 
 interface IProps {
@@ -20,25 +16,26 @@ interface IProps {
   user: IUser;
   order?: 'ASC' | 'DESC';
   lastSeenCurrent?: string;
+  onShowImageModal: (images: IFile[], index: number) => void;
+  onLoadMoreComments: () => void;
+  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
 }
 
 const NodeComments: FC<IProps> = memo(
-  ({ comments, user, count = 0, order = 'DESC', lastSeenCurrent }) => {
-    const dispatch = useDispatch();
+  ({
+    comments,
+    user,
+    count = 0,
+    order = 'DESC',
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+    lastSeenCurrent,
+  }) => {
     const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
 
     const groupped: ICommentGroup[] = useGrouppedComments(comments, order, lastSeenCurrent);
 
-    const onDelete = useCallback(
-      (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
-      [dispatch]
-    );
-    const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);
-    const onShowPhotoswipe = useCallback(
-      (images: IFile[], index: number) => dispatch(modalShowPhotoswipe(images, index)),
-      [dispatch]
-    );
-
     const more = useMemo(
       () =>
         left > 0 && (
@@ -60,8 +57,8 @@ const NodeComments: FC<IProps> = memo(
             key={group.ids.join()}
             group={group}
             canEdit={canEditComment(group, user)}
-            onDelete={onDelete}
-            modalShowPhotoswipe={onShowPhotoswipe}
+            onDelete={onDeleteComment}
+            onShowImageModal={onShowImageModal}
             isSame={group.user.id === user.id}
           />
         ))}