Proyectos de Subversion LeadersLinked - Antes de SPA

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

import { axios } from '../../../utils'

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

import { connect } from 'react-redux'

import { updateFeed } from '../../../redux/feed/feed.actions'

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

import LockClockIcon from '@mui/icons-material/LockClock'

import PublicIcon from '@mui/icons-material/Public'

import styles from './survey.module.scss'

const SurveyForm = ({

  question,

  answers = [],

  active,

  time,

  resultType,

  voteUrl,

  addNotification, // Redux action

  updateFeed, // Redux action

}) => {

  const [remainingTime, setRemainingTime] = useState({

    days: 0,

    hours: 0,

    minutes: 0,

  })

  const [isActive, setIsActive] = useState(Boolean(active))

  const { register, handleSubmit } = useForm()

  const sendVote = handleSubmit(({ vote }) => {

    setIsActive(false)

    const formData = new FormData()

    formData.append('vote', vote)

    axios

      .post(voteUrl, formData)

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

        const { success, data } = response

        if (!success) {

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

          setIsActive(true)

        }

        updateFeed({ feed: data, uuid: data.feed_uuid })

      })

      .catch((err) => {

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

        setIsActive(true)

        throw new Error(err)

      })

  })

  function getTimeDiff(segundos) {

    // Obtener la fecha y hora actual

    const currentDate = new Date()

    // Calcular la fecha y hora futura sumando los segundos proporcionados

    const futureDate = new Date(currentDate.getTime() + segundos * 1000)

    // Calcular la diferencia entre la fecha futura y la fecha actual

    const diff = futureDate - currentDate

    // Calcular los componentes de la diferencia de tiempo

    const days = Math.floor(diff / (1000 * 60 * 60 * 24))

    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))

    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))

    // Devolver el resultado

    return { days, hours, minutes }

  }

  useEffect(() => {

    setRemainingTime(getTimeDiff(time))

  }, [])

  useEffect(() => {

    let interval

    interval = setInterval(() => {

      setRemainingTime(getTimeDiff(time - 60))

    }, 1000)

    interval()

  }, [remainingTime])

  return (

    <form onChange={sendVote} className={styles.survey_form}>

      <h3>{question}</h3>

      {resultType === 'pu' && (

        <span>

          <PublicIcon /> El autor puede ver tu voto

        </span>

      )}

      {resultType === 'pr' && (

        <span>

          <LockClockIcon /> Tu voto es privado

        </span>

      )}

      {answers.map(

        (option, index) =>

          option && (

            <div

              className={

                isActive

                  ? styles.survey_input

                  : styles.survey_input + ' ' + styles.disabled

              }

              key={index}

            >

              <input

                type="radio"

                name="vote"

                id={`vote-${index + 1}`}

                disabled={!isActive}

                ref={register({ required: true })}

                value={index + 1}

              />

              <label htmlFor={`vote-${index + 1}`}>{option}</label>

            </div>

          )

      )}

      <span>

        Tiempo restante:{' '}

        {Boolean(remainingTime.days) && remainingTime.days + ':'}

        {Boolean(remainingTime.hours) && remainingTime.hours + ':'}

        {Boolean(remainingTime.minutes) && remainingTime.minutes}

      </span>

    </form>

  )

}

const mapDispatchToProps = {

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

  updateFeed: (payload) => updateFeed(payload),

}

export default connect(null, mapDispatchToProps)(SurveyForm)