Proyectos de Subversion LeadersLinked - SPA

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

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

import Widget from '@components/UI/Widget'
import EmojiSelector from '@components/common/emoji-selector'
import LoadingWrapper from '@components/common/loading-wrapper'

const DailyPulse = ({ dailyPulseUrl = '' }) => {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const dispatch = useDispatch()

  const { data, isLoading, mutate } = useFetch(dailyPulseUrl, {
    emojis_how_are_you_feel: [],
    emojis_climate_on_your_organization: []
  })

  const saveEmoji = async (url = '') => {
    try {
      setIsSubmitting(true)
      const response = await axios.post(url)
      const { data, success } = response.data

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

      const isClimate = url.includes('climate')

      if (isClimate) {
        const selectedEmojis = data.emojis_climate_on_your_organization.filter(
          (emoji) => emoji.link_save === url
        )
        mutate({
          ...data,
          emojis_climate_on_your_organization: selectedEmojis
        })
      } else {
        const selectedEmojis = data.emojis_how_are_you_feel.filter(
          (emoji) => emoji.link_save === url
        )
        mutate({
          ...data,
          emojis_how_are_you_feel: selectedEmojis
        })
      }
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    } finally {
      setIsSubmitting(false)
    }
  }

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

      <Widget.Body>
        <LoadingWrapper
          loading={isLoading || isSubmitting}
          displayChildren={isSubmitting}
        >
          <Typography variant='h4' textAlign='center'>
            ¿Como te sientes hoy?
          </Typography>
          <EmojiSelector
            options={data.emojis_how_are_you_feel}
            onSelect={saveEmoji}
          />

          <Typography variant='h4' textAlign='center'>
            ¿Como esta el clima en la organización?
          </Typography>
          <EmojiSelector
            options={data.emojis_climate_on_your_organization}
            onSelect={saveEmoji}
          />
        </LoadingWrapper>
      </Widget.Body>
    </Widget>
  )
}

export default DailyPulse