Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 3282 Rev 3311
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useState, useLayoutEffect, useRef } from 'react';
 2 
import React, { useState, useLayoutEffect, useRef } from 'react';
3 
import { axios } from '../utils';
 3 
import { axios } from '../utils';
4 
import { connect } from 'react-redux';
 4 
import { connect } from 'react-redux';
5 
import { BiDotsVerticalRounded } from 'react-icons/bi';
 5 
import { BiDotsVerticalRounded } from 'react-icons/bi';
6 
import { FaTrash, FaEye } from 'react-icons/fa';
 6 
import { FaTrash } from 'react-icons/fa';
7 
import { addNotification } from '../redux/notification/notification.actions';
 7 
import { addNotification } from '../redux/notification/notification.actions';
8 
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo';
 8 
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo';
9 
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks';
 9 
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks';
- 
 
 10 
import ConfirmModal from '../shared/confirm-modal/ConfirmModal';
Línea 10... Línea 11...
10 
 
 11 
 
Línea 11... Línea 12...
11 
const Notifications = ({ backendVars }) => {
 12 
const Notifications = ({ backendVars }) => {
12 
 
 13 
 
13 
  const { image, fullName, country, visits, connections, description } = backendVars
 14 
  const { image, fullName, country, visits, connections, description } = backendVars
- 
 
 15 
  const [notifications, setNotifications] = useState([])
14 
  const [notifications, setNotifications] = useState([])
 16 
  const [displayOption, setDisplayOption] = useState(false)
Línea -... Línea 17...
- 
 
 17 
  const [confirmModalShow, setConfirmModalShow] = useState(false);
- 
 
 18 
  const menuOptions = useRef(null)
15 
  const [displayOption, setDisplayOption] = useState(false)
 19 
 
16 
  const menuOptions = useRef(null)
 20 
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
17 
 
 21 
 
18 
  const handleNotifications = async () => {
 22 
  const handleNotifications = async () => {
19 
    try {
 23 
    try {
Línea 41... Línea 45...
41 
  }
 45 
  }
Línea 42... Línea 46...
42 
 
 46 
 
43 
  const deleteAllNotifications = () => {
 47 
  const deleteAllNotifications = () => {
44 
    axios.post('/notifications/clear')
 48 
    axios.post('/notifications/clear')
45 
      .then(({ data }) => {
 49 
      .then(({ data }) => {
46 
        !data.success && addNotification({ style: 'danger', msg: data.data })
 50 
        if (!data.success) addNotification({ style: 'danger', msg: data.data })
47 
        addNotification({ style: 'success', msg: data.data })
 51 
        addNotification({ style: 'success', msg: data.data })
48 
        setNotifications([])
 52 
        setNotifications([])
49 
      })
 53 
      })
50 
      .catch(err => addNotification({ style: "danger", msg: `Error: ${err}` }))
 54 
      .catch(err => addNotification({ style: "danger", msg: `Error: ${err}` }))
Línea 66... Línea 70...
66 
  useLayoutEffect(() => {
 70 
  useLayoutEffect(() => {
67 
    handleNotifications()
 71 
    handleNotifications()
68 
  }, []);
 72 
  }, []);
Línea 69... Línea 73...
69 
 
 73 
 
- 
 
 74 
  return (
70 
  return (
 75 
    <>
71 
    <section className="notifications-page">
 76 
      <section className="notifications-page">
72 
      <div className="card notifications-grid">
 77 
        <div className="card notifications-grid">
73 
        <div className='main-left-sidebar' style={{ marginTop: '1.25rem' }}>
 78 
          <div className='main-left-sidebar' style={{ marginTop: '1.25rem' }}>
74 
          <ProfileInfo
 79 
            <ProfileInfo
75 
            image={image}
 80 
              image={image}
76 
            fullName={fullName}
 81 
              fullName={fullName}
77 
            description={description}
 82 
              description={description}
78 
            visits={visits}
 83 
              visits={visits}
79 
            country={country}
 84 
              country={country}
80 
            connections={connections}
 85 
              connections={connections}
81 
          />
 86 
            />
82 
          <SocialNetworks />
 87 
            <SocialNetworks />
83 
        </div>
 88 
          </div>
84 
        <div className="card-body">
 89 
          <div className="card-body">
85 
          <div className="container">
 90 
            <div className="container">
86 
            <div className="messages-sec border-gray px-5 py-4">
 91 
              <div className="messages-sec border-gray px-5 py-4">
87 
              <div className="d-flex align-items-center justify-content-between position-relative mb-3">
 92 
                <div className="d-flex align-items-center justify-content-between position-relative mb-3">
88 
                <h2 className="card-title" style={{ fontSize: '1.7rem', fontWeight: '700' }}>
 93 
                  <h2 className="card-title" style={{ fontSize: '1.7rem', fontWeight: '700' }}>
89 
                  Notificaciones
 94 
                    Notificaciones
90 
                </h2>
 95 
                  </h2>
91 
                <div className="cursor-pointer d-flex align-items-center">
 96 
                  <div className="cursor-pointer d-flex align-items-center">
92 
                  <BiDotsVerticalRounded
 97 
                    <BiDotsVerticalRounded
93 
                    onClick={() => setDisplayOption(!displayOption)}
 98 
                      onClick={() => setDisplayOption(!displayOption)}
94 
                    style={{ fontSize: '1.5rem' }}
 99 
                      style={{ fontSize: '1.5rem' }}
95 
                  />
 100 
                    />
96 
                  <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >
 101 
                    <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >
97 
                    <ul>
 102 
                      <ul>
98 
                      <li>
 103 
                        <li>
99 
                        <button
 104 
                          <button
100 
                          className="option-btn mb-2"
 105 
                            className="option-btn mb-2"
101 
                          onClick={deleteAllNotifications}
 106 
                            onClick={deleteAllNotifications}
102 
                        >
 107 
                          >
103 
                          <FaTrash className="mr-1" />
 108 
                            <FaTrash className="mr-1" />
104 
                          Borrar notificaciones
 109 
                            Borrar notificaciones
105 
                        </button>
 110 
                          </button>
106 
                      </li>
 111 
                        </li>
- 
 
 112 
                      </ul>
107 
                    </ul>
 113 
                    </div>
108 
                  </div>
 114 
                  </div>
109 
                </div>
 - 
 
110 
              </div>
 115 
                </div>
111 
              <ul>
 116 
                <ul>
112 
                {notifications.length
 117 
                  {notifications.length
113 
                  ? [...notifications].reverse().map((element, i) =>
 118 
                    ? [...notifications].reverse().map((element, i) =>
114 
                    <li key={i}>
 119 
                      <li key={i}>
115 
                      <div className="notification-item">
 120 
                        <div className="notification-item">
116 
                        <div className="d-inline-flex flex-column">
 121 
                          <div className="d-inline-flex flex-column">
117 
                          <a href={element.link} className='mb-1'>
 122 
                            <a href={element.link} className='mb-1'>
118 
                            {element.message}
 123 
                              {element.message}
119 
                          </a>
 124 
                            </a>
120 
                          <span>
 125 
                            <span>
121 
                            {element.time_elapsed}
 126 
                              {element.time_elapsed}
- 
 
 127 
                            </span>
122 
                          </span>
 128 
                          </div>
123 
                        </div>
 129 
                        </div>
124 
                      </div>
 - 
 
125 
                    </li>
 130 
                      </li>
126 
                  )
 131 
                    )
127 
                  :
 132 
                    :
128 
                  <div
 133 
                    <div
129 
                    className="section_admin_title_buttons w-100"
 134 
                      className="section_admin_title_buttons w-100"
130 
                    style={{ display: 'grid', placeItems: 'center' }}
 135 
                      style={{ display: 'grid', placeItems: 'center' }}
131 
                  >
 136 
                    >
132 
                    <h1 className="title">No hay notificaciones</h1>
 137 
                      <h1 className="title">No hay notificaciones</h1>
133 
                  </div>
 138 
                    </div>
134 
                }
 139 
                  }
- 
 
 140 
                </ul>
135 
              </ul>
 141 
              </div>
136 
            </div>
 142 
            </div>
137 
          </div>
 143 
          </div>
- 
 
 144 
        </div>
- 
 
 145 
      </section >
- 
 
 146 
      <ConfirmModal
- 
 
 147 
        show={confirmModalShow}
- 
 
 148 
        onClose={handleConfirmModalShow}
138 
        </div>
 149 
        onAccept={deleteAllNotifications}
139 
      </div>
 150 
      />
140 
    </section >
 151 
    </>
141 
  )
 152 
  )
142 
}
 153 
}
143 
const mapDispatchToProps = {
 154 
const mapDispatchToProps = {
144 
  addNotification: (notification) => addNotification(notification)
 155 
  addNotification: (notification) => addNotification(notification)