diff --git a/src/features/questions/questions-list/question-actions/FavoritePopoverContent.jsx b/src/components/FavoritePopoverContent.jsx similarity index 74% rename from src/features/questions/questions-list/question-actions/FavoritePopoverContent.jsx rename to src/components/FavoritePopoverContent.jsx index 312ec88..04f470d 100644 --- a/src/features/questions/questions-list/question-actions/FavoritePopoverContent.jsx +++ b/src/components/FavoritePopoverContent.jsx @@ -2,13 +2,14 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useAuth } from 'common/context/Auth/useAuth'; import styled from 'styled-components'; +import PropTypes from 'prop-types'; const StyledPopoverBlock = styled.div` width: 250px; text-align: center; `; -const FavoritePopoverContent = () => { +const FavoritePopoverContent = ({ text }) => { const { executeLoggingInProcess } = useAuth(); return ( @@ -16,9 +17,13 @@ const FavoritePopoverContent = () => { Авторизуйся, {' '} - чтобы иметь возможность сохранять вопросы + {text} ); }; export default FavoritePopoverContent; + +FavoritePopoverContent.propTypes = { + text: PropTypes.node.isRequired, +}; diff --git a/src/features/comments/CommentView.jsx b/src/features/comments/CommentView.jsx index eada9d8..b8a86f2 100644 --- a/src/features/comments/CommentView.jsx +++ b/src/features/comments/CommentView.jsx @@ -2,11 +2,13 @@ import { Viewer } from '@toast-ui/react-editor'; import { useAuth } from 'common/context/Auth/useAuth'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import React from 'react'; +import React, { useState } from 'react'; import dayjs from 'dayjs'; import { HeartFilled, HeartOutlined } from '@ant-design/icons'; import { useDispatch, useSelector } from 'react-redux'; import { selectProfile } from 'features/profile/profileSlice'; +import FavoritePopoverContent from 'components/FavoritePopoverContent'; +import { Popover } from 'antd'; import { CommentsActions } from './comment-actions/CommentsActions'; import { likeCommentById, unlikeCommentById } from './commentsSlice'; @@ -66,9 +68,20 @@ const StyledCommentActions = styled.div` display: flex; `; +const StyledPopoverBlock = styled.div` + position: relative; +`; + +const StyledPopoverChildren = styled.div` + position: absolute; + right: 47px; +`; + export const CommentView = ({ comment, lastComment }) => { const Wrapper = lastComment ? StyledWrapper : React.Fragment; + const [isAuthorizePopoverEnable, setIsAuthorizePopoverEnable] = useState(false); + const dispatch = useDispatch(); const { token } = useAuth(); @@ -80,13 +93,21 @@ export const CommentView = ({ comment, lastComment }) => { const userId = profile._id; const handleToggleLike = () => { - if (!commentLikes.includes(userId)) { - dispatch(likeCommentById({ commentId, userId })); + if (token) { + if (!commentLikes.includes(userId)) { + dispatch(likeCommentById({ commentId, userId })); + } else { + dispatch(unlikeCommentById({ commentId, userId })); + } } else { - dispatch(unlikeCommentById({ commentId, userId })); + setIsAuthorizePopoverEnable(true); } }; + const handleOpenPopover = () => { + setIsAuthorizePopoverEnable(!isAuthorizePopoverEnable); + }; + return (
@@ -110,7 +131,6 @@ export const CommentView = ({ comment, lastComment }) => { className="d-flex align-items-center" type="button" onClick={handleToggleLike} - disabled={!token} > {commentLikes.includes(userId) ? ( @@ -119,6 +139,19 @@ export const CommentView = ({ comment, lastComment }) => { )} {commentLikes.length} + + + + } + /> + + )} diff --git a/src/features/questions/questions-list/question-actions/FavoritePopover.jsx b/src/features/questions/questions-list/question-actions/FavoritePopover.jsx index 9f0a44f..a9229d9 100644 --- a/src/features/questions/questions-list/question-actions/FavoritePopover.jsx +++ b/src/features/questions/questions-list/question-actions/FavoritePopover.jsx @@ -1,14 +1,18 @@ import { Popover } from 'antd'; import { useAuth } from 'common/context/Auth/useAuth'; import PropTypes from 'prop-types'; -import FavoritePopoverContent from './FavoritePopoverContent'; +import FavoritePopoverContent from 'components/FavoritePopoverContent'; export const FavoritePopover = ({ children }) => { const { token } = useAuth(); if (!token) { return ( - + } + > {children} );