WebSVN – LeadersLinked - SPA – Diff – /app/components/survey-form/SurveyForm.jsx

-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from 'react'
-import { axios } from "../../utils";
+import { axios } from '../../utils'
-import { useForm } from "react-hook-form";
+import { useForm } from 'react-hook-form'
-import { connect } from "react-redux";
+import { connect } from 'react-redux'
-import { updateFeed } from "../../redux/feed/feed.actions";
+import { updateFeed } from '../../redux/feed/feed.actions'
-import { addNotification } from "../../redux/notification/notification.actions";
+import { addNotification } from '../../redux/notification/notification.actions'
-import LockClockIcon from "@mui/icons-material/LockClock";
+import LockClockIcon from '@mui/icons-material/LockClock'
-import PublicIcon from "@mui/icons-material/Public";
+import PublicIcon from '@mui/icons-material/Public'
-import styles from "./survey.module.scss";
+import styles from './survey.module.scss'
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components'
   label {
     color: var(--font-color);
     font-weight: 500;
+  }
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
-    width: ${(props) => (props.porcentage ? `${props.porcentage}%` : "0%")};
+    width: ${(props) => (props.porcentage ? `${props.porcentage}%` : '0%')};
     background-color: #0002;
     z-index: 4;
+  }
   &:hover {
     border-color: var(--font-color);
       &: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
+  updateFeed // Redux action
 }) => {
-  const [remainingTime, setRemainingTime] = useState("00:00:00");
+  const [remainingTime, setRemainingTime] = useState('00:00:00')
-  const [isActive, setIsActive] = useState();
+  const [isActive, setIsActive] = useState(true)
-  const [totalVotes, setTotalVotes] = useState(0);
+  const [totalVotes, setTotalVotes] = useState(0)
-  const timeRef = useRef(time);
+  const timeRef = useRef(time)
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit } = useForm()
   const sendVote = handleSubmit(({ vote }) => {
-    setIsActive(false);
+    setIsActive(false)
     const formData = new FormData();
     const formData = new FormData()
-    formData.append("vote", vote);
+    formData.append('vote', vote)
     axios
-    axios
+      .post(voteUrl, formData)
-      .post(voteUrl, formData)
+      .then(({ data: response }) => {
-      .then(({ data: response }) => {
+        const { success, data } = response
-        const { success, data } = response;
         if (!success) {
-          addNotification({ style: "danger", msg: `Error: ${data}` });
+          addNotification({ style: 'danger', msg: `Error: ${data}` })
-          setIsActive(true);
+          setIsActive(true)
         }
-        updateFeed({ feed: data, uuid: data.feed_uuid });
+        updateFeed({ feed: data, uuid: data.feed_uuid })
-        addNotification({ style: "success", msg: "Voto emitido con exito" });
+        addNotification({ style: 'success', msg: 'Voto emitido con exito' })
       })
       .catch((err) => {
-        addNotification({ style: "danger", msg: `Error: ${err}` });
+        addNotification({ style: 'danger', msg: `Error: ${err}` })
-        setIsActive(true);
+        setIsActive(true)
-        throw new Error(err);
+        throw new Error(err)
-      });
+      })
-  });
+  })
   function getTimeDiff(segundos) {
     // Obtener la fecha y hora actual
-    const currentDate = new Date();
+    const currentDate = new Date()
     // Calcular la fecha y hora futura sumando los segundos proporcionados
-    const futureDate = new Date(currentDate.getTime() + segundos * 1000);
+    const futureDate = new Date(currentDate.getTime() + segundos * 1000)
     // Calcular la diferencia entre la fecha futura y la fecha actual
-    const diff = futureDate - currentDate;
+    const diff = futureDate - currentDate
     // Calcular los componentes de la diferencia de tiempo
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
     // Devolver el resultado
-    return `${addZero(days)}d ${addZero(hours)}h ${addZero(minutes)}m`;
+    return `${addZero(days)}d ${addZero(hours)}h ${addZero(minutes)}m`
+  }
   function addZero(unit) {
-    return String(unit).padStart(2, "0");
+    return String(unit).padStart(2, '0')
+  }
   function getPorcentage(n, total) {
-    return (n / total) * 100;
+    return (n / total) * 100
   }
   useEffect(() => {
-    setRemainingTime(getTimeDiff(time));
+    setRemainingTime(getTimeDiff(time))
-    if (!time) return;
+    if (!time) return
     const interval = setInterval(() => {
       if (!timeRef.current) {
-        setRemainingTime(() => getTimeDiff(0));
+        setRemainingTime(() => getTimeDiff(0))
-        setIsActive(false);
+        setIsActive(false)
-        return;
+        return
       }
       if (!timeRef.current <= 60) {
-        timeRef.current -= 1;
+        timeRef.current -= 1
-        setRemainingTime(() => getTimeDiff(timeRef.current));
+        setRemainingTime(() => getTimeDiff(timeRef.current))
-        return;
+        return
+      }
-      timeRef.current -= 60;
+      timeRef.current -= 60
-      setRemainingTime(() => getTimeDiff(timeRef.current));
+      setRemainingTime(() => getTimeDiff(timeRef.current))
-    }, 60000);
+    }, 60000)
     return () => {
-      clearInterval(interval);
+      clearInterval(interval)
     };
-  }, []);
+  }, [])
   useEffect(() => {
-    if (!votes) return;
+    if (!votes) return
-    const total = votes.reduce((acum, current) => acum + Number(current), 0);
+    const total = votes.reduce((acum, current) => acum + Number(current), 0)
-    setTotalVotes(total);
+    setTotalVotes(total)
-  }, [votes]);
+  }, [votes])
   useEffect(() => {
-    active ?? setIsActive(Boolean(active));
+    setIsActive(Boolean(active))
                 !!totalVotes && getPorcentage(votes[index], totalVotes)
+              }
               key={index}
+            >
               <input
-                type="radio"
+                type='radio'
-                name="vote"
+                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">
+                <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),
+  updateFeed: (payload) => updateFeed(payload)
-};
+}

Proyectos de Subversion LeadersLinked - SPA

(root)/app/components/survey-form/SurveyForm.jsx – Rev 623 → 813