Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';

import { axios } from '@app/utils';
import { addNotification } from '@app/redux/notification/notification.actions';

import Modal from '@app/components/UI/modal/Modal';
import Input from '@app/components/UI/inputs/Input';
import Button from '@app/components/UI/buttons/Buttons';

const SharePopup = ({ shareData, onClose, onError, show }) => {
  const [shareUrl, setShareUrl] = useState('');
  const [state, setState] = useState('pending');
  const dispatch = useDispatch();

  const getShareUrl = (url = '') => {
    axios
      .get(url)
      .then(({ data }) => {
        if (!data.success) {
          throw new Error(data.data);
        }

        setShareUrl(data.data);
      })
      .catch((error) => {
        onError(error);
        dispatch(addNotification({ style: 'danger', msg: error.message }));
      });
  };

  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 'URL Copiada al portapapeles';
      case 'pending':
      default:
        return 'Copiar URL';
    }
  };

  useEffect(() => {
    if (show) {
      getShareUrl(shareData?.url);
    }
  }, [shareData, show]);

  return (
    <Modal show={show} onClose={onClose}>
      <Input
        value={shareUrl}
        readOnly
        error={
          state === 'error'
            ? 'No se pudo copiar al portapapeles, por favor copia la url manualmente para compartir.'
            : null
        }
      />

      <Button color='primary' onClick={copyClicked}>
        {getButtonText(state)}
      </Button>
    </Modal>
  );
};

export default SharePopup;