Proyectos de Subversion LeadersLinked - Backend

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

import axios from 'axios'

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

import { connect } from 'react-redux'

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

import Datetime from 'react-datetime'

import 'react-datetime/css/react-datetime.css'

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

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

import { closeSurveyModal } from '../../../redux/survey-modal/surveyModal.actions'

const SurveyModal = (props) => {

  const { addNotification, addFeed, closeSurveyModal } = props // Redux actions

  const { postUrl, isOpen, currentPage, timelineUrl, state } = props // Redux states

  const [loading, setLoading] = useState(false)

  const [selectedDate, setSelectedDate] = useState(null)

  const [optionsNumber, setOptionsNumber] = useState(2)

  const { register, handleSubmit, setValue, clearErrors, reset } = useForm()

  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) {

      return null

    }

    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)

    setValue('duration_days', daysDiff)

    setValue('duration_hours', hoursDiff)

    setValue('duration_minutes', minutesDiff)

  }

  const addOption = () => {

    setOptionsNumber(optionsNumber + 1)

  }

  const removeOption = () => {

    setOptionsNumber(optionsNumber - 1)

  }

  const closeModal = () => {

    closeSurveyModal()

  }

  const onSubmit = handleSubmit((data) => {

    setLoading(true)

    const formData = new FormData()

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

    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)

    formData.append('posted_or_shared', 'POST')

    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)

        }

        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('duration_days')

    register('duration_hours')

    register('duration_minutes')

  }, [])

  return (

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

      <form onSubmit={onSubmit} method="post">

        <Modal.Header closeButton>

          <Modal.Title>Encuesta rápida</Modal.Title>

        </Modal.Header>

        <Modal.Body>

          <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>

        </Modal.Body>

        <Modal.Footer>

          <Button size="sm" type="submit" disabled={loading}>

            Enviar

          </Button>

          <Button

            variant="light"

            size="sm"

            disabled={loading}

            onClick={closeModal}

          >

            Cancelar

          </Button>

        </Modal.Footer>

      </form>

    </Modal>

  )

}

const mapStateToProps = (state) => ({

  isOpen: state.surveyModal.isOpen,

  postUrl: state.surveyModal.postUrl,

  currentPage: state.feed.currentPage,

  timelineUrl: state.feed.timelineUrl,

  state: state

})

const mapDispatchToProps = {

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

  closeSurveyModal: () => closeSurveyModal(),

  addFeed: (feed) => addFeed(feed)

}

export default connect(mapStateToProps, mapDispatchToProps)(SurveyModal)