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";

const StyledDailyPulseContainer = styled(WidgetLayout)`
  padding: 1rem;
  h3 {
    color: $title-color;
    font-weight: 700;
    font-size: 1.1rem;
  }
  span {
    color: $subtitle-color;
    font-weight: 600;
  }
`;

const DailyPulse = ({ dailyPulseUrl = "" }) => {
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([]);
  const [emojisClimateOnYourOrganization, setEmojisClimateOnYourOrganization] =
    useState([]);

  const getData = (url) => {
    axios
      .get(url)
      .then((response) => {
        const { success, data } = response.data;

        if (success) {
          setEmojisHowAreYouFeel(data.emojis_how_are_you_feel);
          setEmojisClimateOnYourOrganization(
            data.emojis_climate_on_your_organization
          );
        }
      })
      .catch((error) => {
        console.trace(error);
        throw new Error(error);
      });
  };

  useEffect(() => {
    getData(dailyPulseUrl);
  }, [dailyPulseUrl]);

  return (
    <StyledDailyPulseContainer>
      <h3>Pulso Diario</h3>
      <DailyPulse.List
        options={emojisHowAreYouFeel}
        title="¿Como te sientes hoy?"
        onComplete={getData}
      />
      <DailyPulse.List
        options={emojisClimateOnYourOrganization}
        title="¿Como esta el clima en la organización?"
        onComplete={getData}
      />
    </StyledDailyPulseContainer>
  );
};

const PulseList = ({ options = [], title = "", onComplete = () => null }) => {
  const dispatch = useDispatch();

  const handleEmojiSave = (url) => {
    if (!url) {
      return false;
    }

    axios.post(url).then(({ data }) => {
      if (!data.success) {
        return dispatch(
          addNotification({
            style: "danger",
            msg:
              typeof data.data === "string"
                ? data.data
                : "Ha ocurrido un error",
          })
        );
      }

      return onComplete();
    });
  };

  return (
    <div className="daily_pulse-quest">
      <h4>{title}</h4>
      <ul>
        {options.map(({ link_save, id, image }, index) => (
          <li key={id}>
            <a
              href={link_save}
              onClick={(e) => {
                e.preventDefault();
                handleEmojiSave(link_save);
              }}
            >
              <img
                className="fadedown"
                src={image}
                style={{ animationDelay: `${index + 10}00ms` }}
              />
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

DailyPulse.List = PulseList;

export default DailyPulse;