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, countUrl, setValue) {

    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(countUrl)

                .then(({ data }) => {

                    if (!data.success) {

                        dispatch(addNotification({ style: 'danger', msg: data.data }))

                        return

                    }

                    setShareOptions(false)

                    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>

        )

    }

}