refactored node comments to component

src/components/boris/BorisComments/index.tsx

@@ -5,21 +5,30 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeComments } from '~/components/node/NodeComments';
 import { Footer } from '~/components/main/Footer';
-import { Card } from '~/components/containers/Card';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
-import { selectAuthUser } from '~/redux/auth/selectors';
-import { IComment, INode } from '~/redux/types';
+import { IComment, IFile, INode } from '~/redux/types';
+import { IUser } from '~/redux/auth/types';
 
 interface IProps {
-  isLoadingComments: boolean;
-  commentCount: number;
   node: INode;
+  user: IUser;
+  commentCount: number;
   comments: IComment[];
+  isLoadingComments: boolean;
+  onShowImageModal: (images: IFile[], index: number) => void;
+  onLoadMoreComments: () => void;
+  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
 }
 
-const BorisComments: FC<IProps> = ({ isLoadingComments, node, commentCount, comments }) => {
-  const user = useShallowSelect(selectAuthUser);
-
+const BorisComments: FC<IProps> = ({
+  node,
+  user,
+  isLoadingComments,
+  commentCount,
+  comments,
+  onLoadMoreComments,
+  onDeleteComment,
+  onShowImageModal,
+}) => {
   return (
     <>
       <Group className={styles.grid}>
@@ -28,7 +37,15 @@ const BorisComments: FC<IProps> = ({ isLoadingComments, node, commentCount, comm
         {isLoadingComments ? (
           <NodeNoComments is_loading count={7} />
         ) : (
-          <NodeComments comments={comments} count={commentCount} user={user} order="ASC" />
+          <NodeComments
+            comments={comments}
+            count={commentCount}
+            user={user}
+            order="ASC"
+            onDeleteComment={onDeleteComment}
+            onLoadMoreComments={onLoadMoreComments}
+            onShowImageModal={onShowImageModal}
+          />
         )}
       </Group>
 

src/components/comment/Comment/index.tsx

@@ -1,10 +1,9 @@
 import React, { FC, HTMLAttributes, memo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { IComment, ICommentGroup } from '~/redux/types';
+import { IComment, ICommentGroup, IFile } from '~/redux/types';
 import { CommentContent } from '~/components/comment/CommentContent';
 import styles from './styles.module.scss';
 import { CommendDeleted } from '../../node/CommendDeleted';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import classNames from 'classnames';
 import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
 
@@ -15,7 +14,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   isSame?: boolean;
   canEdit?: boolean;
   onDelete: (id: IComment['id'], isLocked: boolean) => void;
-  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
+  onShowImageModal: (images: IFile[], index: number) => void;
 };
 
 const Comment: FC<IProps> = memo(
@@ -27,7 +26,7 @@ const Comment: FC<IProps> = memo(
     className,
     canEdit,
     onDelete,
-    modalShowPhotoswipe,
+    onShowImageModal,
     ...props
   }) => {
     return (
@@ -53,7 +52,7 @@ const Comment: FC<IProps> = memo(
                 key={comment.id}
                 can_edit={!!canEdit}
                 onDelete={onDelete}
-                modalShowPhotoswipe={modalShowPhotoswipe}
+                onShowImageModal={onShowImageModal}
               />
             );
           })}

src/components/comment/CommentContent/index.tsx

@@ -8,23 +8,22 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
+import classNames from 'classnames';
 import { PRESETS } from '~/constants/urls';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
 import { CommentMenu } from '../CommentMenu';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { CommentForm } from '~/components/comment/CommentForm';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectNode } from '~/redux/node/selectors';
-import classNames from 'classnames';
 
 interface IProps {
   comment: IComment;
   can_edit: boolean;
   onDelete: (id: IComment['id'], isLocked: boolean) => void;
-  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
+  onShowImageModal: (images: IFile[], index: number) => void;
 }
 
-const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalShowPhotoswipe }) => {
+const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, onShowImageModal }) => {
   const [isEditing, setIsEditing] = useState(false);
   const { current } = useShallowSelect(selectNode);
 
@@ -89,7 +88,7 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalSho
             className={classNames(styles.images, { [styles.multiple]: groupped.image.length > 1 })}
           >
             {groupped.image.map((file, index) => (
-              <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
+              <div key={file.id} onClick={() => onShowImageModal(groupped.image, index)}>
                 <img src={getURL(file, PRESETS['600'])} alt={file.name} />
               </div>
             ))}

src/components/node/NodeAuthorBlock/index.tsx

@@ -1,26 +1,24 @@
 import React, { FC, useCallback } from 'react';
-import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
 import { Avatar } from '~/components/common/Avatar';
 import { openUserProfile } from '~/utils/user';
 import { useUserDescription } from '~/utils/hooks/user/useUserDescription';
+import { INodeUser } from '~/redux/types';
 
 interface Props {
-  node?: INode;
+  user?: INodeUser;
 }
 
-const NodeAuthorBlock: FC<Props> = ({ node }) => {
-  const onOpenProfile = useCallback(() => openUserProfile(node?.user?.username), [
-    node?.user?.username,
-  ]);
+const NodeAuthorBlock: FC<Props> = ({ user }) => {
+  const onOpenProfile = useCallback(() => openUserProfile(user?.username), [user?.username]);
 
-  const description = useUserDescription(node?.user);
+  const description = useUserDescription(user);
 
-  if (!node?.user) {
+  if (!user) {
     return null;
   }
 
-  const { fullname, username, photo } = node.user;
+  const { fullname, username, photo } = user;
 
   return (
     <div className={styles.block} onClick={onOpenProfile}>

src/components/node/NodeBottomBlock/index.tsx

@@ -6,16 +6,18 @@ import { NodeCommentsBlock } from '~/components/node/NodeCommentsBlock';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
-import { IComment, INode } from '~/redux/types';
-import { useUser } from '~/utils/hooks/user/userUser';
+import { IComment, IFile, INode } from '~/redux/types';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import { INodeRelated } from '~/redux/node/types';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import styles from './styles.module.scss';
 import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
+import { IUser } from '~/redux/auth/types';
 
 interface IProps {
   node: INode;
+  user: IUser;
+  isUser: boolean;
   canEdit: boolean;
   isLoading: boolean;
   commentsOrder: 'ASC' | 'DESC';
@@ -24,21 +26,28 @@ interface IProps {
   isLoadingComments: boolean;
   related: INodeRelated;
   lastSeenCurrent?: string;
+  onShowImageModal: (images: IFile[], index: number) => void;
+  onLoadMoreComments: () => void;
+  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
 }
 
 const NodeBottomBlock: FC<IProps> = ({
   node,
+  user,
   canEdit,
   isLoading,
+  isUser,
   isLoadingComments,
   comments,
   commentsCount,
   commentsOrder,
   related,
   lastSeenCurrent,
+  onLoadMoreComments,
+  onDeleteComment,
+  onShowImageModal,
 }) => {
   const { inline } = useNodeBlocks(node, isLoading);
-  const { is_user } = useUser();
 
   if (node.deleted_at) {
     return <NodeDeletedBadge />;
@@ -58,17 +67,21 @@ const NodeBottomBlock: FC<IProps> = ({
               comments={comments}
               count={commentsCount}
               order={commentsOrder}
+              user={user}
               node={node}
+              onShowImageModal={onShowImageModal}
+              onLoadMoreComments={onLoadMoreComments}
+              onDeleteComment={onDeleteComment}
             />
 
-            {is_user && !isLoading && <NodeCommentForm nodeId={node.id} />}
+            {isUser && !isLoading && <NodeCommentForm nodeId={node.id} />}
           </Group>
 
           <div className={styles.panel}>
             <StickyBox className={styles.sticky} offsetTop={72}>
               <div className={styles.left}>
                 <div className={styles.left_item}>
-                  <NodeAuthorBlock node={node} />
+                  <NodeAuthorBlock user={node?.user} />
                 </div>
                 <div className={styles.left_item}>
                   <NodeTagsBlock node={node} canEdit={canEdit} isLoading={isLoading} />

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}
           />
         ))}

src/components/node/NodeCommentsBlock/index.tsx

@@ -1,29 +1,36 @@
 import React, { FC } from 'react';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeComments } from '~/components/node/NodeComments';
-import { IComment, INode } from '~/redux/types';
+import { IComment, IFile, INode } from '~/redux/types';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
-import { useUser } from '~/utils/hooks/user/userUser';
+import { IUser } from '~/redux/auth/types';
 
 interface IProps {
   order: 'ASC' | 'DESC';
   node: INode;
+  user: IUser;
   comments: IComment[];
   count: number;
   lastSeenCurrent?: string;
   isLoading: boolean;
   isLoadingComments: boolean;
+  onShowImageModal: (images: IFile[], index: number) => void;
+  onLoadMoreComments: () => void;
+  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
 }
 
 const NodeCommentsBlock: FC<IProps> = ({
-  isLoading,
-  isLoadingComments,
   node,
+  user,
   comments,
   count,
   lastSeenCurrent,
+  isLoading,
+  isLoadingComments,
+  onLoadMoreComments,
+  onDeleteComment,
+  onShowImageModal,
 }) => {
-  const user = useUser();
   const { inline } = useNodeBlocks(node, isLoading);
 
   return isLoading || isLoadingComments || (!comments.length && !inline) ? (
@@ -35,6 +42,9 @@ const NodeCommentsBlock: FC<IProps> = ({
       user={user}
       order="DESC"
       lastSeenCurrent={lastSeenCurrent}
+      onShowImageModal={onShowImageModal}
+      onLoadMoreComments={onLoadMoreComments}
+      onDeleteComment={onDeleteComment}
     />
   );
 };

src/layouts/BorisLayout/index.tsx

@@ -1,13 +1,12 @@
 import React, { FC, useCallback, useEffect } from 'react';
 import { selectNode, selectNodeComments } from '~/redux/node/selectors';
-import { selectAuthIsTester, selectUser } from '~/redux/auth/selectors';
+import { selectAuthIsTester } from '~/redux/auth/selectors';
 import { useDispatch } from 'react-redux';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
 import { useRandomPhrase } from '~/constants/phrases';
 import isBefore from 'date-fns/isBefore';
-import { BorisStats } from '~/components/boris/BorisStats';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectBorisStats } from '~/redux/boris/selectors';
 import { authSetState, authSetUser } from '~/redux/auth/actions';
@@ -16,20 +15,12 @@ import { borisLoadStats } from '~/redux/boris/actions';
 import { Container } from '~/containers/main/Container';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import { BorisComments } from '~/components/boris/BorisComments';
-import { URLS } from '~/constants/urls';
-import { Route, Switch } from 'react-router-dom';
-import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
-import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
-import { Superpower } from '~/components/boris/Superpower';
-import { Tabs } from '~/components/dialogs/Tabs';
-import { Tab } from '~/components/dialogs/Tab';
-import { useHistory, useLocation } from 'react-router';
 import { Card } from '~/components/containers/Card';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
-import { BorisContactItem } from '~/components/boris/BorisContactItem';
-import { BorisContacts } from '~/components/boris/BorisContacts';
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { useImageModal } from '~/utils/hooks/useImageModal';
+import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
+import { useUser } from '~/utils/hooks/user/userUser';
 
 type IProps = {};
 
@@ -37,10 +28,10 @@ const BorisLayout: FC<IProps> = () => {
   const title = useRandomPhrase('BORIS_TITLE');
   const dispatch = useDispatch();
   const node = useShallowSelect(selectNode);
-  const user = useShallowSelect(selectUser);
   const stats = useShallowSelect(selectBorisStats);
   const comments = useShallowSelect(selectNodeComments);
   const isTester = useShallowSelect(selectAuthIsTester);
+  const user = useUser();
 
   useEffect(() => {
     const last_comment = comments[0];
@@ -73,6 +64,9 @@ const BorisLayout: FC<IProps> = () => {
     [dispatch]
   );
 
+  const onShowImageModal = useImageModal();
+  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments('696');
+
   return (
     <Container>
       <div className={styles.wrap}>
@@ -89,10 +83,14 @@ const BorisLayout: FC<IProps> = () => {
         <div className={styles.container}>
           <Card className={styles.content}>
             <BorisComments
-              isLoadingComments={node.is_loading_comments}
-              commentCount={node.comment_count}
               node={node.current}
+              user={user}
               comments={node.comments}
+              commentCount={node.comment_count}
+              isLoadingComments={node.is_loading_comments}
+              onLoadMoreComments={onLoadMoreComments}
+              onShowImageModal={onShowImageModal}
+              onDeleteComment={onDeleteComment}
             />
           </Card>
 

src/layouts/NodeLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from 'react';
+import React, { FC } from 'react';
 import { Route } from 'react-router';
 import { Card } from '~/components/containers/Card';
 
@@ -13,62 +13,84 @@ import { useNodeCoverImage } from '~/utils/hooks/node/useNodeCoverImage';
 import { URLS } from '~/constants/urls';
 import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
-import { IComment, INode } from '~/redux/types';
+import { IComment, IFile, INode } from '~/redux/types';
 import { INodeRelated } from '~/redux/node/types';
 
 import styles from './styles.module.scss';
+import { IUser } from '~/redux/auth/types';
 
 type IProps = {
   node: INode;
+  user: IUser;
   lastSeenCurrent?: string;
   related: INodeRelated;
   comments: IComment[];
   commentsCount: number;
+  isUser: boolean;
   isLoading: boolean;
   isLoadingComments: boolean;
+  onShowImageModal: (images: IFile[], index: number) => void;
+  onLoadMoreComments: () => void;
+  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
 };
 
-const NodeLayout: FC<IProps> = memo(
-  ({ node, comments, commentsCount, related, lastSeenCurrent, isLoading, isLoadingComments }) => {
-    useNodeCoverImage(node);
+const NodeLayout: FC<IProps> = ({
+  node,
+  user,
+  comments,
+  commentsCount,
+  related,
+  lastSeenCurrent,
+  isUser,
+  isLoading,
+  isLoadingComments,
+  onLoadMoreComments,
+  onDeleteComment,
+  onShowImageModal,
+}) => {
+  useNodeCoverImage(node);
 
-    const { head, block } = useNodeBlocks(node, isLoading);
-    const [canEdit] = useNodePermissions(node);
+  const { head, block } = useNodeBlocks(node, isLoading);
+  const [canEdit] = useNodePermissions(node);
 
-    return (
-      <div className={styles.wrap}>
-        {head}
+  return (
+    <div className={styles.wrap}>
+      {head}
 
-        <Container className={styles.content}>
-          <Card className={styles.node} seamless>
-            {block}
+      <Container className={styles.content}>
+        <Card className={styles.node} seamless>
+          {block}
 
-            <div className={styles.panel}>
-              <NodePanel node={node} isLoading={isLoading} />
-            </div>
+          <div className={styles.panel}>
+            <NodePanel node={node} isLoading={isLoading} />
+          </div>
 
-            <NodeBottomBlock
-              canEdit={canEdit}
-              node={node}
-              comments={comments}
-              commentsCount={commentsCount}
-              commentsOrder="DESC"
-              related={related}
-              isLoadingComments={isLoadingComments}
-              isLoading={isLoading}
-              lastSeenCurrent={lastSeenCurrent}
-            />
+          <NodeBottomBlock
+            isUser={isUser}
+            user={user}
+            node={node}
+            canEdit={canEdit}
+            comments={comments}
+            commentsCount={commentsCount}
+            commentsOrder="DESC"
+            related={related}
+            isLoadingComments={isLoadingComments}
+            isLoading={isLoading}
+            lastSeenCurrent={lastSeenCurrent}
+            onShowImageModal={onShowImageModal}
+            onLoadMoreComments={onLoadMoreComments}
+            onDeleteComment={onDeleteComment}
+          />
 
-            <Footer />
-          </Card>
-        </Container>
+          <Footer />
+        </Card>
+      </Container>
 
-        <SidebarRouter prefix="/post:id" />
+      <SidebarRouter prefix="/post:id" />
 
-        <Route path={URLS.NODE_EDIT_URL(':id')} component={EditorEditDialog} />
-      </div>
-    );
-  }
-);
+      <Route path={URLS.NODE_EDIT_URL(':id')} component={EditorEditDialog} />
+    </div>
+  );
+};
 
 export { NodeLayout };

src/pages/node/[id].tsx

@@ -3,6 +3,9 @@ import { NodeLayout } from '~/layouts/NodeLayout';
 import { RouteComponentProps } from 'react-router';
 import { useScrollToTop } from '~/utils/hooks/useScrollToTop';
 import { useFullNode } from '~/utils/hooks/node/useFullNode';
+import { useImageModal } from '~/utils/hooks/useImageModal';
+import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
+import { useUser } from '~/utils/hooks/user/userUser';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
@@ -21,17 +24,25 @@ const NodePage: FC<Props> = ({
     lastSeenCurrent,
   } = useFullNode(id);
 
+  const onShowImageModal = useImageModal();
+  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(id);
+  const user = useUser();
   useScrollToTop([id, isLoadingComments]);
 
   return (
     <NodeLayout
       node={node}
+      user={user}
       related={related}
       lastSeenCurrent={lastSeenCurrent}
       comments={comments}
       commentsCount={commentsCount}
+      isUser={user.is_user}
       isLoading={isLoading}
       isLoadingComments={isLoadingComments}
+      onShowImageModal={onShowImageModal}
+      onLoadMoreComments={onLoadMoreComments}
+      onDeleteComment={onDeleteComment}
     />
   );
 };

src/redux/types.ts

@@ -118,9 +118,12 @@ export interface FlowDisplay {
   dominant_color?: string;
 }
 
+// TODO: Pick<>
+export type INodeUser = Partial<IUser>;
+
 export interface INode {
   id?: number;
-  user?: Partial<IUser>;
+  user?: INodeUser;
 
   title: string;
   files: IFile[];

src/utils/hooks/node/useNodeComments.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+import { nodeLoadMoreComments, nodeLockComment } from '~/redux/node/actions';
+import { IComment } from '~/redux/types';
+import { useDispatch } from 'react-redux';
+
+export const useNodeComments = (id: string) => {
+  const dispatch = useDispatch();
+
+  const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);
+
+  const onDelete = useCallback(
+    (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
+    [dispatch]
+  );
+
+  return { onLoadMoreComments, onDelete };
+};

src/utils/hooks/useImageModal.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { IFile } from '~/redux/types';
+import { modalShowPhotoswipe } from '~/redux/modal/actions';
+import { useDispatch } from 'react-redux';
+
+export const useImageModal = () => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (images: IFile[], index: number) => dispatch(modalShowPhotoswipe(images, index)),
+    [dispatch]
+  );
+};