Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2780 Rev 3330
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
2 
import { useDispatch } from 'react-redux'
 2 
import { useDispatch } from 'react-redux'
3 
import { Box, styled } from '@mui/material'
 3 
import { Typography } from '@mui/material'
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { axios } from '@app/utils'
 - 
 
6 
import { addNotification } from '@app/redux/notification/notification.actions'
 5 
import { axios } from '@utils'
- 
 
 6 
import { useFetch } from '@hooks'
Línea 7... Línea 7...
7 
import { useFetch } from '@hooks'
 7 
import { addNotification } from '@store/notification/notification.actions'
8 
 
 8 
 
9 
import Widget from '@app/components/UI/Widget'
 - 
 
10 
import Spinner from '@app/components/UI/Spinner'
 9 
import Widget from '@components/UI/Widget'
11 
 
 - 
 
12 
const EmojisList = styled('div')(({ theme }) => ({
 - 
 
13 
  display: 'flex',
 - 
 
14 
  gap: theme.spacing(0.5),
 - 
 
15 
  justifyContent: 'center',
 - 
 
16 
  padding: theme.spacing(0.5, 0)
 - 
 
17 
}))
 - 
 
18 
 
 - 
 
19 
const EmojiItem = styled('button')`
 - 
 
20 
  width: 32px;
 - 
 
21 
  height: 32px;
 - 
 
22 
  border-radius: 50%;
 - 
 
23 
  transition: all 300ms;
 - 
 
24 
  & > img {
 - 
 
25 
    height: 100%;
 - 
 
26 
    object-fit: cover;
 - 
 
27 
    width: 100%;
 - 
 
28 
  }
 - 
 
29 
  &:hover {
 - 
 
30 
    transform: translateY(-5px);
 - 
 
Línea 31... Línea 10...
31 
  }
 10 
import EmojiSelector from '@components/common/emoji-selector'
32 
`
 11 
import LoadingWrapper from '@components/common/loading-wrapper'
33 
 
 - 
 
