Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { styled } from '@mui/material'

import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'
import useFetch from '@app/hooks/useFetch'

import Widget from '@app/components/UI/Widget'
import Spinner from '@app/components/UI/Spinner'

const EmojisList = styled('div')`
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 0;
`

const EmojiItem = styled('button')`
  width: 32px;
  height: 32px;
  border-radius: 50%;
  & > img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    transition: all 300ms;
  }
  &:hover > img {
    transform: translateY(-5px);
  }
`

const DailyPulse = ({ dailyPulseUrl = '' }) => {
  const { data, refetch } = useFetch(dailyPulseUrl)
  const {
    emojis_how_are_you_feel: emojisHowAreYouFeel = [],
    emojis_climate_on_your_organization: emojisClimateOrganization
  } = data || {}
  const completed =
    emojisHowAreYouFeel.length === 1 && emojisClimateOrganization.length === 1

  return (
    <Widget styles={{ display: completed ? 'none' : 'block' }}>
      <Widget.Header title='Pulso Diario' styles={{ paddingBottom: 0 }} />

      <Widget.Body
        styles={{ textAlign: 'center', '& h4': { fontWeight: 400 } }}
      >
        <Emojis
          title='¿Como te sientes hoy?'
          options={emojisHowAreYouFeel}
          onComplete={refetch}
        />
        <Emojis
          title='¿Como esta el clima en la organización?'
          options={emojisClimateOrganization}
          onComplete={refetch}
        />
      </Widget.Body>
    </Widget>
  )
}

const Emojis = ({ options = [], title = '', onComplete = () => null }) => {
  const [isLoading, setIsLoading] = useState(false)
  const dispatch = useDispatch()

  const handleEmojiSave = (url) => {
    if (!url) return
    setIsLoading(true)

    axios
      .post(url)
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Ha ocurrido un error'
          throw new Error(errorMessage)
        }

        onComplete()
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
      .finally(() => setIsLoading(false))
  }

  return (
    <>
      <h4>{title}</h4>
      <EmojisList>
        {options.map(({ link_save, id, image }, index) => (
          <EmojiItem onClick={() => handleEmojiSave(link_save)} key={id}>
            <img
              className='fadedown'
              src={image}
              style={{ animationDelay: `${index + 10}00ms` }}
            />
          </EmojiItem>
        ))}
      </EmojisList>
      {isLoading && <Spinner />}
    </>
  )
}

export default DailyPulse