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