Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/display-name */
import React, { useEffect, useState } from "react"
import { useDispatch } from "react-redux"
import { EmailIcon, EmailShareButton, FacebookIcon, FacebookShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from "react-share"
import { addNotification } from "../../../../redux/notification/notification.actions"
import { axios } from "../../../../utils"

export default function withExternalShare(Component, url, params) {
    return function () {
        const dispatch = useDispatch()
        const [shareOptions, setShareOptions] = useState(false)
        const [shareUrl, setShareUrl] = useState('');

        const handleDisplayReactionList = () => setShareOptions(!shareOptions)

        const getShareUrl = async () => {
            await axios.get(url)
                .then(({ data }) => {
                    if (!data.success) {
                        dispatch(addNotification({ style: 'danger', msg: data.data }))
                        setShareOptions(false)
                        return
                    }

                    setShareUrl(data.data)
                })
                .catch((err) => console.log(err))
        }

        const incrementCount = async () => {
            await axios.post(params.shareUrl)
                .then(({ data }) => {
                    if (!data.success) {
                        dispatch(addNotification({ style: 'danger', msg: data.data }))
                        return
                    }

                    setShareOptions(false)
                    params.setValue(data.data)
                })
                .catch((err) => console.log(err))
        }

        useEffect(() => {
            if (shareOptions && !shareUrl) getShareUrl()
        }, [shareOptions])

        return (
            <div className="position-relative d-inline-flex" onClick={handleDisplayReactionList} style={{ flexGrow: 1 }}>
                <Component {...params} />
                {shareOptions &&
                    <div className="external__share" >
                        <FacebookShareButton url={shareUrl} onShareWindowClose={() => incrementCount()}>
                            <FacebookIcon size={32} round />
                        </FacebookShareButton>
                        <TwitterShareButton url={shareUrl} onShareWindowClose={() => incrementCount()}>
                            <TwitterIcon size={32} round />
                        </TwitterShareButton>
                        <TelegramShareButton url={shareUrl} onShareWindowClose={() => incrementCount()}>
                            <TelegramIcon size={32} round />
                        </TelegramShareButton>
                        <WhatsappShareButton url={shareUrl} onShareWindowClose={() => incrementCount()}>
                            <WhatsappIcon size={32} round />
                        </WhatsappShareButton>
                        <RedditShareButton url={shareUrl} onShareWindowClose={() => incrementCount()}>
                            <RedditIcon size={32} round />
                        </RedditShareButton>
                        <EmailShareButton url={shareUrl} onShareWindowClose={() => incrementCount()}>
                            <EmailIcon size={32} round />
                        </EmailShareButton>
                    </div>
                }
            </div>
        )
    }
}