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";
   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: '';
+    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);
     text-shadow: 0 0 1px var(--font-color);
+  }
   ${(props) =>
     props.disabled &&
     css`
       background-color: #9992;
       cursor: auto;
       &: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,
   resultType,
   voteUrl,
   addNotification, // 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();
-  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
       .post(voteUrl, formData)
       .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(() => {
+          )
       )}
       <span>Tiempo restante: {remainingTime}</span>
       {!isActive && <VoteTag>Tu voto ya fue emitido</VoteTag>}
     </form>
-  )
+  );
-}
+};
 const mapDispatchToProps = {
   addNotification: (notification) => addNotification(notification),
   updateFeed: (payload) => updateFeed(payload),
-}
+};

Proyectos de Subversion LeadersLinked - SPA

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