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, loading, 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={loading || 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;