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 LoadingWrapper from '@components/common/loading-wrapper';

import EmojiGroup from '@components/common/emoji-selector';

const DailyPulse = ({ dailyPulseUrl = '' }) => {

  const [isSubmitting, setIsSubmitting] = useState(false);

  const dispatch = useDispatch();

  const { data, isLoading, refetch } = useFetch(dailyPulseUrl, {

    emojis_how_are_you_feel: [],

    emojis_climate_on_your_organization: []

  });

  const saveEmoji = async (link_save = '') => {

    try {

      setIsSubmitting(true);

      const response = await axios.post(link_save);

      const { data, success } = response.data;

      if (!success) {

        const errMsg = typeof data === 'string' ? data : 'Error al guardar';

        throw new Error(errMsg);

      }

      refetch();

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    } finally {

      setIsSubmitting(false);

    }

  };

  if (

    data.emojis_how_are_you_feel.length <= 1 &&

    data.emojis_climate_on_your_organization.length <= 1

  ) {

    return null;

  }

  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>

          <EmojiGroup>

            {data.emojis_how_are_you_feel?.map(({ id, image, link_save }, index) => (

              <EmojiGroup.Item

                key={id}

                image={image}

                index={index}

                onClick={() => saveEmoji(link_save)}

              />

            ))}

          </EmojiGroup>

          <Typography variant='h4' textAlign='center'>

            ¿Como esta el clima en la organización?

          </Typography>

          <EmojiGroup>

            {data.emojis_climate_on_your_organization?.map(({ id, image, link_save }, index) => (

              <EmojiGroup.Item

                key={id}

                image={image}

                index={index}

                onClick={() => saveEmoji(link_save)}

              />

            ))}

          </EmojiGroup>

        </LoadingWrapper>

      </Widget.Body>

    </Widget>

  );

};

export default DailyPulse;