Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import styled from 'styled-components'
import WidgetLayout from '../WidgetLayout'
import Spinner from '../../UI/Spinner'
import LoaderContainer from '../../UI/LoaderContainer'

const StyledDailyPulseContainer = styled(WidgetLayout)`
  padding: 1rem;
  h3 {
    color: var(--title-color);
    font-weight: 700;
    font-size: 1.1rem;
  }
  span {
    color: var(--subtitle-color);
    font-weight: 600;
  }
  h4 {
    font-weight: 600;
    color: var(--title-color);
    text-align: center;
    margin-bottom: 0.5rem;
  }
`

const StyledPulseList = styled.ul`
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 300ms;
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &:hover {
      transform: translateY(-10px);
    }
  }
`

const StyledLoaderContainer = styled(LoaderContainer)`
  position: absolute !important;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
`

const DailyPulse = ({ dailyPulseUrl = '' }) => {
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([])
  const [emojisClimateOrganization, setEmojisClimateOrganization] = useState([])
  const dispatch = useDispatch()

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

        if (success) {
          setEmojisHowAreYouFeel(data.emojis_how_are_you_feel)
          setEmojisClimateOrganization(data.emojis_climate_on_your_organization)
        }
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
  }

  useEffect(() => {
    getData(dailyPulseUrl)
  }, [dailyPulseUrl])

  return (
    <StyledDailyPulseContainer>
      <h3>Pulso Diario</h3>
      <DailyPulse.List
        options={emojisHowAreYouFeel}
        title='¿Como te sientes hoy?'
        onComplete={() => getData(dailyPulseUrl)}
      />
      <DailyPulse.List
        options={emojisClimateOrganization}
        title='¿Como esta el clima en la organización?'
        onComplete={() => getData(dailyPulseUrl)}
      />
    </StyledDailyPulseContainer>
  )
}

const PulseList = ({ 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>
      <StyledPulseList>
        {options.map(({ link_save, id, image }, index) => (
          <li key={id}>
            <button onClick={() => handleEmojiSave(link_save)}>
              <img
                className='fadedown'
                src={image}
                style={{ animationDelay: `${index + 10}00ms` }}
              />
            </button>
          </li>
        ))}
      </StyledPulseList>
      {isLoading && (
        <StyledLoaderContainer>
          <Spinner />
        </StyledLoaderContainer>
      )}
    </>
  )
}

DailyPulse.List = PulseList

export default DailyPulse