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