diff --git a/src/components/MomentDigest/Feed/index.tsx b/src/components/MomentDigest/Feed/index.tsx index 97ad77be10..651bc89811 100644 --- a/src/components/MomentDigest/Feed/index.tsx +++ b/src/components/MomentDigest/Feed/index.tsx @@ -1,4 +1,5 @@ import Link from 'next/link' +import React from 'react' import { FormattedMessage } from 'react-intl' import IconDot from '@/public/static/icons/dot.svg' @@ -31,24 +32,26 @@ export type MomentDigestFeedProps = { hasCommentedFollowees?: boolean } -export const MomentDigestFeed = ({ +type ContainerProps = { + moment: MomentDigestFeedProps['moment'] + hasAuthor?: boolean + hasCommentedFollowees?: boolean + openMomentDetail: () => void +} + +const Container = ({ moment, hasAuthor, hasCommentedFollowees, -}: MomentDigestFeedProps) => { + openMomentDetail, +}: ContainerProps) => { const { content, createdAt, assets, author } = moment - const { router } = useRoute() const momentDetailPath = toPath({ page: 'momentDetail', moment, }) - const goToMomentDetail = () => { - setReferrer() - router.push(momentDetailPath.href) - } - const setReferrer = () => { sessionStorage.set(MOMENT_DIGEST_REFERRER, true) } @@ -57,112 +60,136 @@ export const MomentDigestFeed = ({ setReferrer() } - const Container = ({ - openMomentDetail, - hasAuthor, - }: { - openMomentDetail: () => void - hasAuthor?: boolean - }) => { - return ( -
-
- {hasAuthor && ( -
- - -
- )} -
- - - -
-
- {!!content && ( + return ( +
+
+ {hasAuthor && (
{ - const target = event.target as HTMLElement - const targetTagName = target.tagName.toLowerCase() - if ( - // link - targetTagName === 'a' || - // mention - (targetTagName === 'span' && - target.parentElement?.tagName.toLowerCase() === 'a' && - target.innerText.includes('@')) - ) { - event.stopPropagation() - return - } - openMomentDetail() - }} - data-test-id={TEST_ID.MOMENT_DIGEST_CONTENT} + className={styles.author} + data-test-id={TEST_ID.MOMENT_DIGEST_AUTHOR} > - { - // TODO: open moment detail dialog or navigate to moment detail page - }} - > - - - } - > -
- + +
)} - {!!assets && assets.length > 0 && ( -
- -
- )} - -
- ) +
+ + + +
+
+ {!!content && ( +
{ + const target = event.target as HTMLElement + const targetTagName = target.tagName.toLowerCase() + if ( + // link + targetTagName === 'a' || + // mention + (targetTagName === 'span' && + target.parentElement?.tagName.toLowerCase() === 'a' && + target.innerText.includes('@')) + ) { + event.stopPropagation() + return + } + openMomentDetail() + }} + data-test-id={TEST_ID.MOMENT_DIGEST_CONTENT} + > + { + // TODO: open moment detail dialog or navigate to moment detail page + }} + > + + + } + > +
+ +
+ )} + {!!assets && assets.length > 0 && ( +
+ +
+ )} + +
+ ) +} + +const BaseMomentDigestFeed = ({ + moment, + hasAuthor, + hasCommentedFollowees, +}: MomentDigestFeedProps) => { + const { router } = useRoute() + + const momentDetailPath = toPath({ + page: 'momentDetail', + moment, + }) + + const setReferrer = () => { + sessionStorage.set(MOMENT_DIGEST_REFERRER, true) + } + + const goToMomentDetail = () => { + setReferrer() + router.push(momentDetailPath.href) } return ( <> - + {({ openDialog }) => ( - + )} @@ -170,4 +197,19 @@ export const MomentDigestFeed = ({ ) } +type MemoizedMomentDigestFeed = React.MemoExoticComponent< + React.FC +> & { + fragments: typeof fragments +} + +export const MomentDigestFeed = React.memo( + BaseMomentDigestFeed, + ({ moment: prev }, { moment: next }) => + prev.liked === next.liked && + prev.likeCount === next.likeCount && + prev.commentCount === next.commentCount && + prev.state === next.state +) as MemoizedMomentDigestFeed + MomentDigestFeed.fragments = fragments diff --git a/src/views/HottestMoments/gql.ts b/src/views/HottestMoments/gql.ts index 0a3e8c40f1..75bcd152ea 100644 --- a/src/views/HottestMoments/gql.ts +++ b/src/views/HottestMoments/gql.ts @@ -13,10 +13,12 @@ const momentConnectionFragment = gql` cursor node { ...MomentDigestFeedMomentPublic + ...MomentDigestFeedMomentPrivate } } } ${MomentDigestFeed.fragments.moment.public} + ${MomentDigestFeed.fragments.moment.private} ` export const HOTTEST_MOMENTS_PUBLIC = gql`