Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 695 Rev 2268
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { axios } from '../../../utils'
 - 
 
3 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
4 
import { addNotification } from '../../../redux/notification/notification.actions'
 - 
 
5 
import styled from 'styled-components'
 3 
import { styled } from '@mui/material'
- 
 
 4 
 
6 
import WidgetLayout from '../WidgetLayout'
 5 
import { axios } from '@app/utils'
7 
import Spinner from '../../UI/Spinner'
 6 
import { addNotification } from '@app/redux/notification/notification.actions'
8 
import LoaderContainer from '../../UI/LoaderContainer'
 7 
import useFetch from '@app/hooks/useFetch'
9 
 
 8 
 
10 
const StyledDailyPulseContainer = styled(WidgetLayout)`
 9 
import Widget from '@app/components/UI/Widget'
11 
  padding: 1rem;
 - 
 
12 
  h3 {
 - 
 
13 
    color: var(--title-color);
 - 
 
14 
    font-weight: 700;
 - 
 
15 
    font-size: 1.1rem;
 - 
 
16 
  }
 - 
 
17 
  span {
 - 
 
18 
    color: var(--subtitle-color);
 10 
import Spinner from '@app/components/UI/Spinner'
19 
    font-weight: 600;
 - 
 
20 
  }
 - 
 
21 
  h4 {
 - 
 
22 
    font-weight: 600;
 - 
 
23 
    color: var(--title-color);
 - 
 
24 
    text-align: center;
 - 
 
25 
    margin-bottom: 0.5rem;
 - 
 
26 
  }
 - 
 
27 
`
 - 
 
Línea 28... Línea 11...
28 
 
 11 
 
29 
const StyledPulseList = styled.ul`
 12 
const EmojisList = styled('div')`
30 
  display: flex;
 13 
  display: flex;
31 
  gap: 0.5rem;
 14 
  gap: 0.5rem;
32 
  justify-content: center;
 - 
 
33 
  button {
 - 
 
34 
    width: 32px;
 - 
 
35 
    height: 32px;
 - 
 
36 
    border-radius: 50%;
 - 
 
37 
    transition: all 300ms;
 - 
 
38 
    & > img {
 - 
 
39 
      width: 100%;
 - 
 
40 
      height: 100%;
 - 
 
41 
      object-fit: cover;
 - 
 
42 
    }
 - 
 
43 
    &:hover {
 - 
 
44 
      transform: translateY(-10px);
 - 
 
45 
    }
 - 
 
46 
  }
 15 
  justify-content: center;
Línea 47... Línea 16...
47 
`
 16 
`
- 
 
 17 
 
- 
 
 18 
const EmojiItem = styled('button')`
- 
 
 19 
  width: 32px;
48 
 
 20 
  height: 32px;
- 
 
 21 
  border-radius: 50%;
49 
const StyledLoaderContainer = styled(LoaderContainer)`
 22 
  transition: all 300ms;
50 
  position: absolute !important;
 23 
  & > img {
- 
 
 24 
    width: 100%;
- 
 
 25 
    height: 100%;
51 
  top: 50%;
 26 
    object-fit: cover;
52 
  left: 50%;
 27 
  }
- 
 
 28 
  &:hover {
53 
  margin: 0;
 29 
    transform: translateY(-10px);
Línea 54... Línea 30...
54 
  transform: translate(-50%, -50%);
 30 
  }
55 
`
 - 
 
56 
 
 - 
 
57 
const DailyPulse = ({ dailyPulseUrl = '' }) => {
 31 
`
58 
  const [emojisHowAreYouFeel, setEmojisHowAreYouFeel] = useState([])
 - 
 
59 
  const [emojisClimateOrganization, setEmojisClimateOrganization] = useState([])
 - 
 
60 
  const dispatch = useDispatch()
 32 
 
61 
 
 - 
 
