Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 334 | Rev 692 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 334 Rev 691
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from "../../../utils";
 2 
import { axios } from '../../../utils'
3 
import { useDispatch } from "react-redux";
 3 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from "../../../redux/notification/notification.actions";
 4 
import { addNotification } from '../../../redux/notification/notification.actions'
5 
import { styled } from "styled-components";
 5 
import { styled } from 'styled-components'
6 
import WidgetLayout from "../WidgetLayout";
 6 
import WidgetLayout from '../WidgetLayout'
- 
 
 7 
import Spinner from '../../UI/Spinner'
- 
 
 8 
import LoaderContainer from '../../UI/LoaderContainer'
Línea 7... Línea 9...
7 
 
 9 
 
8 
const StyledDailyPulseContainer = styled(WidgetLayout)`
 10 
const StyledDailyPulseContainer = styled(WidgetLayout)`
9 
  padding: 1rem;
 11 
  padding: 1rem;
10 
  h3 {
 12 
  h3 {
Línea 20... Línea 22...
20 
    font-weight: 600;
 22 
    font-weight: 600;
21 
    color: var(--title-color);
 23 
    color: var(--title-color);
22 
    text-align: center;
 24 
    text-align: center;
23 
    margin-bottom: 0.5rem;
 25 
    margin-bottom: 0.5rem;
24 
  }
 26 
  }
25 
`;
 27 
`
Línea 26... Línea 28...
26 
 
 28 
 
27 
const StyledPulseList = styled.ul`
 29 
const StyledPulseList = styled.ul`
28 
  display: flex;
 30 
  display: flex;
29 
  gap: 0.5rem;
 31 
  gap: 0.5rem;
Línea 40... Línea 42...
40 
    }
 42 
    }
41 
    &:hover {
 43 
    &:hover {
42 
      transform: translateY(-10px);
 44 
      transform: translateY(-10px);
43 
    }
 45 
    }
44 
  }
 46 
  }
45 
`;
 47 
`
Línea -... Línea 48...
- 
 
 48 
 
- 
 
 49 
const StyledLoaderContainer = styled(LoaderContainer)`
- 
 
 50 
  position: absolute;
- 
 
 51 
  top: 50%;
- 
 
 52 
  left: 50%;
- 
 
 53 
  transform: translate(-50%, -50%);
- 
 
 54 
`
46 
 
 55 
 
