Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState, useRef } from 'react'
import axios from '../../utils/axios'
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'

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='postContainer mx-auto col-md-8'>
                <div className="row">
                    <div className="col-md-7">
                        <div className="job_descp">
                            <img
                                alt={post.title}
                                src={baseUrl + post.image}
                                className="Entradas"
                            />
                        </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>
                    <div className="col-md-5">
                        <div className="post_topbar" >
                            <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>
            </div >
        </div>
    )
}