diff --git a/src/components/RecipeDetail.jsx b/src/components/RecipeDetail.jsx index b19f4a1..a8f2687 100644 --- a/src/components/RecipeDetail.jsx +++ b/src/components/RecipeDetail.jsx @@ -8,6 +8,7 @@ import defaultProfile from "../assets/defaultProfile.png"; import { CSSTransition } from "react-transition-group"; import gyozas from '../assets/gyozas.jpg'; import "bootstrap/dist/css/bootstrap.min.css"; +import { FaWhatsapp, FaLinkedin, FaTwitter, FaCopy } from 'react-icons/fa'; import { Container, Row, @@ -28,6 +29,7 @@ import { FolderSymlinkFill, Heart, HeartFill, + Share } from "react-bootstrap-icons"; import ImageModal from "./ImageModal"; import Reviews from "./Reviews"; @@ -207,6 +209,131 @@ function RecipeDetail() { )); + const handleFollow = async () => { + if (!isLogged()) { + setShowLoginRedirectModal(true); + return; + } + + try { + const response = await fetch(process.env.REACT_APP_API_URL + `/user/follow/${userName}`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + }, + }); + + if (response.ok) { + setConfirmationMessage(`You're now following ${userName}.`); + setIsFollowing(true); + setToastData({ + message: `You're now following ${userName}.`, + variant: 'success', + show: true, + }); + } else { + throw new Error('There was an error following the user.'); + } + } catch (error) { + console.error('Error following user:', error); + setConfirmationMessage(error.toString()); + setShowConfirmation(true); + } + }; + + const handleUnfollow = async () => { + try { + const response = await fetch(process.env.REACT_APP_API_URL + `/user/unfollow/${userName}`, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + }, + }); + + if (response.ok) { + setConfirmationMessage("You have unfollowed the user."); + setIsFollowing(false) + setToastData({ + message: `You' have unfollowed ${userName}.`, + variant: 'secondary', + show: true, + }); + } else { + throw new Error('There was an error unfollowing the user.'); + } + } catch (error) { + console.error('Error unfollowing user:', error); + setConfirmationMessage(error.toString()); + setShowConfirmation(true); + } + setShowUnfollowModal(false); + }; + + const createShareLink = (socialNetwork) => { + const url = encodeURIComponent(window.location.href); + const text = encodeURIComponent("Hola, check out this awesome recipe I found!"); + switch (socialNetwork) { + case "twitter": + return `https://twitter.com/intent/tweet?text=${text}&url=${url}`; + case "twitter": + return `https://twitter.com/intent/tweet?text=${text}&url=${url}`; + case "facebook": + return `https://www.facebook.com/sharer/sharer.php?u=${url}`; + case "linkedin": + return `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${text}`; + default: + return ""; + } + }; + + const copyToClipboard = () => { + const url = window.location.href; + navigator.clipboard.writeText(url).then(() => { + setToastData({ + message: "Link copied to clipboard!", + variant: "success", + show: true, + }); + }, (err) => { + console.error('Could not copy text: ', err); + }); + }; + + const handleShare = async () => { + console.error('hola') + if (navigator.share) { + try { + await navigator.share({ + title: 'Check out this recipe!', + text: 'Hola, check out this awesome recipe I found!', + url: window.location.href, + }); + console.log('Content shared successfully'); + } catch (error) { + console.error('Error sharing content:', error); + } + } else { + console.log('Web Share API is not supported in your browser.'); + } + }; + + const recipeUrl = `www.kasula.live/RecipeDetail/${id}`; + const message = encodeURIComponent('Check this amazing recipe that I found in KasulĂ ! ' + recipeUrl); + + const shareOnWhatsApp = () => { + window.open(`https://wa.me/?text=${message}`, '_blank'); + }; + + const shareOnLinkedIn = () => { + window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${recipeUrl}&title=${encodeURIComponent('Mira esta receta que chula!')}`, '_blank'); + }; + + const shareOnTwitter = () => { + window.open(`https://twitter.com/intent/tweet?text=${message}`, '_blank'); + }; + return ( - + +
handleNavigate(null, recipe.user_id)}> + + + + + +

{userName}

+ + + {!adminMode && ( + + )} + +
+
+ +
+ + + + + + + + WhatsApp + + + LinkedIn + + + Twitter + + + Copy Link + + +