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/config/colors';

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

const ShareContainer = 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,

  border: `1px solid ${colors.border.primary}`

}));

export default function withExternalShare(Component, url) {

  return function ComponentWithExternalShare({ 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 && (

            <ShareContainer>

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

            </ShareContainer>

          )}

        </Component>

        <SharePopup

          show={openPopup}

          shareData={{ url: shareUrl }}

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

        />

      </>

    );

  };

}