47 
const DailyPulse = ({ dailyPulseUrl = "" }) => {
 56 
const DailyPulse = ({ dailyPulseUrl = '' }) => {
48 
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([]);
 57 
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([])
49 
  const [emojisClimateOnYourOrganization, setEmojisClimateOnYourOrganization] =
 58 
  const [emojisClimateOrganization, setEmojisClimateOrganization] = useState([])
Línea 50... Línea 59...
50 
    useState([]);
 59 
  const dispatch = useDispatch()
51 
 
 60 
 
52 
  const getData = (url = "") => {
 61 
  const getData = (url = '') => {
53 
    axios
 62 
    axios
54 
      .get(url)
 63 
      .get(url)
Línea 55... Línea 64...
55 
      .then((response) => {
 64 
      .then(({ data: responseData }) => {
56 
        const { success, data } = response.data;
 65 
        const { success, data } = responseData
57 
 
 - 
 
58 
        if (success) {
 66 
 
59 
          setEmojisHowAreYouFeel(data.emojis_how_are_you_feel);
 - 
 
60 
          setEmojisClimateOnYourOrganization(
 67 
        if (success) {
61 
            data.emojis_climate_on_your_organization
 68 
          setEmojisHowAreYouFeel(data.emojis_how_are_you_feel)
62 
          );
 69 
          setEmojisClimateOrganization(data.emojis_climate_on_your_organization)
63 
        }
 70 
        }
64 
      })
 - 
 
65 
      .catch((error) => {
 71 
      })
66 
        console.trace(error);
 72 
      .catch((error) => {
Línea 67... Línea 73...
67 
        throw new Error(error);
 73 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
68 
      });
 74 
      })
69 
  };
 75 
  }
Línea 70... Línea 76...
70 
 
 76 
 
71 
  useEffect(() => {
 77 
  useEffect(() => {
72 
    getData(dailyPulseUrl);
 78 
    getData(dailyPulseUrl)
73 
  }, [dailyPulseUrl]);
 79 
  }, [dailyPulseUrl])
74 
 
 80 
 
75 
  return (
 81 
  return (
76 
    <StyledDailyPulseContainer>
 82 
    <StyledDailyPulseContainer>
77 
      <h3>Pulso Diario</h3>
 83 
      <h3>Pulso Diario</h3>
78 
      <DailyPulse.List
 84 
      <DailyPulse.List
79 
        options={emojisHowAreYouFeel}
 85 
        options={emojisHowAreYouFeel}
80 
        title="¿Como te sientes hoy?"
 86 
        title='¿Como te sientes hoy?'
81 
        onComplete={() => getData(dailyPulseUrl)}
 87 
        onComplete={() => getData(dailyPulseUrl)}
82 
      />
 88 
      />
83 
      <DailyPulse.List
 89 
      <DailyPulse.List
84 
        options={emojisClimateOnYourOrganization}
 90 
        options={emojisClimateOrganization}
85 
        title="¿Como esta el clima en la organización?"
 91 
        title='¿Como esta el clima en la organización?'
Línea 86... Línea 92...
86 
        onComplete={() => getData(dailyPulseUrl)}
 92 
        onComplete={() => getData(dailyPulseUrl)}
- 
 
 93 
      />
87 
      />
 94 
    </StyledDailyPulseContainer>
Línea 88... Línea 95...
88 
    </StyledDailyPulseContainer>
 95 
  )
89 
  );
 96 
}
- 
 
 97 
 
- 
 
 98 
const PulseList = ({ options = [], title = '', onComplete = () => null }) => {
- 
 
 99 
  const [isLoading, setIsLoading] = useState(false)
90 
};
 100 
  const dispatch = useDispatch()
- 
 
 101 
 
- 
 
 102 
  const handleEmojiSave = (url) => {
- 
 
 103 
    if (!url) return
- 
 
 104 
    setIsLoading(true)
- 
 
 105 
 
- 
 
 106 
    axios
- 
 
 107 
      .post(url)
91 
 
 108 
      .then(({ data: responseData }) => {
Línea 92... Línea -...
92 
const PulseList = ({ options = [], title = "", onComplete = () => null }) => {
 - 
 
93 
  const dispatch = useDispatch();
 - 
 
94 
 
 109 
        const { data, success } = responseData
95 
  const handleEmojiSave = (url) => {
 - 
 
96 
    if (!url) {
 - 
 
97 
      return false;
 110 
 
98 
    }
 - 
 
99 
 
 111 
        if (!success) {
100 
    axios.post(url).then(({ data }) => {
 112 
          const errorMessage =
101 
      if (!data.success) {
 - 
 
102 
        return dispatch(
 - 
 
103 
          addNotification({
 113 
            typeof data === 'string' ? data : 'Ha ocurrido un error'
104 
            style: "danger",
 - 
 
105 
            msg:
 114 
          throw new Error(errorMessage)
106 
              typeof data.data === "string"
 - 
 
107 
                ? data.data
 115 
        }
Línea 108... Línea 116...
108 
                : "Ha ocurrido un error",
 116 
 
109 
          })
 117 
        onComplete()
110 
        );
 118 
      })
111 
      }
 119 
      .catch((error) => {
112 
 
 120 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
113 
      onComplete();
 121 
      })
114 
    });
 122 
      .finally(() => setIsLoading(false))
115 
  };
 123 
  }
116 
 
 124 
 
117 
  return (
 125 
  return (
118 
    <>
 126 
    <>
119 
      <h4>{title}</h4>
 127 
      <h4>{title}</h4>
120 
      <StyledPulseList>
 128 
      <StyledPulseList>
121 
        {options.map(({ link_save, id, image }, index) => (
 129 
        {options.map(({ link_save, id, image }, index) => (
122 
          <li key={id}>
 130 
          <li key={id}>
123 
            <button onClick={() => handleEmojiSave(link_save)}>
 131 
            <button onClick={() => handleEmojiSave(link_save)}>
- 
 
 132 
              <img
- 
 
 133 
                className='fadedown'
- 
 
 134 
                src={image}
- 
 
 135 
                style={{ animationDelay: `${index + 10}00ms` }}
- 
 
 136 
              />
124 
              <img
 137 
            </button>
125 
                className="fadedown"
 138 
          </li>
126 
                src={image}
 139 
        ))}
Línea 127... Línea 140...
127 
                style={{ animationDelay: `${index + 10}00ms` }}
 140 
      </StyledPulseList>
Línea 128... Línea 141...
128 
              />
 141 
      {isLoading && (