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 'react-datetime/css/react-datetime.css'

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,
    unregister,
    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))

    if (modalType === shareModalTypes.SURVEY) {
      for (let i = 1; i <= 5; i++) {
        !data[`answer${i}`] && formData.append(`answer${i}`, '')
      }

      const numberOfAnswers = Object.entries(data).filter((entry) =>
        entry[0].includes('answer')
      ).length

      formData.append('feed_content_type', 'fast-survey')
      formData.append('number_of_answers', numberOfAnswers)
    }

    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 (
      [
        shareModalTypes.IMAGE,
        shareModalTypes.VIDEO,
        shareModalTypes.FILE,
        shareModalTypes.SHARE,
        shareModalTypes.CHAT
      ].includes(modalType)
    ) {
      register('description', { required: 'El campo es requerido' })
    }

    if (modalType === shareModalTypes.SURVEY) {
      unregister('description')
      register('duration_days')
      register('duration_hours')
      register('duration_minutes')
    }
  }, [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>
        </Modal.Footer>
      </form>
    </Modal>
  )
}

const SurveyForm = ({ register, setValue }) => {
  const [selectedDate, setSelectedDate] = useState(null)
  const [daysDifference, setDaysDifference] = useState({
    days: null,
    hours: null,
    minutes: null
  })
  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 calculateMaxDate = () => {
    const today = new Date()
    const maxDate = today.setDate(today.getDate() + 29)
    return new Date(maxDate)
  }

  const calculateMinDate = () => {
    return new Date()
  }

  const handleChange = (selected) => {
    setSelectedDate(selected)

    if (selected) {
      const currentDate = new Date()
      const selectedDt = new Date(selected.format('YYYY-MM-DD HH:mm'))
      const timeDiff = selectedDt.getTime() - currentDate.getTime()
      const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
      const hoursDiff = Math.floor((timeDiff / (1000 * 60 * 60)) % 24)
      const minutesDiff = Math.floor((timeDiff / (1000 * 60)) % 60)

      setDaysDifference({
        days: daysDiff,
        hours: hoursDiff,
        minutes: minutesDiff
      })
    } else {
      setDaysDifference(null)
    }
  }

  const addOption = () => {
    setOptionsNumber(optionsNumber + 1)
  }

  const removeOption = () => {
    setOptionsNumber(optionsNumber - 1)
  }

  useEffect(() => {
    setValue('duration_days', daysDifference.days)
    setValue('duration_hours', daysDifference.hours)
    setValue('duration_minutes', daysDifference.minutes)
  }, [daysDifference])

  return (
    <>
      <div className="form-row">
        <div className="form-group col">
          <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 col">
          <label htmlFor="result_type">Resultado</label>
          <select
            className="form-control"
            name="result_type"
            id="result_type"
            ref={register}
          >
            <option value="pr">Privado</option>
            <option value="pu">Público</option>
          </select>
        </div>
      </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={1024}
          id="question"
          name="question"
          ref={register({ required: true })}
        />
      </div>
      {options.slice(0, optionsNumber).map((option, index) => (
        <div className="form-group" key={index}>
          <label htmlFor={`answer${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={100}
            id={`answer${index + 1}`}
            name={`answer${index + 1}`}
            ref={register({ required: true })}
          />
        </div>
      ))}
      {optionsNumber < options.length && (
        <button className="btn btn-outline-primary rounded" onClick={addOption}>
          Añadir opción
        </button>
      )}
      <div className="form-group">
        <label htmlFor="question">Duración</label>
        <Datetime
          dateFormat="DD/MM/YYYY"
          onChange={handleChange}
          isValidDate={(current) =>
            current.isBefore(calculateMaxDate()) &&
            current.isAfter(calculateMinDate())
          } // Se valida que la fecha esté entre la fecha mínima y la fecha máxima
          value={selectedDate}
        />
      </div>
    </>
  )
}

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)