Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, 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 timeRef = useRef(time)
  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(() => {
    const interval = setInterval(() => {
      timeRef.current = timeRef.current - 60
      setRemainingTime(() => getTimeDiff(timeRef.current))
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  }, [])

  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)