Proyectos de Subversion LeadersLinked - SPA

import React, { 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 { styled } from '@mui/material'

import { axios } from '@app/utils'

import { useMobile } from '@hooks'

import { addNotification } from '@app/redux/notification/notification.actions'

import colors from '@styles/colors'

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

const StyledShareContainer = styled('div')(({ theme }) => ({

  display: 'flex',

  position: 'absolute',

  alignItems: 'center',

  padding: theme.spacing(0.5),

  bottom: `calc(100% + ${theme.spacing(0.5)})`,

  gap: theme.spacing(0.5),

  right: 0,

  borderRadius: theme.shape.borderRadius,

  backgroundColor: colors.main

}))

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 handleClick = async () => {

      const shorterUrl = shareUrl || (await getShareUrl())

      setShareUrl(shorterUrl)

      if (!isMobile) {

        setShowOptions(!showOptions)

        return

      }

      if (navigator?.share) {

        try {

          await navigator.share({ url: shorterUrl })

          incrementCount()

        } catch (error) {

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

        }

        return

      }

      if (window?.AndroidShareHandler) {

        try {

          window.AndroidShareHandler.share(shorterUrl)

        } catch (error) {

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

        }

        return

      }

      setOpenPopup(true)

    }

    const getShareUrl = async () => {

      try {

        const response = await axios.get(url)

        const { data, success } = response.data

        if (!success) throw new Error(data)

        return data

      } catch (error) {

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

      }

    }

    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 }))

        )

    }

    return (

      <>

        <Component onClick={handleClick}>

          {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)}

        />

      </>

    )

  }

}