34 
const DailyPulse = ({ dailyPulseUrl = '' }) => {
 - 
 
35 
  const { data, refetch } = useFetch(dailyPulseUrl)
 - 
 
36 
  const {
 - 
 
37 
    emojis_how_are_you_feel: emojisHowAreYouFeel = [],
 12 
 
38 
    emojis_climate_on_your_organization: emojisClimateOrganization
 - 
 
Línea -... Línea 13...
- 
 
 13 
const DailyPulse = ({ dailyPulseUrl = '' }) => {
- 
 
 14 
  const [isSubmitting, setIsSubmitting] = useState(false)
- 
 
 15 
  const dispatch = useDispatch()
- 
 
 16 
 
- 
 
 17 
  const { data, isLoading, mutate } = useFetch(dailyPulseUrl, {
- 
 
 18 
    emojis_how_are_you_feel: '',
- 
 
 19 
    emojis_climate_on_your_organization: ''
- 
 
 20 
  })
- 
 
 21 
 
- 
 
 22 
  const saveEmoji = async (url = '') => {
- 
 
 23 
    try {
- 
 
 24 
      setIsSubmitting(true)
- 
 
 25 
      const response = await axios.post(url)
- 
 
 26 
      const { data, success } = response.data
- 
 
 27 
 
- 
 
 28 
      if (!success) {
- 
 
 29 
        const errMsg = typeof data === 'string' ? data : 'Ha ocurrido un error'
- 
 
 30 
        throw new Error(errMsg)
39 
  } = data || {}
 31 
      }
- 
 
 32 
 
- 
 
 33 
      const isClimate = url.includes('climate')
- 
 
 34 
 
- 
 
 35 
      if (isClimate) {
- 
 
 36 
        const selectedEmojis = data.emojis_climate_on_your_organization.filter(
- 
 
 37 
          (emoji) => emoji.link_save === url
- 
 
 38 
        )
- 
 
 39 
        mutate({
- 
 
 40 
          ...data,
- 
 
 41 
          emojis_climate_on_your_organization: selectedEmojis
- 
 
 42 
        })
- 
 
 43 
      } else {
- 
 
 44 
        const selectedEmojis = data.emojis_how_are_you_feel.filter(
- 
 
 45 
          (emoji) => emoji.link_save === url
- 
 
 46 
        )
- 
 
 47 
        mutate({
- 
 
 48 
          ...data,
- 
 
 49 
          emojis_how_are_you_feel: selectedEmojis
40 
  const completed =
 50 
        })
- 
 
 51 
      }
- 
 
 52 
    } catch (error) {
41 
    emojisHowAreYouFeel.length === 1 && emojisClimateOrganization.length === 1
 53 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
Línea 42... Línea 54...
42 
 
 54 
    } finally {
43 
  if (completed) {
 55 
      setIsSubmitting(false)
44 
    return null
 56 
    }
Línea 45... Línea 57...
45 
  }
 57 
  }
- 
 
 58 
 
46 
 
 59 
  return (
- 
 
 60 
    <Widget>
47 
  return (
 61 
      <Widget.Header title='Pulso Diario' />
48 
    <Widget>
 62 
 
49 
      <Widget.Header title='Pulso Diario' />
 63 
      <Widget.Body>
50 
 
 64 
        <LoadingWrapper
51 
      <Widget.Body
 65 
          loading={isLoading || isSubmitting}
52 
        styles={{ textAlign: 'center', '& h4': { fontWeight: 400 } }}
 66 
          displayChildren={isSubmitting}
- 
 
 67 
        >
53 
      >
 68 
          <Typography variant='h4'>¿Como te sientes hoy?</Typography>
54 
        <Emojis
 69 
          <EmojiSelector
- 
 
 70 
            options={data.emojis_how_are_you_feel}
- 
 
 71 
            onSelect={saveEmoji}
55 
          title='¿Como te sientes hoy?'
 72 
          />
56 
          options={emojisHowAreYouFeel}
 73 
 
57 
          onComplete={refetch}
 74 
          <Typography variant='h4'>
- 
 
 75 
            ¿Como esta el clima en la organización?
58 
        />
 76 
          </Typography>
59 
        <Emojis
 77 
          <EmojiSelector
60 
          title='¿Como esta el clima en la organización?'
 78 
            options={data.emojis_climate_on_your_organization}
61 
          options={emojisClimateOrganization}
 79 
            onSelect={saveEmoji}
Línea 62... Línea -...
62 
          onComplete={refetch}
 - 
 
63 
        />
 - 
 
64 
      </Widget.Body>
 - 
 
65 
    </Widget>
 - 
 
66 
  )
 - 
 
67 
}
 - 
 
68 
 
 - 
 
69 
const Emojis = ({ options = [], title = '', onComplete = () => null }) => {
 - 
 
70 
  const [isLoading, setIsLoading] = useState(false)
 - 
 
71 
  const dispatch = useDispatch()
 - 
 
72 
 
 - 
 
73 
  const handleEmojiSave = (url) => {
 - 
 
74 
    if (!url) return
 - 
 
75 
    setIsLoading(true)
 - 
 
76 
 
 - 
 
77 
    axios
 - 
 
78 
      .post(url)
 - 
 
79 
      .then(({ data: responseData }) => {
 - 
 
80 
        const { data, success } = responseData
 - 
 
81 
 
 - 
 
82 
        if (!success) {
 - 
 
83 
          const errorMessage =
 - 
 
84 
            typeof data === 'string' ? data : 'Ha ocurrido un error'
 - 
 
85 
          throw new Error(errorMessage)
 - 
 
86 
        }
 - 
 
87 
 
 - 
 
88 
        onComplete()
 - 
 
89 
      })
 - 
 
90 
      .catch((error) => {
 - 
 
91 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 - 
 
92 
      })
 - 
 
93 
      .finally(() => setIsLoading(false))
 - 
 
94 
  }
 - 
 
95 
 
 - 
 
96 
  return (
 - 
 
97 
    <>
 - 
 
98 
      <h4>{title}</h4>
 - 
 
99 
      <EmojisList>
 - 
 
100 
        {options.map(({ link_save, id, image }, index) => (
 - 
 
101 
          <EmojiItem onClick={() => handleEmojiSave(link_save)} key={id}>
 - 
 
102 
            <img
 - 
 
103 
              className='fadedown'
 - 
 
104 
              src={image}
 - 
 
105 
              style={{ animationDelay: `${index + 10}00ms` }}
 - 
 
106 
            />
 - 
 
107 
          </EmojiItem>
 - 
 
108 
        ))}
 - 
 
109 
      </EmojisList>
 - 
 
110 
      {isLoading && (
 - 
 
111 
        <Box
 - 
 
112 
          sx={{
 - 
 
113 
            position: 'absolute !important',
 - 
 
114 
            top: '50%',
 - 
 
115 
            left: '50%',
 - 
 
116 
            margin: 0,
 - 
 
117 
            transform: 'translate(-50%, -50%)',
 - 
 
118 
            zIndex: 100
 - 
 
119 
          }}
 - 
 
120 
        >
 - 
 
121 
          <Spinner />
 80 
          />