show like button to guests

src/layouts/NodeLayout/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { observer } from 'mobx-react-lite';
 
@@ -7,9 +7,12 @@ import { ScrollHelperBottom } from '~/components/common/ScrollHelperBottom';
 import { Card } from '~/components/containers/Card';
 import { Footer } from '~/components/main/Footer';
 import { NodeTitle } from '~/components/node/NodeTitle';
+import { Dialog } from '~/constants/modal';
 import { Container } from '~/containers/main/Container';
 import { SubmitBarRouter } from '~/containers/main/SubmitBarRouter';
 import { NodeBottomBlock } from '~/containers/node/NodeBottomBlock';
+import { useAuth } from '~/hooks/auth/useAuth';
+import { useShowModal } from '~/hooks/modal/useShowModal';
 import { useNodeActions } from '~/hooks/node/useNodeActions';
 import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { useNodeCoverImage } from '~/hooks/node/useNodeCoverImage';
@@ -19,6 +22,8 @@ import { useNodeContext } from '~/utils/context/NodeContextProvider';
 import styles from './styles.module.scss';
 
 const NodeLayout = observer(() => {
+  const { isUser } = useAuth();
+  const showRegisterDialog = useShowModal(Dialog.Register);
   const { node, isLoading, update } = useNodeContext();
   const { head, block } = useNodeBlocks(node, isLoading);
   const [canEdit, canLike, canStar] = useNodePermissions(node);
@@ -26,6 +31,8 @@ const NodeLayout = observer(() => {
 
   useNodeCoverImage(node);
 
+  const onUnauthorizedLike = useCallback(() => showRegisterDialog({}), []);
+
   return (
     <div className={styles.wrap}>
       {head}
@@ -46,9 +53,9 @@ const NodeLayout = observer(() => {
               isLoading={isLoading}
               createdAt={node.created_at || ''}
               canEdit={canEdit}
-              canLike={canLike}
+              canLike={canLike || !isUser}
               canStar={canStar}
-              onLike={onLike}
+              onLike={isUser ? onLike : onUnauthorizedLike}
               onStar={onStar}
               onLock={onLock}
               onEdit={onEdit}