muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

refactored node comments to component

Browse source
This commit is contained in:
Fedor Katurov 2021-11-06 21:14:50 +07:00
parent b44266437d
commit ab15a10d01
13 changed files with 208 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/comment/Comment/index.tsx
View file

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

9
src/components/comment/CommentContent/index.tsx
View file

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