Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2806 Rev 2992
Línea 1... Línea 1...
1 
import React, { useState, useLayoutEffect, useEffect } from 'react'
 1 
import React, { useState } from 'react'
- 
 
 2 
import { Link } from 'react-router-dom'
2 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux'
- 
 
 4 
import {
- 
 
 5 
  Grid,
- 
 
 6 
  IconButton,
- 
 
 7 
  List,
- 
 
 8 
  ListItem,
- 
 
 9 
  ListItemButton,
- 
 
 10 
  ListItemText
3 
import { Grid } from '@mui/material'
 11 
} from '@mui/material'
4 
import styled from 'styled-components'
 12 
import { Delete } from '@mui/icons-material'
5 
 
 13 
 
6 
import { axios } from '../../utils'
 14 
import { axios } from '@utils'
7 
import { getBackendVars } from '../../services/backendVars'
 15 
import { useFetch } from '@hooks'
8 
import { addNotification } from '../../redux/notification/notification.actions'
 16 
import { addNotification } from '@store/notification/notification.actions'
9 
 
 17 
 
10 
import Options from '../../components/UI/Option'
 18 
import Widget from '@components/UI/Widget'
11 
import ConfirmModal from '../../components/modals/ConfirmModal'
 - 
 
12 
import EmptySection from '../../components/UI/EmptySection'
 19 
import Options from '@components/UI/Option'
13 
import ProfileInfo from '../../components/widgets/default/ProfileWidget'
 20 
import ProfileInfo from '@components/widgets/default/ProfileWidget'
14 
import WidgetWrapper from '../../components/widgets/WidgetLayout'
 21 
import EmptySection from '@components/UI/EmptySection'
15 
import NotificationOption from '@app/components/notifications/NotificationOption'
 22 
import ConfirmModal from '@components/modals/ConfirmModal'
16 
 
 - 
 
17 
const StyledNotificationList = styled(WidgetWrapper.Body)`
 - 
 
18 
  max-height: 60vh;
 - 
 
19 
  overflow: auto;
 - 
 
20 
`
 - 
 
Línea 21... Línea 23...
21 
 
 23 
 
- 
 
 24 
const NotificationsPage = () => {
22 
const NotificationsPage = () => {
 25 
  const { data: notifications } = useFetch('/notifications')
23 
  const [userInfo, setuserInfo] = useState({})
 26 
  const { data: user } = useFetch('/helpers/menu')
24 
  const [notifications, setNotifications] = useState([])
 27 
  const [setNotifications] = useState([])
25 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 28 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
Línea 26... Línea 29...
26 
  const dispatch = useDispatch()
 29 
  const dispatch = useDispatch()
Línea 27... Línea -...
27 
 
 - 
 
28 
  const { image, fullName, country, visits, connections } = userInfo
 - 
 
29 
 
 30 
 
30 
  const getNotifications = async () => {
 - 
 
31 
    axios
 - 
 
32 
      .get('/notifications')
 - 
 
33 
      .then(({ data: responseData }) => {
 - 
 
34 
        const { data, success } = responseData
 - 
 
35 
 
 - 
 
36 
        if (!success) {
 - 
 
37 
          const errorMessage =
 - 
 
38 
            typeof data === 'string'
 - 
 
39 
              ? data
 - 
 
40 
              : 'Ha ocurrido un error, por favor intente más tarde'
 - 
 
41 
          throw new Error(errorMessage)
 - 
 
42 
        }
 - 
 
43 
 
 - 
 
44 
        setNotifications(data)
 - 
 
45 
      })
 - 
 
46 
      .catch((err) => {
 - 
 
Línea 47... Línea 31...
47 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 31 
  const { image, fullName, country, visits, connections } = user
48 
      })
 32 
 
49 
  }
 33 
  useFetch('/notifications/mark-all-read')
50 
 
 34 
 
Línea 86... Línea 70...
86 
      .catch((err) => {
 70 
      .catch((err) => {
87 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 71 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
88 
      })
 72 
      })
89 
  }
 73 
  }
Línea 90... Línea -...
90 
 
 - 
 
91 
  const readAllNotification = () => {
 - 
 
92 
    axios
 - 
 
93 
      .post('notifications/mark-all-read')
 - 
 
94 
      .then(({ data: responseData }) => {
 - 
 
95 
        const { data, success } = responseData
 - 
 
96 
 
 - 
 
97 
        if (!success) {
 - 
 
98 
          throw new Error(data)
 - 
 
99 
        }
 - 
 
100 
      })
 - 
 
101 
      .catch((err) => {
 - 
 
102 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 - 
 
103 
      })
 - 
 
104 
  }
 - 
 
