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;