Proyectos de Subversion LeadersLinked - Backend

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

import axios from 'axios'

import { Modal } from 'react-bootstrap'

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

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

import {

  closeShareModal,

  setModalType

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

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

import DropzoneComponent from './Dropzone/DropzoneComponent'

import { addFeed, fetchFeeds } from '../redux/feed/feed.actions'

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

import Spinner from './Spinner'

import { CKEditor } from 'ckeditor4-react'

import { config } from './helpers/ckeditor_config'

const ShareModal = () => {

  const {

    register,

    unregister,

    errors,

    handleSubmit,

    setValue,

    getValues,

    clearErrors,

    reset

  } = useForm()

  const [loading, setLoading] = useState(false)

  const { postUrl, isOpen, modalType } = useSelector(

    ({ shareModal }) => shareModal

  )

  const { currentPage, timelineUrl, feedSharedId } = useSelector(

    ({ feed }) => feed

  )

  const dispatch = useDispatch()

  const recomendationText = {

    IMAGE: 'Tamaño recomendado: 720x720',

    FILE: 'solo documentos PDF',

    VIDEO: 'Video de extensión mp4, mpeg, webm'

  }

  const closeModal = () => {

    dispatch(closeShareModal())

  }

  const onUploadedHandler = (files) => {

    setValue('file', files)

    clearErrors('file')

  }

  const onSubmit = (data) => {

    console.log(data)

    setLoading(true)

    const currentFormData = new FormData()

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

      currentFormData.append(entry, value)

    )

    axios

      .post(postUrl, currentFormData)

      .then(({ data }) => {

        const newFeed = data.data

        if (!data.success) {

          typeof data.data === 'string'

            ? dispatch(

                addNotification({

                  style: 'danger',

                  msg: data.data

                })

              )

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

                value.map((err) =>

                  dispatch(

                    addNotification({

                      style: 'danger',

                      msg: `${key}: ${err}`

                    })

                  )

                )

              )

          return

        }

        reset()

        clearErrors()

        dispatch(

          addNotification({

            style: 'success',

            msg: 'La publicación ha sido compartida'

          })

        )

        if (currentPage && timelineUrl)

          dispatch(fetchFeeds(timelineUrl, currentPage))

        if (feedSharedId) return dispatch(addFeed(newFeed, feedSharedId))

        return dispatch(addFeed(newFeed))

      })

      .catch((err) =>

        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))

      )

      .finally(() => {

        setLoading(false)

        closeModal()

      })

  }

  useEffect(() => {

    clearErrors()

  }, [isOpen])

  useEffect(() => {

    register('posted_or_shared')

    setValue('posted_or_shared', shareModalTypes.POST)

    if (

      [

        shareModalTypes.IMAGE,

        shareModalTypes.VIDEO,

        shareModalTypes.FILE,

        shareModalTypes.SHARE,

        shareModalTypes.CHAT

      ]

    ) {

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

    }

    if (modalType === shareModalTypes.POST) {

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

    }

  }, [modalType])

  return (

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

      <Modal.Header closeButton>

        <Modal.Title>Compartir una publicación</Modal.Title>

      </Modal.Header>

      <Modal.Body>

        <form onSubmit={handleSubmit(onSubmit)}>

          {!loading ? (

            <>

              {modalType === shareModalTypes.SURVEY && (

                <SurveyForm register={register} />

              )}

              {modalType !== shareModalTypes.SURVEY && (

                <>

                  <CKEditor

                    onChange={(e) =>

                      setValue('description', e.editor.getData())

                    }

                    config={config}

                  />

                  {errors.description && <p>{errors.description.message}</p>}

                </>

              )}

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

                modalType

              ) && (

                <>

                  <DropzoneComponent

                    modalType={modalType}

                    onUploaded={onUploadedHandler}

                    settedFile={getValues('file')}

                    recomendationText={recomendationText[modalType]}

                  />

                  {errors.file && <p>{errors.file.message}</p>}

                </>

              )}

            </>

          ) : (

            <Spinner />

          )}

          <div className="d-inline-flex mt-3 gap-3">

            <button

              className="btn btn-sm btn-primary"

              disabled={loading}

              type="submit"

            >

              Enviar

            </button>

            <button

              type="button"

              className="btn btn-sm btn-tertiary"

              disabled={loading}

              onClick={closeModal}

            >

              Cancelar

            </button>

            <button

              type="button"

              className="btn btn-sm"

              disabled={loading}

              onClick={() => dispatch(setModalType(shareModalTypes.SURVEY))}

            >

              Añadir encuesta

            </button>

          </div>

        </form>

      </Modal.Body>

    </Modal>

  )

}

const SurveyForm = ({ register }) => {

  const [optionsNumber, setOptionsNumber] = useState(2)

  const options = [

    { placeholder: 'Por ejemplo: transporte público' },

    { placeholder: 'Por ejemplo: coche propio' },

    { placeholder: 'Por ejemplo: coche compartido' },

    { placeholder: 'Por ejemplo: bicicleta' },

    { placeholder: 'Por ejemplo: otro' }

  ]

  const addOption = () => {

    setOptionsNumber(optionsNumber + 1)

  }

  const removeOption = () => {

    setOptionsNumber(optionsNumber - 1)

  }

  return (

    <>

      <div className="form-group">

        <label htmlFor="question">Tu pregunta*</label>

        <input

          type="text"

          className="form-control"

          placeholder="Por ejemplo: ¿cómo te desplazas al trabajo?"

          maxLength={140}

          id="question"

          name="question"

          ref={register({ required: true })}

        />

      </div>

      {options.slice(0, optionsNumber).map((option, index) => (

        <div className="form-group" key={index}>

          <label htmlFor={`option-${index + 1}`}>Opción {index + 1}*</label>

          {index > 1 && (

            <button className="btn" onClick={removeOption}>

              Eliminar

            </button>

          )}

          <input

            type="text"

            className="form-control"

            placeholder={option.placeholder}

            maxLength={30}

            id={`option-${index + 1}`}

            name={`option-${index + 1}`}

            ref={register({ required: true })}

          />

        </div>

      ))}

      {optionsNumber < options.length && (

        <button className="btn btn-outline-primary rounded" onClick={addOption}>

          Añadir opción

        </button>

      )}

    </>

  )

}

export default ShareModal