Proyectos de Subversion LeadersLinked - SPA

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

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

import { useDispatch, useSelector } from 'react-redux'

import { axios } from '@app/utils'

import { feedTypes } from '@app/redux/feed/feed.types'

import {

  closeShareModal,

  openShareModal

} from '@app/redux/share-modal/shareModal.actions'

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

import { addFeed } from '@app/redux/feed/feed.actions'

import { shareModalTypes } from '@app/redux/share-modal/shareModal.types'

import Ckeditor from '@components/UI/Ckeditor'

import FormErrorFeedback from '@components/UI/form/FormErrorFeedback'

import Modal from '@components/UI/modal/Modal'

import DropzoneComponent from '@components/dropzone/DropzoneComponent'

import ConfirmModal from './ConfirmModal'

import Select from '@components/UI/inputs/Select'

import Form from '@components/common/form'

const recomendationText = {

  [shareModalTypes.IMAGE]: 'Tamaño recomendado: 720x720',

  [shareModalTypes.FILE]: 'solo documentos PDF',

  [shareModalTypes.VIDEO]: 'Video de extensión mp4, mpeg, webm, mov'

}

const ShareModal = ({ setModalType }) => {

  const [showConfirmModal, setShowConfirmModal] = useState(false)

  const labels = useSelector(({ intl }) => intl.labels)

  const { isOpen, postUrl, modalType, lastModalType, feedType, feedSharedId } =

    useSelector((state) => state.shareModal)

  const dispatch = useDispatch()

  const {

    control,

    formState: { errors, isLoading },

    register,

    unregister,

    handleSubmit,

    setValue,

    getValues,

    clearErrors,

    setError,

    watch

  } = useForm({

    defaultValues: {

      description: '',

      share_width: 'p'

    }

  })

  const watchedDescription = watch('description')

  const toggleConfirmModal = () => setShowConfirmModal(!showConfirmModal)

  const handleModalAccept = () => {

    setShowConfirmModal(false)

    setValue('description', '')

    setValue('file', '')

    clearErrors()

    dispatch(openShareModal(postUrl, modalType, feedType))

  }

  const handleModalCancel = () => {

    setShowConfirmModal(false)

    setModalType(lastModalType)

    dispatch(closeShareModal())

    dispatch(openShareModal(postUrl, lastModalType, feedType))

  }

  const onSubmit = handleSubmit((data) => {

    const currentFormData = new FormData()

    Object.entries(data).forEach(([key, value]) =>

      currentFormData.append(key, value)

    )

    axios

      .post(postUrl, currentFormData)

      .then((response) => {

        const { data, success } = response.data

        if (!success && typeof data !== 'string') {

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

            setError(key, { type: 'required', message: value[0] })

          )

          return

        }

        if (!success && typeof data === 'string') {

          throw new Error(data)

        }

        const newFeed = data

        dispatch(

          addNotification({

            style: 'success',

            msg: 'La publicación ha sido compartida'

          })

        )

        onClose()

        if (feedSharedId) {

          dispatch(addFeed(newFeed, feedSharedId))

        } else {

          dispatch(addFeed(newFeed))

        }

        setValue('description', '')

        setValue('file', '')

      })

      .catch((error) => {

        console.error(error)

        dispatch(

          addNotification({

            style: 'danger',

            msg: 'Ha ocurrido un error al publicar, intente más tarde.'

          })

        )

      })

  })

  const onUploadedHandler = (files) => {

    setValue('file', files)

    clearErrors('file')

  }

  const onClose = () => {

    clearErrors()

    dispatch(closeShareModal())

  }

  useEffect(() => {

    const postedOrShared = modalType === shareModalTypes.SHARE ? 's' : 'p'

    register('posted_or_shared')

    setValue('posted_or_shared', postedOrShared)

    if (

      modalType !== shareModalTypes.POST &&

      modalType !== shareModalTypes.SHARE

    ) {

      register('file', {

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

      })

    } else {

      if (!getValues('file')) unregister('file')

    }

    if (getValues('file') || getValues('description')) {

      if (modalType !== lastModalType) {

        onClose()

        toggleConfirmModal()

      }

    }

  }, [modalType])

  useEffect(() => {

    if (isOpen) {

      register('description', { required: 'El campo es requerido' })

    }

  }, [isOpen])

  return (

    <>

      <Modal

        show={isOpen}

        title={labels.share_a_post}

        labelAccept={labels.send}

        labelReject={labels.cancel}

        onClose={onClose}

        loading={isLoading}

        formId='share-form'

      >

        <Form onSubmit={onSubmit} id='share-form'>

          {feedType === feedTypes.DASHBOARD ? (

            <Select

              name='shared_with'

              defaultValue='p'

              control={control}

              options={[

                { name: labels.public, value: 'p' },

                { name: labels.connections, value: 'c' }

              ]}

            />

          ) : null}

          <Ckeditor

            defaultValue={watchedDescription}

            onChange={(value) => setValue('description', value)}

          />

          {errors.description && (

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

          )}

          {![shareModalTypes.POST, shareModalTypes.SHARE].includes(

            modalType

          ) ? (

            <DropzoneComponent

              modalType={modalType}

              onUploaded={onUploadedHandler}

              settedFile={watch('file')}

              recomendationText={recomendationText[modalType] ?? ''}

            />

          ) : null}

          {errors.file && (

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

          )}

        </Form>

      </Modal>

      <ConfirmModal

        show={showConfirmModal}

        onClose={handleModalCancel}

        onAccept={handleModalAccept}

        message='¿No se ha compartido tu publicación , desea descartarlo?'

      />

    </>

  )

}

export default ShareModal