105 
 
 74 
 
106 
  const toggleConfirmModal = () => {
 75 
  const toggleConfirmModal = () => {
107 
    setConfirmModalShow(!confirmModalShow)
 76 
    setConfirmModalShow(!confirmModalShow)
Línea 108... Línea -...
108 
  }
 - 
 
109 
 
 - 
 
110 
  useEffect(() => {
 - 
 
111 
    getBackendVars('/helpers/menu')
 - 
 
112 
      .then(
 - 
 
113 
        ({ image, fullName, country, visits, connections, description }) => {
 - 
 
114 
          setuserInfo({
 - 
 
115 
            image,
 - 
 
116 
            fullName,
 - 
 
117 
            country,
 - 
 
118 
            visits,
 - 
 
119 
            connections
 - 
 
120 
          })
 - 
 
121 
        }
 - 
 
122 
      )
 - 
 
123 
      .catch((err) => {
 - 
 
124 
        console.log(err)
 - 
 
125 
      })
 - 
 
126 
  }, [])
 - 
 
127 
 
 - 
 
128 
  useLayoutEffect(() => {
 - 
 
129 
    getNotifications()
 - 
 
130 
    readAllNotification()
 - 
 
131 
  }, [])
 77 
  }
132 
 
 78 
 
133 
  return (
 79 
  return (
134 
    <>
 80 
    <>
135 
      <Grid container spacing={2}>
 81 
      <Grid container spacing={2}>
Línea 141... Línea 87...
141 
            country={country}
 87 
            country={country}
142 
            connections={connections}
 88 
            connections={connections}
143 
          />
 89 
          />
144 
        </Grid>
 90 
        </Grid>
145 
        <Grid item xs={12} md={8}>
 91 
        <Grid item xs={12} md={8}>
146 
          <WidgetWrapper>
 92 
          <Widget>
147 
            <WidgetWrapper.Header title='Notificaciones'>
 93 
            <Widget.Header
148 
              <Options
 94 
              title='Notificaciones'
149 
                options={[
 95 
              renderAction={() => (
150 
                  {
 96 
                <Options>
- 
 
 97 
                  <Options.Item onClick={toggleConfirmModal}>
151 
                    label: 'Borrar notificaciones',
 98 
                    Borrar notificaciones
152 
                    action: toggleConfirmModal
 99 
                  </Options.Item>
153 
                  }
 100 
                </Options>
154 
                ]}
 101 
              )}
155 
              />
 102 
            />
156 
            </WidgetWrapper.Header>
 103 
            <Widget.Body>
157 
 
 - 
 
158 
            <StyledNotificationList>
 - 
 
159 
              {notifications.length ? (
 104 
              {notifications.length === 0 && (
160 
                [...notifications].reverse().map((notification, index) => (
 - 
 
161 
                  <div key={index}>
 - 
 
162 
                    <NotificationOption
 - 
 
163 
                      {...notification}
 - 
 
164 
                      onDelete={deleteNotification}
 - 
 
165 
                    />
 - 
 
166 
                  </div>
 - 
 
167 
                ))
 - 
 
168 
              ) : (
 - 
 
169 
                <EmptySection message='No hay notificaciones' align='center' />
 105 
                <EmptySection message='No hay notificaciones' align='center' />
170 
              )}
 106 
              )}
- 
 
 107 
 
- 
 
 108 
              <List>
- 
 
 109 
                {notifications.map(({ link, message, time_elapsed }) => (
- 
 
 110 
                  <ListItem
- 
 
 111 
                    key={link}
- 
 
 112 
                    secondaryAction={
- 
 
 113 
                      <IconButton onClick={deleteNotification}>
- 
 
 114 
                        <Delete />
- 
 
 115 
                      </IconButton>
- 
 
 116 
                    }
- 
 
 117 
                  >
- 
 
 118 
                    <ListItemButton LinkComponent={Link} to={link}>
- 
 
 119 
                      <ListItemText
- 
 
 120 
                        primary={message}
- 
 
 121 
                        secondary={time_elapsed}
- 
 
 122 
                      />
- 
 
 123 
                    </ListItemButton>
- 
 
 124 
                  </ListItem>
- 
 
 125 
                ))}
- 
 
 126 
              </List>
171 
            </StyledNotificationList>
 127 
            </Widget.Body>
172 
          </WidgetWrapper>
 128 
          </Widget>
173 
        </Grid>
 129 
        </Grid>
174 
      </Grid>
 130 
      </Grid>
Línea 175... Línea 131...
175 
 
 131 
 
176 
      <ConfirmModal
 132 
      <ConfirmModal