diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js index 6e374d7a159e18c51bc06a44038c0aa859c796d6..2b58c70f58000d4014fb53330c8901a65cbfc1b3 100644 --- a/src/Components/ColCardPublicOptions.js +++ b/src/Components/ColCardPublicOptions.js @@ -25,13 +25,14 @@ import OpenIcon from '@material-ui/icons/OpenInNew'; import { Link } from 'react-router-dom' import MoreVertIcon from '@material-ui/icons/MoreVert'; import styled from 'styled-components' -import ErrorIcon from '@material-ui/icons/Error'; +import FavoriteIcon from '@material-ui/icons/Favorite'; import ReportModal from './ReportModal.js' import ReportProblemIcon from '@material-ui/icons/ReportProblem'; import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'; -import { deleteRequest } from '../Components/HelperFunctions/getAxiosConfig' +import AddIcon from '@material-ui/icons/Add'; +import ExitToAppIcon from '@material-ui/icons/ExitToApp'; -export default function ColCardPublicOptions(props) { +export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) { const [anchorEl, setAnchorEl] = React.useState(null); function handleClick(event) { @@ -45,20 +46,13 @@ export default function ColCardPublicOptions(props) { const [reportModalOpen, toggleReportModal] = useState(false) const handleReportModal = (value) => { toggleReportModal(value) } - const handleUnfollow = () => { - if (props.currentUserId) - deleteRequest(`/collections/${props.id}/follow`, (data) => { console.log(data) }, (error) => { console.log(error) }) - else - props.handleLogin() - } - return ( <> <ReportModal open={reportModalOpen} handleClose={() => handleReportModal(false)} form="colecao" - complainableId={props.id} + complainableId={id} complainableType={"Collection"} /> <div style={{ fontSize: "12px" }}> @@ -78,7 +72,7 @@ export default function ColCardPublicOptions(props) { onClose={handleClose} > <StyledMenuItem> - <Link to={"/colecao-do-usuario/" + props.id}> + <Link to={"/colecao-do-usuario/" + id}> <ListItemIcon> <OpenIcon /> </ListItemIcon> @@ -88,7 +82,7 @@ export default function ColCardPublicOptions(props) { <StyledMenuItem onClick={() => - window.open("/colecao-do-usuario/" + props.id, "_blank") + window.open("/colecao-do-usuario/" + id, "_blank") } > <ListItemIcon> @@ -97,19 +91,38 @@ export default function ColCardPublicOptions(props) { Abrir em nova guia </StyledMenuItem> - <StyledMenuItem onClick={handleUnfollow}> + <StyledMenuItem onClick={handleLike}> + <ListItemIcon> + { + liked ? + <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} /> + } + </ListItemIcon> + { + liked ? + "Desfavoritar" : "Favoritar" + } + </StyledMenuItem> + + <StyledMenuItem onClick={handleFollow}> <ListItemIcon> - <ErrorIcon /> + { + userFollowingCol ? + <ExitToAppIcon /> : <AddIcon /> + } </ListItemIcon> - Deixar de Seguir + { + userFollowingCol ? + "Deixar de seguir" : "Seguir" + } </StyledMenuItem> <StyledMenuItem onClick={() => { - if (props.currentUserId) + if (currentUserId) handleReportModal(true); else - props.handleLogin() + handleLogin() }} > <ListItemIcon> diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js index 6f7322e7261536655d78098ad28b3639e87af2a5..db76b4b12cb152daa637d6a33949c6dc2b5f6da1 100644 --- a/src/Components/CollectionCardFunction.js +++ b/src/Components/CollectionCardFunction.js @@ -46,7 +46,7 @@ export default function CollectionCardFunction(props) { // eslint-disable-next-line const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar) - const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed ? props.followed : false) + const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed) const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) } const [name, setName] = useState(props.name) @@ -297,6 +297,10 @@ export default function CollectionCardFunction(props) { } <ColCardPublicOptions id={props.id} + userFollowingCol={userFollowingCol} + handleLike={handleLike} + handleFollow={handleFollow} + liked={liked} handleLogin={handleLogin} currentUserId={state.currentUser.id} />