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 "../../../redux/notification/notification.actions";
import { axios } from "../../../utils";

export default function withExternalShare(Component, url) {
  return function (props) {
    const dispatch = useDispatch();
    const [shareOptions, setShareOptions] = useState(false);
    const [shareUrl, setShareUrl] = useState("");

    const handleDisplayReactionList = () => 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(props.shareUrl)
        .then(({ data }) => {
          if (!data.success) {
            dispatch(addNotification({ style: "danger", msg: data.data }));
            return;
          }

          setShareOptions(false);
          props.setValue(data.data);
        })
        .catch((err) => console.log(err));
    };

    useEffect(() => {
      if (shareOptions && !shareUrl) getShareUrl();
    }, [shareOptions]);

    return (
      <Component onClick={handleDisplayReactionList} {...props}>
        {shareOptions && (
          <div className="external__share">
            <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>
          </div>
        )}
      </Component>
    );
  };
}