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

      {parse(shareData.title)}

      {state === "error" ? (

        <p className={styles.copy__error}>

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

        </p>

      ) : null}

      <input value={shareUrl} readOnly />

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

        {getButtonText(state)}

      </button>

    </div>

  );

};

export default SharePopup;