Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
/* eslint-disable camelcase */
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import { axios } from '../../../utils'

const DailyPulse = ({ routeDailyPulse }) => {
  const [points, setPoints] = useState(0)
  const [isMounted, setIsMounted] = useState(false)
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([])
  const [emojisClimateOnYourOrganization, setEmojisClimateOnYourOrganization] = useState([])
  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 getData()
      })
  }

  const getData = async (url = routeDailyPulse) => {
    try {
      const { data: response } = await axios.get(url)
      if (response.success) {
        setPoints(response.data.points)
        setEmojisHowAreYouFeel(response.data.emojis_how_are_you_feel)
        setEmojisClimateOnYourOrganization(response.data.emojis_climate_on_your_organization)
      }
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    setIsMounted(true)
    getData()
  }, [])

  return (
    <div className='peopleYouMayKnow'>
      <div className="sd-title d-flex align-items-center justify-content-between">
        <h3>Pulso Diario</h3>
      </div>
      <span>Puntos acumulados: {points}</span>
      <h4>¿Como te sientes hoy?</h4>
      {emojisHowAreYouFeel.map(({ link_save, id, image }, index) =>
        <a key={id} href={link_save} onClick={() => handleEmojiSave(link_save)}>
          <img className={isMounted && 'fadedown'} src={image} style={{ width: '32px', height: '32px', animationDelay: `${index}00ms` }} />
        </a>
      )}
      <h4>¿Como esta el clima en la organización ?</h4>
      {emojisClimateOnYourOrganization.map(({ link_save, id, image }, index) =>
        <a key={id} href={link_save} onClick={() => handleEmojiSave(link_save)}>
          <img className={isMounted && 'fadedown'} src={image} style={{ width: '32px', height: '32px', animationDelay: `${index}00ms` }} />
        </a>
      )}
    </div>
  )
}

export default DailyPulse