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 '@utils'

import { addFeed } from '@store/feed/feed.actions'

import { feedTypes } from '@store/feed/feed.types'

import { addNotification } from '@store/notification/notification.actions'

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

import {

  closeShareModal,

  openShareModal

} from '@store/share-modal/shareModal.actions'

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

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

import Ckeditor from '@components/UI/Ckeditor'

import DropzoneComponent from '@components/dropzone/DropzoneComponent'

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

import ConfirmModal from './ConfirmModal'

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 dispatch = useDispatch()

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

    useSelector((state) => state.shareModal)

  const {

    control,

    formState: { errors, isSubmitting },

    register,

    unregister,

    handleSubmit,

    setValue,

    reset,

    watch

  } = useForm({

    defaultValues:

      modalType !== shareModalTypes.POST && modalType !== shareModalTypes.SHARE

        ? {

            posted_or_shared: modalType === shareModalTypes.SHARE ? 's' : 'p',

            share_width: 'p',

            description: '',

            file: ''

          }

        : {

            posted_or_shared: modalType === shareModalTypes.SHARE ? 's' : 'p',

            share_width: 'p',

            description: ''

          }

  })

  const watchedDescription = watch('description')

  const watchedFile = watch('file')

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

  const handleModalAccept = () => {

    setShowConfirmModal(false)

    reset()

    dispatch(openShareModal(postUrl, modalType, feedType))

  }

  const handleModalCancel = () => {

    setShowConfirmModal(false)

    setModalType(lastModalType)

    dispatch(closeShareModal())

    dispatch(openShareModal(postUrl, lastModalType, feedType))

  }

  const onUploadedHandler = (files) => {

    setValue('file', files)

  }

  const onClose = () => {

    dispatch(closeShareModal())

  }

  const onSubmit = async (feed) => {

    try {

      const form = new FormData()

      Object.entries(feed).forEach(([key, value]) => form.append(key, value))

      const response = await axios.post(postUrl, form)

      const { data, success } = response.data

      if (!success) {

        const errorMessage =

          typeof data === 'string'

            ? data

            : 'Ha ocurrido un error al publicar, inténtalo de nuevo más tarde.'

        throw new Error(errorMessage)

      }

      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: error.message }))

    }

  }

  useEffect(() => {

    console.log(watchedFile)

    if ((watchedFile || watchedDescription) && modalType !== lastModalType) {

      onClose()

      toggleConfirmModal()

    }

    if (watchedFile !== undefined) {

      register('file', { required: 'El archivo es requerido' })

    } else {

      unregister('file')

    }

  }, [modalType])

  return (

    <>

      <Modal

        show={isOpen}

        title={labels.share_a_post}

        labelAccept={labels.send}

        labelReject={labels.cancel}

        loading={isSubmitting}

        onAccept={handleSubmit(onSubmit)}

        onClose={onClose}

      >

        {feedType === feedTypes.DASHBOARD && (

          <Select

            name='shared_with'

            defaultValue='p'

            control={control}

            options={[

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

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

            ]}

          />

        )}

        <Ckeditor

          name='description'

          control={control}

          rules={{ required: 'La descripción es requerida' }}

          error={errors.description?.message}

        />

        {![shareModalTypes.POST, shareModalTypes.SHARE].includes(modalType) && (

          <DropzoneComponent

            modalType={modalType}

            onUploaded={onUploadedHandler}

            settedFile={watch('file')}

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

          />

        )}

        {errors.file && (

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

        )}

      </Modal>

      <ConfirmModal

        show={showConfirmModal}

        onClose={handleModalCancel}

        onAccept={handleModalAccept}

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

      />

    </>

  )

}

export default ShareModal