Proyectos de Subversion LeadersLinked - 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";

import styled, { css } from "styled-components";

const RadioButton = styled.div`

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.5rem 1rem;

  border: 2px solid var(--border-primary);

  border-radius: 50px;

  cursor: pointer;

  transition: all 200ms ease;

  position: relative;

  overflow: hidden;

  margin-bottom: 0.5rem;

  input {

    margin: 0 !important;

  }

  label {

    color: var(--font-color);

    font-weight: 500;

  }

  &::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: ${(props) => (props.porcentage ? `${props.porcentage}%` : "0%")};

    background-color: #0002;

    z-index: 4;

  }

  &:hover {

    border-color: var(--font-color);

    text-shadow: 0 0 1px var(--font-color);

  }

  ${(props) =>

    props.disabled &&

    css`

      background-color: #9992;

      cursor: auto;

      label {

        color: gray;

      }

      &:hover {

        border-color: var(--border-primary);

        text-shadow: none;

      }

    `}

`;

const VoteTag = styled.span`

  position: absolute;

  bottom: 1rem;

  right: 1rem;

  color: var(--font-color) !important;

  font-weight: 600;

`;

const SurveyForm = ({

  question,

  answers = [],

  votes,

  active = false,

  time,

  resultType,

  voteUrl,

  addNotification, // Redux action

  updateFeed, // Redux action

}) => {

  const [remainingTime, setRemainingTime] = useState("00:00:00");

  const [isActive, setIsActive] = useState();

  const [totalVotes, setTotalVotes] = useState(0);

  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 });

        addNotification({ style: "success", msg: "Voto emitido con exito" });

      })

      .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 `${addZero(days)}d ${addZero(hours)}h ${addZero(minutes)}m`;

  }

  function addZero(unit) {

    return String(unit).padStart(2, "0");

  }

  function getPorcentage(n, total) {

    return (n / total) * 100;

  }

  useEffect(() => {

    setRemainingTime(getTimeDiff(time));

    if (!time) return;

    const interval = setInterval(() => {

      if (!timeRef.current) {

        setRemainingTime(() => getTimeDiff(0));

        setIsActive(false);

        return;

      }

      if (!timeRef.current <= 60) {

        timeRef.current -= 1;

        setRemainingTime(() => getTimeDiff(timeRef.current));

        return;

      }

      timeRef.current -= 60;

      setRemainingTime(() => getTimeDiff(timeRef.current));

    }, 60000);

    return () => {

      clearInterval(interval);

    };

  }, []);

  useEffect(() => {

    if (!votes) return;

    const total = votes.reduce((acum, current) => acum + Number(current), 0);

    setTotalVotes(total);

  }, [votes]);

  useEffect(() => {

    active ?? setIsActive(Boolean(active));

  }, [active]);

  return (

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

      <h3>{question}</h3>

      {resultType === "pu" && (

        <span

          className="mb-2"

          title="El número de votos es visible para todos los usuarios"

        >

          <PublicIcon /> Público

        </span>

      )}

      {resultType === "pr" && (

        <span

          className="mb-2"

          title="Los resultados de la votación son privados"

        >

          <LockClockIcon /> Privado

        </span>

      )}

      {answers.map(

        (option, index) =>

          option && (

            <RadioButton

              disabled={!isActive}

              porcentage={

                !!totalVotes && getPorcentage(votes[index], totalVotes)

              }

              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>

              {!!totalVotes && (

                <span className="mb-0">

                  {getPorcentage(votes[index], totalVotes)}%

                </span>

              )}

            </RadioButton>

          )

      )}

      <span>Tiempo restante: {remainingTime}</span>

      {!isActive && <VoteTag>Tu voto ya fue emitido</VoteTag>}

    </form>

  );

};

const mapDispatchToProps = {

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

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

};

export default connect(null, mapDispatchToProps)(SurveyForm);