diff --git a/src/components/comment/Comment/index.tsx b/src/components/comment/Comment/index.tsx index 57bb8b81..b95a9d7e 100644 --- a/src/components/comment/Comment/index.tsx +++ b/src/components/comment/Comment/index.tsx @@ -20,6 +20,7 @@ type IProps = HTMLAttributes & { group: ICommentGroup; isSame?: boolean; canEdit?: boolean; + highlighted?: boolean; saveComment: (data: IComment) => Promise; onDelete: (id: IComment['id'], isLocked: boolean) => void; onShowImageModal: (images: IFile[], index: number) => void; @@ -33,6 +34,7 @@ const Comment: FC = memo( isSame, isLoading, className, + highlighted, canEdit, onDelete, onShowImageModal, @@ -41,8 +43,9 @@ const Comment: FC = memo( }) => { return ( = memo(
{group.comments.map((comment, index) => { if (comment.deleted_at) { - return ; + return ( + + ); } + const prefix = Math.abs(group.distancesInDays[index]) > 14 && ( + 0 && group.comments[index - 1]?.created_at + ? parseISO(group.comments[index - 1].created_at!) + : undefined + } + /> + ); + return ( 14 && ( - 0 && group.comments[index - 1]?.created_at - ? parseISO(group.comments[index - 1].created_at!) - : undefined - } - /> - ) - } + prefix={prefix} saveComment={saveComment} nodeId={nodeId} comment={comment} @@ -83,7 +94,7 @@ const Comment: FC = memo(
); - } + }, ); export { Comment }; diff --git a/src/components/comment/Comment/styles.module.scss b/src/components/comment/Comment/styles.module.scss index efc60a22..01c1e131 100644 --- a/src/components/comment/Comment/styles.module.scss +++ b/src/components/comment/Comment/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes appear { from { @@ -11,3 +11,7 @@ .wrap { animation: appear 1s; } + +.highlighted { + box-shadow: $color_primary 0 0 0px 2px; +} diff --git a/src/constants/boris/constants.ts b/src/constants/boris/constants.ts index c214b592..1301a2bb 100644 --- a/src/constants/boris/constants.ts +++ b/src/constants/boris/constants.ts @@ -24,3 +24,6 @@ export const initialBackendStats: StatBackend = { }; export const foundationDate = '2009-07-21 12:28:58'; + +export const ANNOUNCE_USER_ID = 1; +export const BORIS_NODE_ID = 696; diff --git a/src/containers/node/NodeComments/index.tsx b/src/containers/node/NodeComments/index.tsx index 6fbcf1fd..0487d935 100644 --- a/src/containers/node/NodeComments/index.tsx +++ b/src/containers/node/NodeComments/index.tsx @@ -2,6 +2,7 @@ import React, { FC, memo, useMemo } from 'react'; import { Comment } from '~/components/comment/Comment'; import { LoadMoreButton } from '~/components/input/LoadMoreButton'; +import { ANNOUNCE_USER_ID, BORIS_NODE_ID } from '~/constants/boris/constants'; import { useGrouppedComments } from '~/hooks/node/useGrouppedComments'; import { ICommentGroup } from '~/types'; import { useCommentContext } from '~/utils/context/CommentContextProvider'; @@ -64,6 +65,9 @@ const NodeComments: FC = memo(({ order }) => { nodeId={node.id!} key={group.ids.join()} group={group} + highlighted={ + node.id === BORIS_NODE_ID && group.user.id === ANNOUNCE_USER_ID + } canEdit={canEditComment(group, user)} onDelete={onDeleteComment} onShowImageModal={onShowImageModal} diff --git a/src/pages/boris.tsx b/src/pages/boris.tsx index 81b4aaf6..d4425475 100644 --- a/src/pages/boris.tsx +++ b/src/pages/boris.tsx @@ -3,6 +3,7 @@ import React, { VFC } from 'react'; import { observer } from 'mobx-react-lite'; import { PageTitle } from '~/components/common/PageTitle'; +import { BORIS_NODE_ID } from '~/constants/boris/constants'; import { useBoris } from '~/hooks/boris/useBoris'; import { useNodeComments } from '~/hooks/comments/useNodeComments'; import { useImageModal } from '~/hooks/navigation/useImageModal'; @@ -13,7 +14,7 @@ import { NodeContextProvider } from '~/utils/context/NodeContextProvider'; import { getPageTitle } from '~/utils/ssr/getPageTitle'; const BorisPage: VFC = observer(() => { - const { node, isLoading, update } = useLoadNode(696); + const { node, isLoading, update } = useLoadNode(BORIS_NODE_ID); const onShowImageModal = useImageModal(); const { @@ -24,7 +25,7 @@ const BorisPage: VFC = observer(() => { hasMore, isLoading: isLoadingComments, isLoadingMore, - } = useNodeComments(696); + } = useNodeComments(BORIS_NODE_ID); const { title, stats, isLoadingStats } = useBoris(comments); return (