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 styled from 'styled-components'

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 [shareOptions, setShareOptions] = useState(false)
    const [shareUrl, setShareUrl] = useState('')
    const dispatch = useDispatch()

    const toggleShareOptions = () => {
      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(shorterUrl)
        .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 (
      <Component onClick={toggleShareOptions}>
        {children}

        {shareOptions && (
          <StyledShareContainer>
            <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>
          </StyledShareContainer>
        )}
      </Component>
    )
  }
}