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

highlight and scroll to new comments if authorized (#76)

Browse source 
* added new drone file

* commented-out unnecessary build stages

* commented-out unnecessary build stages

* added dynamic repo

* added dynamic repo

* added registry global env

* added registry global env

* added registry global env

* added template

* added template

* added template

* added template

* added branches to template

* added branches to template

* made build based on template

* made build based on template

* changed env file

* added .env.development file to repo

* fixed branch to develop

* added variables for develop and master

* added variables for develop and master

* added env variables to builder

* added env variables to builder

* added env variables to builder

* changed drone.yml

* added highlight for new comments

* fixed dependencies for useScrollToTop

* added smooth scrolling for comments

* fixed new comments highlight for same user
This commit is contained in:
muerwre 2021-10-06 12:48:26 +07:00 • committed by GitHub
parent a7e8e19b06
commit e071409241
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 172 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/node/NodeBottomBlock/index.tsx
View file

@ -23,6 +23,7 @@ interface IProps {
commentsCount: number;
isLoadingComments: boolean;
related: INodeRelated;
lastSeenCurrent?: string;
}
const NodeBottomBlock: FC<IProps> = ({
@ -34,6 +35,7 @@ const NodeBottomBlock: FC<IProps> = ({
commentsCount,
commentsOrder,
related,
lastSeenCurrent,
}) => {
const { inline } = useNodeBlocks(node, isLoading);
const { is_user } = useUser();
@ -50,6 +52,7 @@ const NodeBottomBlock: FC<IProps> = ({
{inline && <div className={styles.inline}>{inline}</div>}
<NodeCommentsBlock
lastSeenCurrent={lastSeenCurrent}
isLoading={isLoading}
isLoadingComments={isLoadingComments}
comments={comments}

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

@ -12,62 +12,64 @@ 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()}
group={group}
canEdit={canEditComment(group, user)}
onDelete={onDelete}
modalShowPhotoswipe={onShowPhotoswipe}
isSame={group.user.id === user.id}
/>
))}
{order === 'ASC' && more}
</div>
);
});
{order === 'ASC' && more}
</div>
);
}
);
export { NodeComments };

18
src/components/node/NodeCommentsBlock/index.tsx
View file

@ -10,18 +10,32 @@ interface IProps {
node: INode;
comments: IComment[];
count: number;
lastSeenCurrent?: string;
isLoading: boolean;
isLoadingComments: boolean;
}
const NodeCommentsBlock: FC<IProps> = ({ isLoading, isLoadingComments, node, comments, count }) => {
const NodeCommentsBlock: FC<IProps> = ({
isLoading,
isLoadingComments,
node,
comments,
count,
lastSeenCurrent,
}) => {
const user = useUser();
const { inline } = useNodeBlocks(node, isLoading);
return isLoading || isLoadingComments || (!comments.length && !inline) ? (
<NodeNoComments is_loading={isLoadingComments || isLoading} />
) : (
<NodeComments count={count} comments={comments} user={user} order="DESC" />
<NodeComments
count={count}
comments={comments}
user={user}
order="DESC"
lastSeenCurrent={lastSeenCurrent}
/>
);
};