Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useState, useEffect } from 'react'

import { axios } from '../../utils'

import { useForm } from 'react-hook-form'

import { useDispatch } from 'react-redux'

import { Button, Modal } from 'react-bootstrap'

import { addNotification } from '../../redux/notification/notification.actions'

import { coverTypes } from './cover.types'

import Spinner from '../loading-spinner/Spinner'

import DropzoneComponent from '../dropzone/DropzoneComponent'

import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'

const CoverModal = ({ isOpen, type, size, id, onClose, onComplete }) => {

  const {

    register,

    errors,

    handleSubmit,

    setValue,

    clearErrors,

    setError,

    getValues,

  } = useForm()

  const [loading, setLoading] = useState(false)

  const dispatch = useDispatch()

  const postPath = {

    [coverTypes.USER]: `/profile/my-profiles/cover/${id}/operation/upload`,

    [coverTypes.COMPANY]: `/my-company/${id}/profile/cover/upload`,

    [coverTypes.GROUP]: `/group/my-groups/cover/${id}/operation/upload`,

  }

  const onUploadedHandler = (files) => {

    setValue('cover', files)

    clearErrors('cover')

  }

  const onSubmitHandler = async (data) => {

    setLoading(true)

    const formData = new FormData()

    Object.entries(data).map(([key, value]) => formData.append(key, value))

    await axios.post(postPath[type], formData).then((response) => {

      const resData = response.data

      if (resData.success) {

        setLoading(false)

        onComplete(resData.data)

        setValue('cover', '')

        onClose()

      } else {

        const resError = resData.data

        if (resError.constructor.name === 'Object') {

          Object.entries(resError).map(([key, value]) => {

            if (key in getValues()) {

              setError(key, {

                type: 'manual',

                message: Array.isArray(value) ? value[0] : value,

              })

            }

          })

        } else {

          dispatch(addNotification({ style: 'danger', msg: resError }))

        }

      }

    })

    setLoading(false)

  }

  useEffect(() => {

    register('cover', {

      required: { value: 'true', message: 'El campo es requerido' },

    })

  }, [])

  return (

    <Modal show={isOpen} onHide={onClose}>

      <form onSubmit={handleSubmit(onSubmitHandler)}>

        <Modal.Header closeButton>

          <Modal.Title>Portada</Modal.Title>

        </Modal.Header>

        <Modal.Body>

          {loading && <Spinner />}

          <DropzoneComponent

            modalType="IMAGE"

            onUploaded={onUploadedHandler}

            recomendationText={`Imágenes recomendadas de ${size}`}

          />

          {errors.cover && (

            <FormErrorFeedback>{errors.cover.message}</FormErrorFeedback>

          )}

        </Modal.Body>

        <Modal.Footer>

          <Button size="sm" type="submit">

            Enviar

          </Button>

          <Button size="sm" variant="danger" onClick={onClose}>

            Cancelar

          </Button>

        </Modal.Footer>

      </form>

    </Modal>

  )

}

export default CoverModal