Proyectos de Subversion LeadersLinked - SPA

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 'store/notification/notification.actions'

import { axios } from '../../../utils'

import SharePopup from './mobile-share/MobileSharePopUp'

import styled from 'styled-components'

import useMobile from '@app/hooks/useMobile'

const StyledShareContainer = styled.div`

  display: flex;

  position: absolute;

  align-items: center;

  padding: 5px 1rem;

  bottom: calc(100% + 0.5rem);

  gap: 0.5rem;

  right: 0;

  width: 16.5rem;

  border-radius: 10px;

  background-color: #fff;

  box-shadow: 0px 4px 4px -2px rgb(0 0 0 / 12%),

    0px -4px 4px -2px rgb(0 0 0 / 12%);

`

export default function withExternalShare(Component, url) {

  return function ({ children, setValue, shorterUrl }) {

    const [showOptions, setShowOptions] = useState(false)

    const [openPopup, setOpenPopup] = useState(false)

    const [shareUrl, setShareUrl] = useState('')

    const isMobile = useMobile()

    const dispatch = useDispatch()

    const getShareUrl = async () => {

      try {

        const response = await axios.get(url)

        const { data, success } = response.data

        if (!success) throw new Error(data)

        setShareUrl(data)

        return data

      } catch (error) {

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

      }

    }

    const onClick = () => setShowOptions(!showOptions)

    const incrementCount = async () => {

      await axios

        .post(shorterUrl)

        .then((response) => {

          const { data, success } = response.data

          if (!success) throw new Error(data)

          setShowOptions(false)

          setValue(data)

        })

        .catch((err) =>

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

        )

    }

    const mobileOnClick = async () => {

      if (navigator?.share) {

        try {

          const shareUrl = await getShareUrl()

          await navigator.share({

            url: shareUrl

          })

          incrementCount()

        } catch (error) {

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

        }

      } else if (window?.AndroidShareHandler) {

        try {

          const shareUrl = await getShareUrl()

          window.AndroidShareHandler.share(shareUrl)

        } catch (error) {

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

        }

      } else {

        setOpenPopup(true)

      }

    }

    useEffect(() => {

      if (!showOptions || !openPopup || shareUrl) return

      getShareUrl()

    }, [showOptions, shareUrl])

    return (

      <>

        <Component onClick={isMobile ? mobileOnClick : onClick}>

          {children}

          {showOptions && (

            <StyledShareContainer>

              <FacebookShareButton

                url={shareUrl}

                onShareWindowClose={incrementCount}

                disabled={!shareUrl}

              >

                <FacebookIcon size={32} round />

              </FacebookShareButton>

              <TwitterShareButton

                url={shareUrl}

                onShareWindowClose={incrementCount}

                disabled={!shareUrl}

              >

                <TwitterIcon size={32} round />

              </TwitterShareButton>

              <TelegramShareButton

                url={shareUrl}

                onShareWindowClose={incrementCount}

                disabled={!shareUrl}

              >

                <TelegramIcon size={32} round />

              </TelegramShareButton>

              <WhatsappShareButton

                url={shareUrl}

                onShareWindowClose={incrementCount}

                disabled={!shareUrl}

              >

                <WhatsappIcon size={32} round />

              </WhatsappShareButton>

              <RedditShareButton

                url={shareUrl}

                onShareWindowClose={incrementCount}

                disabled={!shareUrl}

              >

                <RedditIcon size={32} round />

              </RedditShareButton>

              <EmailShareButton

                url={shareUrl}

                onShareWindowClose={incrementCount}

                disabled={!shareUrl}

              >

                <EmailIcon size={32} round />

              </EmailShareButton>

            </StyledShareContainer>

          )}

        </Component>

        <SharePopup

          show={openPopup}

          shareData={{ url: shareUrl }}

          onClose={() => setOpenPopup(false)}

        />

      </>

    )

  }

}