Proyectos de Subversion LeadersLinked - Backend

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

import axios from 'axios'

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

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

import { connect } from 'react-redux'

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

import { CKEditor } from 'ckeditor4-react'

import {

  closeShareModal,

  setModalType

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

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

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

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

import Spinner from './Spinner'

import DropzoneComponent from './Dropzone/DropzoneComponent'

const ShareModal = (props) => {

  const { addNotification, closeShareModal, setModalType, addFeed } = props // Redux actions

  const { postUrl, isOpen, modalType, currentPage, timelineUrl, feedSharedId } =

    props // Redux states

  const [loading, setLoading] = useState(false)

  const {

    register,

    errors,

    handleSubmit,

    setValue,

    getValues,

    clearErrors,

    reset

  } = useForm()

  const recomendationText = {

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

    FILE: 'solo documentos PDF',

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

  }

  const closeModal = () => {

    closeShareModal()

  }

  const onUploadedHandler = (files) => {

    setValue('file', files)

    clearErrors('file')

  }

  const onSubmit = handleSubmit((data) => {

    setLoading(true)

    const formData = new FormData()

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

    axios

      .post(postUrl, formData)

      .then(({ data: response }) => {

        const { success, data } = response

        if (!success) {

          typeof data !== 'string'

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

                addNotification({ style: 'danger', msg: `${key}: ${value[0]}` })

              )

            : addNotification({ style: 'danger', msg: data })

          return

        }

        if (currentPage && timelineUrl) {

          fetchFeeds(timelineUrl, currentPage)

        }

        if (feedSharedId) {

          addFeed(data, feedSharedId)

          return

        }

        addFeed(data)

        addNotification({

          style: 'success',

          msg: 'La publicación ha sido compartida'

        })

        reset()

        clearErrors()

        closeModal()

      })

      .catch((err) => {

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

        throw new Error(err)

      })

      .finally(() => setLoading(false))

  })

  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

      ].includes(modalType)

    ) {

      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={onSubmit} method="post">

          {!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 size="sm" type="submit" disabled={loading}>

              Enviar

            </Button>

            <Button

              size="sm"

              className="btn-secondary"

              disabled={loading}

              onClick={closeShareModal}

            >

              Cancelar

            </Button>

            <Button

              size="sm"

              className="btn-tertiary"

              disabled={loading}

              onClick={() => 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>

      )}

    </>

  )

}

const mapStateToProps = (state) => ({

  isOpen: state.shareModal.isOpen,

  postUrl: state.shareModal.postUrl,

  modalType: state.shareModal.modalType,

  feedSharedId: state.shareModal.feedSharedId,

  currentPage: state.feed.currentPage,

  timelineUrl: state.feed.timelineUrl

})

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

  closeShareModal: () => closeShareModal(),

  setModalType: (modalType) => setModalType(modalType),

  addFeed: (feed, feedSharedId) => addFeed(feed, feedSharedId)

}

export default connect(mapStateToProps, mapDispatchToProps)(ShareModal)