Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { useDispatch } from 'react-redux'

import { Box, styled } from '@mui/material'

import { axios } from '@app/utils'

import { addNotification } from '@app/redux/notification/notification.actions'

import { useFetch } from '@hooks'

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

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

const EmojisList = styled('div')(({ theme }) => ({

  display: 'flex',

  gap: theme.spacing(0.5),

  justifyContent: 'center',

  padding: theme.spacing(0.5, 0)

}))

const EmojiItem = styled('button')`

  width: 32px;

  height: 32px;

  border-radius: 50%;

  transition: all 300ms;

  & > img {

    height: 100%;

    object-fit: cover;

    width: 100%;

  }

  &:hover {

    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

  if (completed) {

    return null

  }

  return (

    <Widget>

      <Widget.Header title='Pulso Diario' />

      <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 && (

        <Box

          sx={{

            position: 'absolute !important',

            top: '50%',

            left: '50%',

            margin: 0,

            transform: 'translate(-50%, -50%)',

            zIndex: 100

          }}

        >

          <Spinner />

        </Box>

      )}

    </>

  )

}

export default DailyPulse