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">

                    <HomeNews />

                </div>

            </div>

        </div >

    )

}