Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 644 Rev 670
Línea 2... Línea 2...
2 
import { axios } from '../../utils'
 2 
import { axios } from '../../utils'
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux'
4 
import { getBackendVars } from '../../services/backendVars'
 4 
import { getBackendVars } from '../../services/backendVars'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import { Col, Container, Row } from 'react-bootstrap'
 6 
import { Col, Container, Row } from 'react-bootstrap'
- 
 
 7 
import { Link } from 'react-router-dom'
- 
 
 8 
import { IconButton } from '@mui/material'
7 
import DeleteOutline from '@mui/icons-material/DeleteOutline'
 9 
import DeleteOutline from '@mui/icons-material/DeleteOutline'
Línea 8... Línea 10...
8 
 
 10 
 
9 
import Options from '../../components/UI/Option'
 11 
import Options from '../../components/UI/Option'
10 
import ConfirmModal from '../../components/modals/ConfirmModal'
 12 
import ConfirmModal from '../../components/modals/ConfirmModal'
Línea 21... Línea 23...
21 
    userInfo
 23 
    userInfo
Línea 22... Línea 24...
22 
 
 24 
 
23 
  const getNotifications = async () => {
 25 
  const getNotifications = async () => {
24 
    axios
 26 
    axios
25 
      .get('/notifications')
 27 
      .get('/notifications')
26 
      .then((response) => {
 28 
      .then(({ data: responseData }) => {
Línea 27... Línea 29...
27 
        const { data, success } = response.data
 29 
        const { data, success } = responseData
28 
 
 30 
 
29 
        if (!success) {
 31 
        if (!success) {
30 
          const errorMessage =
 32 
          const errorMessage =
31 
            typeof data === 'string'
 33 
            typeof data === 'string'
32 
              ? data
 34 
              ? data
33 
              : 'Ha ocurrido un error, por favor intente más tarde'
 - 
 
34 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 35 
              : 'Ha ocurrido un error, por favor intente más tarde'
Línea 35... Línea 36...
35 
          return
 36 
          throw new Error(errorMessage)
36 
        }
 37 
        }
37 
 
 38 
 
38 
        setNotifications(data)
 39 
        setNotifications(data)
39 
      })
 40 
      })
40 
      .catch((error) => {
 41 
      .catch((err) => {
Línea 41... Línea 42...
41 
        console.log('>>: error > ', error)
 42 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
42 
      })
 43 
      })
43 
  }
 44 
  }
44 
 
 45 
 
45 
  const deleteAllNotifications = () => {
 46 
  const deleteAllNotifications = () => {
- 
 
 47 
    axios
46 
    axios
 48 
      .post('/notifications/clear')
47 
      .post('/notifications/clear')
 - 
 
48 
      .then((response) => {
 49 
      .then(({ data: responseData }) => {
49 
        const { data, success } = response.data
 50 
        const { data, success } = responseData
Línea 50... Línea 51...
50 
        if (!success) {
 51 
 
51 
          dispatch(addNotification({ style: 'danger', msg: data }))
 52 
        if (!success) {
52 
          return
 53 
          throw new Error(data)
53 
        }
 54 
        }
54 
 
 55 
 
55 
        dispatch(addNotification({ style: 'success', msg: data }))
 - 
 
56 
        setNotifications([])
 56 
        dispatch(addNotification({ style: 'success', msg: data }))
57 
      })
 57 
        setNotifications([])
Línea 58... Línea 58...
58 
      .catch((err) => {
 58 
      })
59 
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
 59 
      .catch((err) => {
60 
        throw new Error(err)
 60 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
61 
      })
 61 
      })
62 
  }
 62 
  }
Línea 63... Línea 63...
63 
 
 63 
 
64 
  const deleteNotification = (url) => {
 - 
 
65 
    axios
 64 
  const deleteNotification = (url) => {
66 
      .post(url)
 65 
    axios
Línea 67... Línea 66...
67 
      .then((response) => {
 66 
      .post(url)
68 
        const { data, success } = response.data
 67 
      .then(({ data: responseData }) => {
69 
 
 68 
        const { data, success } = responseData
Línea 70... Línea 69...
70 
        if (!success) {
 69 
 
71 
          dispatch(addNotification({ style: 'danger', msg: data }))
 70 
        if (!success) {
72 
          return
 71 
          throw new Error(data)
73 
        }
 72 
        }
74 
 
 73 
 
75 
        const newNotifications = notifications.filter(
 - 
 
76 
          ({ link_delete }) => link_delete !== url
 74 
        const newNotifications = notifications.filter(
77 
        )
 75 
          ({ link_delete }) => link_delete !== url
Línea 78... Línea 76...
78 
 
 76 
        )
79 
        setNotifications(newNotifications)
 77 
 
80 
        dispatch(addNotification({ style: 'success', msg: data }))
 78 
        setNotifications(newNotifications)
81 
      })
 79 
        dispatch(addNotification({ style: 'success', msg: data }))
82 
      .catch((err) => {
 80 
      })
Línea 83... Línea 81...
83 
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
 81 
      .catch((err) => {
84 
        throw new Error(err)
 82 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
85 
      })
 83 
      })
86 
  }
 84 
  }
87 
 
 85 
 
