Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 3276 Rev 3277
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from 'react';
 - 
 
3 
import { useState } from 'react';
 2 
import React, { useState, useLayoutEffect, useRef } from 'react';
4 
import { useLayoutEffect } from 'react';
 3 
import { axios } from '../utils';
5 
import { connect } from 'react-redux';
 4 
import { connect } from 'react-redux';
- 
 
 5 
import { BiDotsVerticalRounded } from 'react-icons/bi';
- 
 
 6 
import { BsTrash, BsEye } from 'react-icons/bs';
- 
 
 7 
import { addNotification } from '../redux/notification/notification.actions';
6 
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo';
 8 
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo';
7 
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks';
 9 
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks';
8 
import { addNotification } from '../redux/notification/notification.actions';
 - 
 
9 
import { axios } from '../utils';
 - 
 
Línea 10... Línea 10...
10 
 
 10 
 
Línea 11... Línea 11...
11 
const Notifications = ({ backendVars }) => {
 11 
const Notifications = ({ backendVars }) => {
12 
 
 12 
 
- 
 
 13 
  const { image, fullName, country, visits, connections, description } = backendVars
- 
 
 14 
  const [notifications, setNotifications] = useState([])
Línea 13... Línea 15...
13 
  const { image, fullName, country, visits, connections, description } = backendVars
 15 
  const [displayOption, setDisplayOption] = useState(false)
14 
  const [notifications, setNotifications] = useState([]);
 16 
  const menuOptions = useRef(null)
15 
 
 17 
 
16 
  const handleNotifications = async () => {
 18 
  const handleNotifications = async () => {
17 
    try {
 - 
 
18 
      const _notifications = await axios.get('/notifications');
 19 
    try {
19 
      setNotifications(_notifications.data.data)
 20 
      const _notifications = await axios.get('/notifications')
20 
      console.log('>>: _notifications ', notifications)
 21 
      setNotifications(_notifications.data.data)
21 
    } catch (error) {
 22 
    } catch (error) {
Línea 22... Línea 23...
22 
      console.log('>>: error > ', error)
 23 
      console.log('>>: error > ', error)
23 
    }
 24 
    }
24 
  }
 25 
  }
- 
 
 26 
 
25 
 
 27 
  const markReadNotifications = () => {
26 
  const markReadNotifications = () => {
 28 
    axios.post('/notifications/mark-all-read')
27 
    axios.post('/notifications/mark-all-read')
 29 
      .then(({ data }) => {
28 
      .then(({ data }) => {
 30 
        !data.success
29 
        !data.success && addNotification({ style: 'danger', msg: data.data })
 31 
          ? addNotification({ style: 'danger', msg: data.data })
30 
        addNotification({ style: 'success', msg: data.data })
 32 
          : addNotification({ style: 'success', msg: data.data })
31 
      })
 33 
      })
32 
      .catch(err => {
 34 
      .catch(err => {
33 
        addNotification({
 35 
        addNotification({
34 
          style: "danger",
 36 
          style: "danger",
35 
          msg: 'Disculpe, ha ocurrido un error marcando notificaciones como leidas',
 37 
          msg: 'Disculpe, ha ocurrido un error marcando notificaciones como leidas',
Línea -... Línea 38...
- 
 
 38 
        })
- 
 
 39 
        console.log('>>: err > ', err)
- 
 
 40 
      })
- 
 
 41 
  }
- 
 
 42 
 
- 
 
 43 
  const deleteNotifications = () => {
- 
 
 44 
    axios.post('/notifications/clear')
- 
 
 45 
      .then(({ data }) => {
- 
 
 46 
        !data.success && addNotification({ style: 'danger', msg: data.data })
- 
 
 47 
        addNotification({ style: 'success', msg: data.data })
- 
 
 48 
        setNotifications([])
- 
 
 49 
      })
- 
 
 50 
      .catch(err => addNotification({ style: "danger", msg: `Error: ${err}` }))
- 
 
 51 
  }
- 
 
 52 
 
- 
 
 53 
  useLayoutEffect(() => {
- 
 
 54 
    const handleClickOutside = (event) => {
- 
 
 55 
      if (menuOptions.current && !menuOptions.current.contains(event.target)) {
- 
 
 56 
        setDisplayOption(false)
- 
 
 57 
      }
- 
 
 58 
    }
- 
 
 59 
    document.addEventListener("mousedown", handleClickOutside);
- 
 
 60 
 
36 
        })
 61 
    return () => {
37 
        console.log('>>: err > ', err)
 62 
      document.removeEventListener("mousedown", handleClickOutside);
38 
      })
 63 
    };
Línea 39... Línea 64...
39 
  }
 64 
  }, [menuOptions]);
40 
 
 65 
 
41 
  useLayoutEffect(() => {
 66 
  useLayoutEffect(() => {
Línea 56... Línea 81...
56 
          />
 81 
          />
57 
          <SocialNetworks />
 82 
          <SocialNetworks />
58 
        </div>
 83 
        </div>
59 
        <div className="card-body">
 84 
        <div className="card-body">
60 
          <div className="container">
 85 
          <div className="container">
61 
            <h2
 - 
 
62 
              className="card-title"
 - 
 
63 
              style={{ fontSize: '1.7rem', fontWeight: '700' }}
 - 
 
64 
            >
 - 
 
65 
              Notificaciones
 - 
 
66 
            </h2>
 - 
 
67 
            <div className="messages-sec border-gray px-5 py-4">
 86 
            <div className="messages-sec border-gray px-5 py-4">
- 
 
 87 
              <div className="d-flex align-items-center justify-content-between">
- 
 
 88 
                <h2 className="card-title" style={{ fontSize: '1.7rem', fontWeight: '700' }}>
- 
 
 89 
                  Notificaciones
- 
 
 90 
                </h2>
- 
 
 91 
                <div className="cursor-pointer d-flex align-items-center">
- 
 
 92 
                  <BiDotsVerticalRounded
- 
 
 93 
                    onClick={() => setDisplayOption(!displayOption)}
- 
 
 94 
                    style={{ fontSize: '1.5rem' }}
- 
 
 95 
                  />
- 
 
 96 
                  <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >
- 
 
 97 
                    <ul>
- 
 
 98 
                      <li>
- 
 
 99 
                        <button
- 
 
 100 
                          className="option-btn"
- 
 
 101 
                          onClick={deleteNotifications}
- 
 
 102 
                        >
- 
 
 103 
                          <BsTrash className="mr-1" />
- 
 
 104 
                          Borrar notificaciones
- 
 
 105 
                        </button>
- 
 
 106 
                      </li>
- 
 
 107 
                      <li>
- 
 
 108 
                        <button
- 
 
 109 
                          className="option-btn"
- 
 
 110 
                          onClick={markReadNotifications}
- 
 
 111 
                        >
- 
 
 112 
                          <BsEye className="mr-1" />
- 
 
 113 
                          Marcar notificaciones como leídas
- 
 
 114 
                        </button>
- 
 
 115 
                      </li>
- 
 
 116 
                    </ul>
- 
 
 117 
                  </div>
- 
 
 118 
                </div>
- 
 
 119 
              </div>
68 
              <ul>
 120 
              <ul>
69 
                {notifications.length
 121 
                {notifications.length
70 
                  ? [...notifications].reverse().map((element, i) =>
 122 
                  ? [...notifications].reverse().map((element, i) =>
71 
                    <li key={i}>
 123 
                    <li key={i}>
72 
                      <div className="notification-item">
 124 
                      <div className="notification-item">