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