88 
  const readAllNotification = () => {
 86 
  const readAllNotification = () => {
89 
    axios
 - 
 
90 
      .post('notifications/mark-all-read')
 87 
    axios
91 
      .then((response) => {
 88 
      .post('notifications/mark-all-read')
Línea 92... Línea 89...
92 
        const { data, success } = response.data
 89 
      .then(({ data: responseData }) => {
93 
 
 90 
        const { data, success } = responseData
Línea 113... Línea 110...
113 
            image,
 110 
            image,
114 
            full_name,
 111 
            full_name,
115 
            country,
 112 
            country,
116 
            visits,
 113 
            visits,
117 
            connections,
 114 
            connections,
118 
            description,
 115 
            description
119 
          })
 116 
          })
120 
        }
 117 
        }
121 
      )
 118 
      )
122 
      .catch((err) => {
 119 
      .catch((err) => {
123 
        console.log(err)
 120 
        console.log(err)
124 
        throw new Error(err)
 - 
 
125 
      })
 121 
      })
126 
  }, [])
 122 
  }, [])
Línea 127... Línea 123...
127 
 
 123 
 
128 
  useLayoutEffect(() => {
 124 
  useLayoutEffect(() => {
129 
    getNotifications()
 125 
    getNotifications()
130 
    readAllNotification()
 126 
    readAllNotification()
Línea 131... Línea 127...
131 
  }, [])
 127 
  }, [])
132 
 
 128 
 
133 
  return (
 129 
  return (
134 
    <>
 130 
    <>
135 
      <Container as="main">
 131 
      <Container as='main'>
136 
        <Row>
 132 
        <Row>
137 
          <Col as="aside" md="4" className="d-none d-md-flex">
 133 
          <Col as='aside' md='4' className='d-none d-md-flex'>
138 
            <ProfileInfo
 134 
            <ProfileInfo
139 
              image={image}
 135 
              image={image}
140 
              fullName={fullName}
 136 
              fullName={fullName}
141 
              description={description}
 137 
              description={description}
142 
              visits={visits}
 138 
              visits={visits}
143 
              country={country}
 139 
              country={country}
144 
              connections={connections}
 140 
              connections={connections}
145 
            />
 141 
            />
146 
          </Col>
 142 
          </Col>
147 
          <Col as="section" md="8" className="notification-list">
 143 
          <Col as='section' md='8' className='notification-list'>
148 
            <div className="notification-header position-relative">
 144 
            <div className='notification-header position-relative'>
149 
              <h2>Notificaciones</h2>
 145 
              <h2>Notificaciones</h2>
150 
              <Options
 146 
              <Options
151 
                options={[
 147 
                options={[
152 
                  {
 148 
                  {
153 
                    label: 'Borrar notificaciones',
 149 
                    label: 'Borrar notificaciones',
154 
                    action: toggleConfirmModal,
 150 
                    action: toggleConfirmModal
155 
                  },
 151 
                  }
156 
                ]}
 152 
                ]}
157 
              />
 153 
              />
158 
            </div>
 154 
            </div>
159
155 
 
160 
              {notifications.length ? (
 156 
            {notifications.length ? (
161 
                [...notifications].reverse().map((notification, index) => (
 157 
              [...notifications].reverse().map((notification, index) => (
162 
                  <div key={index}>
 158 
                <div key={index}>
163 
                    <NotificationsPage.Item
 159 
                  <NotificationsPage.Item
164 
                      onDelete={deleteNotification}
 160 
                    onDelete={deleteNotification}
165 
                      {...notification}
 161 
                    {...notification}
166 
                    />
 162 
                  />
167 
                  </div>
 163 
                </div>
168 
                ))
 164 
              ))
169 
              ) : (
 165 
            ) : (
170 
                <EmptySection message="No hay notificaciones" align="center" />
 - 
 
171 
              )}
 166 
              <EmptySection message='No hay notificaciones' align='center' />
172
167 
            )}
173 
          </Col>
 168 
          </Col>
174 
        </Row>
 169 
        </Row>
175 
      </Container>
 170 
      </Container>
Línea 185... Línea 180...
185 
  )
 180 
  )
186 
}
 181 
}
Línea 187... Línea 182...
187 
 
 182 
 
188 
const Item = ({ link_delete, link, message, time_elapsed, onDelete }) => {
 183 
const Item = ({ link_delete, link, message, time_elapsed, onDelete }) => {
189 
  return (
 184 
  return (
190 
    <div className="notification-item">
 185 
    <div className='notification-item'>
191 
      <div className="d-flex align-items-center justify-content-between m-0 p-0">
 186 
      <div className='d-flex align-items-center justify-content-between m-0 p-0'>
192 
        <a href={link}>{message}</a>
 - 
 
193 
        <DeleteOutline
 187 
        <Link to={link}>{message}</Link>
194 
          className="cursor-pointer"
 188 
        <IconButton onClick={() => onDelete(link_delete)}>
195 
          onClick={() => onDelete(link_delete)}
 189 
          <DeleteOutline />
196 
        />
 190 
        </IconButton>
197 
      </div>
 191 
      </div>
198 
      <span>{time_elapsed}</span>
 192 
      <span>{time_elapsed}</span>
199 
      <hr />
 193 
      <hr />
200 
    </div>
 194 
    </div>