diff --git a/src/common/enums/events.ts b/src/common/enums/events.ts index 70017901b7..f1c0c22e04 100644 --- a/src/common/enums/events.ts +++ b/src/common/enums/events.ts @@ -70,6 +70,7 @@ export enum UNIVERSAL_AUTH_TRIGGER { support = 'support', visitorWall = 'visitorWall', momentComment = 'momentComment', + momentLike = 'momentLike', } /** diff --git a/src/components/MomentDigest/FooterActions/LikeButton/index.tsx b/src/components/MomentDigest/FooterActions/LikeButton/index.tsx index eceeb94434..68c2c70b03 100644 --- a/src/components/MomentDigest/FooterActions/LikeButton/index.tsx +++ b/src/components/MomentDigest/FooterActions/LikeButton/index.tsx @@ -1,12 +1,16 @@ import classNames from 'classnames' import gql from 'graphql-tag' -import { useState } from 'react' +import { useContext, useState } from 'react' import { useIntl } from 'react-intl' import { ReactComponent as IconLike } from '@/public/static/icons/24px/like.svg' import { ReactComponent as IconLikeFill } from '@/public/static/icons/24px/like-fill.svg' +import { + OPEN_UNIVERSAL_AUTH_DIALOG, + UNIVERSAL_AUTH_TRIGGER, +} from '~/common/enums' import { numAbbr } from '~/common/utils' -import { Button, useMutation } from '~/components' +import { Button, useMutation, ViewerContext } from '~/components' import { LIKE_MOMENT, UNLIKE_MOMENT, @@ -47,6 +51,7 @@ const fragments = { const LikeButton = ({ moment, iconSize = 20 }: LikeButtonProps) => { const intl = useIntl() + const viewer = useContext(ViewerContext) const { likeCount, liked } = moment const [playHeartBeat, setPlayHeartBeat] = useState(false) @@ -114,6 +119,14 @@ const LikeButton = ({ moment, iconSize = 20 }: LikeButtonProps) => { textColor="black" textActiveColor="greyDarker" onClick={() => { + if (!viewer.isAuthed) { + window.dispatchEvent( + new CustomEvent(OPEN_UNIVERSAL_AUTH_DIALOG, { + detail: { trigger: UNIVERSAL_AUTH_TRIGGER.momentLike }, + }) + ) + return + } likeMoment() setPlayHeartBeat(true) }}