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 Datetime from 'react-datetime'

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))
    console.log(data)

    /* 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' })
    }

    if (modalType === shareModalTypes.SURVEY) {
      register('date', { required: 'El campo es requerido' })
    }
  }, [modalType])

  return (
    <Modal show={isOpen} onHide={closeModal}>
      <form onSubmit={onSubmit} method="post">
        <Modal.Header closeButton>
          <Modal.Title>Compartir una publicación</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {!loading ? (
            <>
              {modalType === shareModalTypes.SURVEY && (
                <SurveyForm register={register} setValue={setValue} />
              )}
              {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 />
          )}
        </Modal.Body>
        <Modal.Footer>
          <Button size="sm" type="submit" disabled={loading}>
            Enviar
          </Button>
          <Button
            variant="light"
            size="sm"
            disabled={loading}
            onClick={closeShareModal}
          >
            Cancelar
          </Button>
          <Button
            variant="outline-info"
            size="sm"
            disabled={loading}
            onClick={() => setModalType(shareModalTypes.SURVEY)}
          >
            Añadir encuesta
          </Button>
        </Modal.Footer>
      </form>
    </Modal>
  )
}

const SurveyForm = ({ register, setValue }) => {
  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="privacy">Privacidad</label>
        <select
          className="form-control"
          name="privacy"
          id="privacy"
          ref={register}
        >
          <option value="c">Compañía</option>
          <option value="p">Público</option>
        </select>
      </div>
      <div className="form-group">
        <label htmlFor="result">Resultado</label>
        <select
          className="form-control"
          name="result"
          id="result"
          ref={register}
        >
          <option value="pr">Privado</option>
          <option value="pu">Público</option>
        </select>
      </div>
      <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>
      )}
      <Datetime
        onChange={(e) => {
          const date = e.toDate()
          setValue('date', date)
        }}
      />
    </>
  )
}

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)