62 
  const getData = (url = '') => {
 - 
 
63 
    axios
 - 
 
64 
      .get(url)
 - 
 
65 
      .then(({ data: responseData }) => {
 - 
 
66 
        const { success, data } = responseData
 33 
const DailyPulse = ({ dailyPulseUrl = '' }) => {
67 
 
 34 
  const { data, refetch } = useFetch(dailyPulseUrl)
68 
        if (success) {
 35 
  const {
69 
          setEmojisHowAreYouFeel(data.emojis_how_are_you_feel)
 - 
 
70 
          setEmojisClimateOrganization(data.emojis_climate_on_your_organization)
 36 
    emojis_how_are_you_feel: emojisHowAreYouFeel = [],
71 
        }
 37 
    emojis_climate_on_your_organization: emojisClimateOrganization
72 
      })
 - 
 
73 
      .catch((error) => {
 - 
 
74 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 - 
 
75 
      })
 - 
 
76 
  }
 - 
 
77 
 
 - 
 
Línea 78... Línea 38...
78 
  useEffect(() => {
 38 
  } = data || {}
79 
    getData(dailyPulseUrl)
 39 
  const completed =
80 
  }, [dailyPulseUrl])
 40 
    emojisHowAreYouFeel.length === 1 && emojisClimateOrganization.length === 1
- 
 
 41 
 
81 
 
 42 
  return (
82 
  return (
 43 
    <Widget styles={{ display: completed ? 'none' : 'block' }}>
83 
    <StyledDailyPulseContainer>
 44 
      <Widget.Header title='Pulso Diario' />
- 
 
 45 
 
84 
      <h3>Pulso Diario</h3>
 46 
      <Widget.Body>
85 
      <DailyPulse.List
 47 
        <Emojis
86 
        options={emojisHowAreYouFeel}
 48 
          title='¿Como te sientes hoy?'
87 
        title='¿Como te sientes hoy?'
 49 
          options={emojisHowAreYouFeel}
88 
        onComplete={() => getData(dailyPulseUrl)}
 50 
          onComplete={refetch}
89 
      />
 51 
        />
90 
      <DailyPulse.List
 52 
        <Emojis
91 
        options={emojisClimateOrganization}
 53 
          title='¿Como esta el clima en la organización?'
- 
 
 54 
          options={emojisClimateOrganization}
92 
        title='¿Como esta el clima en la organización?'
 55 
          onComplete={refetch}
93 
        onComplete={() => getData(dailyPulseUrl)}
 56 
        />
Línea 94... Línea 57...
94 
      />
 57 
      </Widget.Body>
95 
    </StyledDailyPulseContainer>
 58 
    </Widget>
96 
  )
 59 
  )
Línea 97... Línea 60...
97 
}
 60 
}
98 
 
 61 
 
Línea 124... Línea 87...
124 
  }
 87 
  }
Línea 125... Línea 88...
125 
 
 88 
 
126 
  return (
 89 
  return (
127 
    <>
 90 
    <>
128 
      <h4>{title}</h4>
 91 
      <h4>{title}</h4>
129 
      <StyledPulseList>
 92 
      <EmojisList>
130 
        {options.map(({ link_save, id, image }, index) => (
 - 
 
131 
          <li key={id}>
 93 
        {options.map(({ link_save, id, image }, index) => (
132 
            <button onClick={() => handleEmojiSave(link_save)}>
 94 
          <EmojiItem onClick={() => handleEmojiSave(link_save)} key={id}>
133 
              <img
 95 
            <img
134 
                className='fadedown'
 96 
              className='fadedown'
135 
                src={image}
 97 
              src={image}
136 
                style={{ animationDelay: `${index + 10}00ms` }}
 98 
              style={{ animationDelay: `${index + 10}00ms` }}
137 
              />
 - 
 
138 
            </button>
 99 
            />
139 
          </li>
 100 
          </EmojiItem>
140 
        ))}
 101 
        ))}
141 
      </StyledPulseList>
 102 
      </EmojisList>
142 
      {isLoading && (
 - 
 
143 
        <StyledLoaderContainer>
 - 
 
144 
          <Spinner />
 - 
 
145 
        </StyledLoaderContainer>
 - 
 
146 
      )}
 103 
      {isLoading && <Spinner />}
147 
    </>
 104 
    </>
148 
  )
 105 
  )
Línea 149... Línea -...
149 
}
 - 
 
150 
 
 - 
 
151 
DailyPulse.List = PulseList
 106 
}