Proyectos de Subversion LeadersLinked - SPA

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

import { axios } from 'utils/index'
import { addNotification } from '../../../../redux/notification/notification.actions'

import Modal from 'components/UI/modal/Modal'
import TextInput from 'components/UI/inputs/TextInput'
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
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) {
          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 'URL Copiada al portapapeles'
      case 'pending':
      default:
        return 'Copiar URL'
    }
  }

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

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

      <TextInput type='text' value={shareUrl} readOnly />

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

export default SharePopup