Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState, useRef } from 'react'
import parse from "html-react-parser";
import moment from 'moment'
import { BiShareAlt } from 'react-icons/bi'
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share';
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'
import { axios } from '../../utils';
import HomeNews from '../components/home-section/HomeNews';

export default function PostView({ post = {} }) {

    const [shareUrl, setShareUrl] = useState()
    const dispatch = useDispatch()

    const getShareUrl = new Promise((resolve, reject) => {
        axios.get(post.share_external_url)
            .then(({ data }) => {
                if (!data.success) {
                    dispatch(addNotification({ style: 'danger', msg: data.data }))
                    setShareOptions(false)
                    return reject(data.data)
                }
                setShareUrl(data.data)
                return resolve(data.data)
            })
            .catch((err) => reject(err))
    });

    const baseUrl = `/storage/type/post/code/${post.uuid}/filename/`
    const shareContainer = useRef(null)
    const [shareOptions, setShareOptions] = useState(false)

    return (
        <div className="container">
            <div className="d-flex flex-column flex-md-row" style={{ gap: '1rem' }}>
                <div className="col-12 col-md-8 peopleYouMayKnow">
                    <div className="job_descp">
                        <img
                            alt={post.title}
                            src={baseUrl + post.image}
                            className="Entradas"
                            style={{ objectFit: 'contain' }}
                        />
                    </div>
                    <div className="job-status-bar">
                        <ul className="reactions-list">
                            <li className="position-relative">
                                <button
                                    type="button"
                                    className="btn-indicator"
                                    onClick={() => setShareOptions(!shareOptions)}
                                >
                                    <BiShareAlt />
                                </button>
                                {shareOptions &&
                                    <div className="ext_share post" ref={shareContainer}>
                                        <FacebookShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
                                            <FacebookIcon size={32} round />
                                        </FacebookShareButton>
                                        <TwitterShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
                                            <TwitterIcon size={32} round />
                                        </TwitterShareButton>
                                        <TelegramShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
                                            <TelegramIcon size={32} round />
                                        </TelegramShareButton>
                                        <WhatsappShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
                                            <WhatsappIcon size={32} round />
                                        </WhatsappShareButton>
                                        <RedditShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
                                            <RedditIcon size={32} round />
                                        </RedditShareButton>
                                        <EmailShareButton beforeOnClick={() => getShareUrl} url={shareUrl}>
                                            <EmailIcon size={32} round />
                                        </EmailShareButton>
                                    </div>
                                }
                            </li>
                        </ul>
                    </div>
                    <div className="post_topbar mt-3" >
                        <div className="usy-dt">
                            <div className="usy-name">
                                <h3>{post.title}</h3>
                                <span>
                                    {moment(post.date).format('DD-MM-YYYY')}
                                </span>
                            </div>
                        </div>
                    </div >
                    <div className="job_descp">
                        <div className="show-read-more">
                            {parse(post.description)}
                        </div>
                    </div>
                </div>
                <div className="col-12 col-md-4 p-0">
                    <HomeNews currentPost={post.uuid} />
                </div>
            </div>
        </div >
    )
}