Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 5 | Rev 41 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
40 stevensc 1 
import React, { useEffect, useState } from "react";
2 
import { axios } from "../../../utils";
3 
import { useDispatch } from "react-redux";
4 
import { addNotification } from "../../../redux/notification/notification.actions";
5 
import { styled } from "styled-components";
6 
import WidgetLayout from "../WidgetLayout";
5 stevensc 7 
 
40 stevensc 8 
const StyledDailyPulseContainer = styled(WidgetLayout)`
9 
  padding: 1rem;
10 
  h3 {
11 
    color: $title-color;
12 
    font-weight: 700;
13 
    font-size: 1.1rem;
14 
  }
15 
  span {
16 
    color: $subtitle-color;
17 
    font-weight: 600;
18 
  }
19 
`;
5 stevensc 20 
 
40 stevensc 21 
const DailyPulse = ({ dailyPulseUrl = "" }) => {
22 
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([]);
5 stevensc 23 
  const [emojisClimateOnYourOrganization, setEmojisClimateOnYourOrganization] =
40 stevensc 24 
    useState([]);
5 stevensc 25 
 
26 
  const getData = (url) => {
27 
    axios
28 
      .get(url)
29 
      .then((response) => {
40 stevensc 30 
        const { success, data } = response.data;
5 stevensc 31 
 
32 
        if (success) {
40 stevensc 33 
          setEmojisHowAreYouFeel(data.emojis_how_are_you_feel);
5 stevensc 34 
          setEmojisClimateOnYourOrganization(
35 
            data.emojis_climate_on_your_organization
40 stevensc 36 
          );
5 stevensc 37 
        }
38 
      })
39 
      .catch((error) => {
40 stevensc 40 
        console.trace(error);
41 
        throw new Error(error);
42 
      });
43 
  };
5 stevensc 44 
 
45 
  useEffect(() => {
40 stevensc 46 
    getData(dailyPulseUrl);
47 
  }, [dailyPulseUrl]);
5 stevensc 48 
 
49 
  return (
40 stevensc 50 
    <StyledDailyPulseContainer>
5 stevensc 51 
      <h3>Pulso Diario</h3>
52 
      <DailyPulse.List
53 
        options={emojisHowAreYouFeel}
54 
        title="¿Como te sientes hoy?"
55 
        onComplete={getData}
56 
      />
57 
      <DailyPulse.List
58 
        options={emojisClimateOnYourOrganization}
59 
        title="¿Como esta el clima en la organización?"
60 
        onComplete={getData}
61 
      />
40 stevensc 62 
    </StyledDailyPulseContainer>
63 
  );
64 
};
5 stevensc 65 
 
40 stevensc 66 
const PulseList = ({ options = [], title = "", onComplete = () => null }) => {
67 
  const dispatch = useDispatch();
5 stevensc 68 
 
69 
  const handleEmojiSave = (url) => {
70 
    if (!url) {
40 stevensc 71 
      return false;
5 stevensc 72 
    }
73 
 
74 
    axios.post(url).then(({ data }) => {
75 
      if (!data.success) {
76 
        return dispatch(
77 
          addNotification({
40 stevensc 78 
            style: "danger",
5 stevensc 79 
            msg:
40 stevensc 80 
              typeof data.data === "string"
5 stevensc 81 
                ? data.data
40 stevensc 82 
                : "Ha ocurrido un error",
5 stevensc 83 
          })
40 stevensc 84 
        );
5 stevensc 85 
      }
86 
 
40 stevensc 87 
      return onComplete();
88 
    });
89 
  };
5 stevensc 90 
 
91 
  return (
92 
    <div className="daily_pulse-quest">
93 
      <h4>{title}</h4>
94 
      <ul>
95 
        {options.map(({ link_save, id, image }, index) => (
96 
          <li key={id}>
97 
            <a
98 
              href={link_save}
99 
              onClick={(e) => {
40 stevensc 100 
                e.preventDefault();
101 
                handleEmojiSave(link_save);
5 stevensc 102 
              }}
103 
            >
104 
              <img
105 
                className="fadedown"
106 
                src={image}
107 
                style={{ animationDelay: `${index + 10}00ms` }}
108 
              />
109 
            </a>
110 
          </li>
111 
        ))}
112 
      </ul>
113 
    </div>
40 stevensc 114 
  );
115 
};
5 stevensc 116 
 
40 stevensc 117 
DailyPulse.List = PulseList;
5 stevensc 118 
 
40 stevensc 119 
export default DailyPulse;