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