Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from "react";

import parse from "html-react-parser";

import useOutsideClick from "../../../../hooks/useOutsideClick";

import styles from "./MobileSharePopUp.module.scss";

const SharePopup = ({ shareData, onClose, onError }) => {

  const [shareUrl, setShareUrl] = useState("");

  const [state, setState] = useState("pending");

  const popUp = useRef(null);

  useOutsideClick(popUp, onClose);

  const getShareUrl = async (url = "") => {

    await axios

      .get(url)

      .then(({ data }) => {

        if (!data.success) {

          dispatch(addNotification({ style: "danger", msg: data.data }));

          return;

        }

        setShareUrl(data.data);

      })

      .catch((err) => {

        onError(err);

        throw new Error(err);

      });

  };

  const copyClicked = async () => {

    try {

      await navigator.clipboard.writeText(shareUrl || "");

      setState("success");

    } catch (err) {

      onError && onError(err);

      setState("error");

    }

  };

  const getButtonText = (state) => {

    switch (state) {

      case "success":

        return "Link copied";

      case "pending":

      default:

        return "Copy link";

    }

  };

  useEffect(() => {

    getShareUrl(shareData.url);

  }, [shareData]);

  return (

    <div className={styles.share__popup} ref={popUp}>

      <div>{parse(shareData.title)}</div>

      <div>

        {state === "error" ? (

          <div>

            <p>

              Unable to copy to clipboard, please manually copy the url to

              share.

            </p>

          </div>

        ) : null}

        <input value={shareUrl} readOnly />

        <button className="btn btn-primary" onClick={copyClicked}>

          {getButtonText(state)}

        </button>

      </div>

    </div>

  );

};

export default SharePopup;