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: var(--title-color);
    font-weight: 700;
    font-size: 1.1rem;
  }
  span {
    color: var(--subtitle-color);
    font-weight: 600;
  }
  h4 {
    font-weight: 600;
    color: var(--title-color);
    text-align: center;
    margin-bottom: 0.5rem;
  }
`;

const StyledPulseList = styled.ul`
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 300ms;
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    &:hover {
      transform: translateY(-10px);
    }
  }
`;

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 (
    <>
      <h4>{title}</h4>
      <StyledPulseList>
        {options.map(({ link_save, id, image }, index) => (
          <li key={id}>
            <button onClick={() => handleEmojiSave(link_save)}>
              <img
                className="fadedown"
                src={image}
                style={{ animationDelay: `${index + 10}00ms` }}
              />
            </button>
          </li>
        ))}
      </StyledPulseList>
    </>
  );
};

DailyPulse.List = PulseList;

export default DailyPulse;