Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2969 | Rev 3013 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2969 Rev 2970
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useEffect, useMemo, useRef, useState } from 'react'
2 
import { useForm } from 'react-hook-form'
 2 
import { useForm } from 'react-hook-form'
- 
 
 3 
import { styled } from '@mui/material'
- 
 
 4 
import { Public, LockClock } from '@mui/icons-material'
Línea 3... Línea -...
3 
 
 - 
 
4 
import styles from './survey.module.scss'
 5 
 
5 
import { axios } from '@utils'
 - 
 
6 
import { addNotification } from '@store/notification/notification.actions'
 - 
 
7 
import { Public, LockClock } from '@mui/icons-material'
 - 
 
8 
import { styled } from '@mui/material'
 - 
 
9 
import { css } from '@emotion/react'
 6 
import { axios } from '@utils'
- 
 
 7 
import { updateFeed } from '@store/feed/feed.actions'
- 
 
 8 
import { addNotification } from '@store/notification/notification.actions'
- 
 
 9 
 
Línea 10... Línea 10...
10 
import { updateFeed } from '@store/feed/feed.actions'
 10 
import styles from './survey.module.scss'
11 
 
 11 
 
12 
const RadioButton = styled('div')`
 12 
const RadioButton = styled('div')`
13 
  display: flex;
 13 
  display: flex;
Línea 40... Línea 40...
40 
  }
 40 
  }
41 
  &:hover {
 41 
  &:hover {
42 
    border-color: var(--font-color);
 42 
    border-color: var(--font-color);
43 
    text-shadow: 0 0 1px var(--font-color);
 43 
    text-shadow: 0 0 1px var(--font-color);
44 
  }
 44 
  }
45 
  ${(props) =>
 - 
 
46 
    props.disabled &&
 - 
 
47 
    css`
 - 
 
48 
      background-color: #9992;
 - 
 
49 
      cursor: auto;
 - 
 
50 
 
 - 
 
51 
      label {
 - 
 
52 
        color: gray;
 - 
 
53 
      }
 - 
 
54 
 
 - 
 
55 
      &:hover {
 - 
 
56 
        border-color: var(--border-primary);
 - 
 
57 
        text-shadow: none;
 - 
 
58 
      }
 - 
 
59 
    `}
 - 
 
60 
`
 45 
`
Línea 61... Línea 46...
61 
 
 46 
 
62 
const VoteTag = styled('span')`
 47 
const VoteTag = styled('span')`
63 
  position: absolute;
 48 
  position: absolute;
64 
  bottom: 1rem;
 49 
  bottom: 1rem;
65 
  right: 1rem;
 50 
  right: 1rem;
66 
  color: var(--font-color) !important;
 51 
  color: var(--font-color) !important;
67 
  font-weight: 600;
 52 
  font-weight: 600;
Línea 68... Línea 53...
68 
`
 53 
`
69 
 
 - 
 
