Rev 7116 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { axios } from '../../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
const DailyPulse = ({ dailyPulseUrl = '' }) => {
const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([])
const [emojisClimateOnYourOrganization, setEmojisClimateOnYourOrganization] =
useState([])
const getData = (url) => {
axios
.get(url)
.then((response) => {
const { success, data } = response.data
if (success) {
setEmojisHowAreYouFeel(data.emojis_how_are_you_feel)
setEmojisClimateOnYourOrganization(
data.emojis_climate_on_your_organization
)
}
})
.catch((error) => {
console.trace(error)
throw new Error(error)
})
}
useEffect(() => {
getData(dailyPulseUrl)
}, [dailyPulseUrl])
return (
<div className="daily_pulse-widget">
<h3>Pulso Diario</h3>
<DailyPulse.List
options={emojisHowAreYouFeel}
title="¿Como te sientes hoy?"
onComplete={getData}
/>
<DailyPulse.List
options={emojisClimateOnYourOrganization}
title="¿Como esta el clima en la organización?"
onComplete={getData}
/>
</div>
)
}
const PulseList = ({ options = [], title = '', onComplete = () => null }) => {
const dispatch = useDispatch()
const handleEmojiSave = (url) => {
if (!url) {
return false
}
axios.post(url).then(({ data }) => {
if (!data.success) {
return dispatch(
addNotification({
style: 'danger',
msg:
typeof data.data === 'string'
? data.data
: 'Ha ocurrido un error',
})
)
}
return onComplete()
})
}
return (
<div className="daily_pulse-quest">
<h4>{title}</h4>
<ul>
{options.map(({ link_save, id, image }, index) => (
<li key={id}>
<a
href={link_save}
onClick={(e) => {
e.preventDefault()
handleEmojiSave(link_save)
}}
>
<img
className="fadedown"
src={image}
style={{ animationDelay: `${index + 10}00ms` }}
/>
</a>
</li>
))}
</ul>
</div>
)
}
DailyPulse.List = PulseList
export default DailyPulse