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

added highlight for new comments

Browse source
This commit is contained in:
Fedor Katurov 2021-10-06 12:09:33 +07:00
parent 5585d566fd
commit 277f0fea43
19 changed files with 158 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/components/node/NodeComments/index.tsx
View file

@ -12,62 +12,63 @@ 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 {
comments: IComment[];
count: INodeState['comment_count'];
user: IUser;
order?: 'ASC' | 'DESC';
lastSeenCurrent?: string;
}
const NodeComments: FC<IProps> = memo(({ comments, user, count = 0, order = 'DESC' }) => {
const dispatch = useDispatch();
const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
const NodeComments: FC<IProps> = memo(
({ comments, user, count = 0, order = 'DESC', lastSeenCurrent }) => {
const dispatch = useDispatch();
const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
const groupped: ICommentGroup[] = useMemo(
() => (order === 'DESC' ? [...comments].reverse() : comments).reduce(groupCommentsByUser, []),
[comments, order]
);
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 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 && (
<div className={styles.more} onClick={onLoadMoreComments}>
Показать ещё{' '}
{plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
{left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
</div>
),
[left, onLoadMoreComments]
);
const more = useMemo(
() =>
left > 0 && (
<div className={styles.more} onClick={onLoadMoreComments}>
Показать ещё{' '}
{plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
{left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
</div>
),
[left, onLoadMoreComments]
);
return (
<div className={styles.wrap}>
{order === 'DESC' && more}
return (
<div className={styles.wrap}>
{order === 'DESC' && more}
{groupped.map(group => (
<Comment
key={group.ids.join()}
comment_group={group}
can_edit={canEditComment(group, user)}
onDelete={onDelete}
modalShowPhotoswipe={onShowPhotoswipe}
/>
))}
{groupped.map(group => (
<Comment
key={group.ids.join()}
comment_group={group}
can_edit={canEditComment(group, user)}
onDelete={onDelete}
modalShowPhotoswipe={onShowPhotoswipe}
/>
))}
{order === 'ASC' && more}
</div>
);
});
{order === 'ASC' && more}
</div>
);
}
);
export { NodeComments };