70 
const SurveyForm = (props) => {
 54 
 
71 
  const {
 55 
const SurveyForm = ({
72 
    active = false,
 56 
  active = 0,
73 
    question,
 57 
  question = '¿Cómo consideras el ambiente laboral?',
74 
    answers = [],
 58 
  answers = ['Excelente', 'Regular', null, null, null],
- 
 
 59 
  votes = [null, null, null, null, null],
75 
    votes,
 60 
  time = 0,
76 
    time,
 - 
 
77 
    resultType,
 61 
  voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',
78 
    voteUrl
 - 
 
79 
  } = props
 - 
 
80 
 
 - 
 
81 
  console.log(props)
 62 
  resultType
82 
 
 63 
}) => {
83 
  const [remainingTime, setRemainingTime] = useState('00:00:00')
 - 
 
84 
  const [isActive, setIsActive] = useState(true)
 64 
  const [remainingTime, setRemainingTime] = useState('00:00:00')
- 
 
 65 
  const [isActive, setIsActive] = useState(true)
85 
  const [totalVotes, setTotalVotes] = useState(0)
 66 
  const timeRef = useRef(time)
Línea -... Línea 67...
- 
 
 67 
 
- 
 
 68 
  const { register, handleSubmit } = useForm()
- 
 
 69 
 
- 
 
 70 
  const totalVotes = useMemo(
- 
 
 71 
    () =>
- 
 
 72 
      votes.reduce((curr, next) => {
- 
 
 73 
        if (next === null) return curr
- 
 
 74 
        return curr + next
- 
 
 75 
      }, 0),
86 
  const timeRef = useRef(time)
 76 
    [votes]
87 
  const { register, handleSubmit } = useForm()
 77 
  )
Línea 88... Línea 78...
88 
 
 78 
 
89 
  const sendVote = handleSubmit(({ vote }) => {
 79 
  const sendVote = handleSubmit(({ vote }) => {
Línea 133... Línea 123...
133 
  function getPorcentage(n, total) {
 123 
  function getPorcentage(n, total) {
134 
    return (n / total) * 100
 124 
    return (n / total) * 100
135 
  }
 125 
  }
Línea 136... Línea 126...
136 
 
 126 
 
137 
  useEffect(() => {
 - 
 
138 
    setRemainingTime(getTimeDiff(time))
 - 
 
139 
 
 - 
 
140 
    if (!time) return
 - 
 
141 
 
 - 
 
142 
    const interval = setInterval(() => {
 - 
 
143 
      if (!timeRef.current) {
 - 
 
144 
        setRemainingTime(() => getTimeDiff(0))
 - 
 
145 
        setIsActive(false)
 - 
 
146 
        return
 - 
 
147 
      }
 - 
 
148 
 
 - 
 
149 
      if (!timeRef.current <= 60) {
 - 
 
150 
        timeRef.current -= 1
 - 
 
151 
        setRemainingTime(() => getTimeDiff(timeRef.current))
 - 
 
152 
        return
 - 
 
153 
      }
 - 
 
154 
 
 - 
 
155 
      timeRef.current -= 60
 - 
 
156 
      setRemainingTime(() => getTimeDiff(timeRef.current))
 - 
 
157 
    }, 60000)
 - 
 
158 
 
 - 
 
159 
    return () => {
 - 
 
160 
      clearInterval(interval)
 - 
 
161 
    }
 - 
 
162 
  }, [])
 - 
 
163 
 
 - 
 
164 
  useEffect(() => {
 - 
 
165 
    const total = votes.reduce((acum, current) => {
 - 
 
166 
      if (!current) {
 - 
 
167 
        return acum
 - 
 
168 
      }
 - 
 
169 
 
 - 
 
170 
      return acum + Number(current)
 - 
 
171 
    }, 0)
 - 
 
172 
 
 - 
 
173 
    setTotalVotes(total)
 - 
 
174 
  }, [votes])
 - 
 
175 
 
 - 
 
176 
  useEffect(() => {
 127 
  useEffect(() => {
177 
    setIsActive(!!active)
 128 
    setIsActive(!!active)
Línea 178... Línea 129...
178 
  }, [active])
 129 
  }, [active])
179 
 
 130 
 
Línea 197... Línea 148...
197 
        </span>
 148 
        </span>
198 
      )}
 149 
      )}
199 
      {answers.map(
 150 
      {answers.map(
200 
        (option, index) =>
 151 
        (option, index) =>
201 
          option && (
 152 
          option && (
202 
            <RadioButton
 - 
 
203 
              disabled={!isActive}
 153 
            <RadioButton disabled={!isActive} key={index}>
204 
              porcentage={
 - 
 
205 
                !!totalVotes && getPorcentage(votes[index], totalVotes)
 - 
 
206 
              }
 - 
 
207 
              key={index}
 - 
 
208 
            >
 - 
 
209 
              <input
 154 
              <input
210 
                type='radio'
 155 
                type='radio'
211 
                name='vote'
 156 
                name='vote'
212 
                id={`vote-${index + 1}`}
 157 
                id={`vote-${index + 1}`}
213 
                disabled={!isActive}
 158 
                disabled={!isActive}