Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5374 Rev 5380
Línea 7... Línea 7...
7 
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks'
 7 
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks'
8 
import ConfirmModal from '../shared/confirm-modal/ConfirmModal'
 8 
import ConfirmModal from '../shared/confirm-modal/ConfirmModal'
Línea 9... Línea 9...
9 
 
 9 
 
10 
import { useDispatch } from 'react-redux'
 10 
import { useDispatch } from 'react-redux'
11 
import { addNotification } from '../redux/notification/notification.actions'
 11 
import { addNotification } from '../redux/notification/notification.actions'
12 
import ProfileInfo from '../shared/profile/edit/profile-info/ProfileInfo'
 - 
 
Línea 13... Línea 12...
13 
import { profileTypes } from '../shared/profile/Profile.types'
 12 
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo'
14 
 
 13 
 
15 
const Notifications = ({ backendVars }) => {
 14 
const Notifications = ({ backendVars }) => {
16 
  const { image, uuid } = backendVars
 15 
  const { image, fullName, country, visits, connections, description } = backendVars
17 
  const [notifications, setNotifications] = useState([])
 16 
  const [notifications, setNotifications] = useState([])
18 
  const [displayOption, setDisplayOption] = useState(false)
 17 
  const [displayOption, setDisplayOption] = useState(false)
19 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 18 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
Línea 34... Línea 33...
34 
    } catch (error) {
 33 
    } catch (error) {
35 
      console.log('>>: error > ', error)
 34 
      console.log('>>: error > ', error)
36 
    }
 35 
    }
37 
  }
 36 
  }
Línea 38... Línea -...
38 
 
 - 
 
39 
  const markReadNotifications = () => {
 - 
 
40 
    axios.post('/notifications/mark-all-read')
 - 
 
41 
      .then(({ data }) => {
 - 
 
42 
        !data.success
 - 
 
43 
          ? dispatch(addNotification({ style: 'danger', msg: data.data }))
 - 
 
44 
          : dispatch(addNotification({ style: 'success', msg: data.data }))
 - 
 
45 
      })
 - 
 
46 
      .catch(err => {
 - 
 
47 
        dispatch(addNotification({
 - 
 
48 
          style: 'danger',
 - 
 
49 
          msg: 'Disculpe, ha ocurrido un error marcando notificaciones como leidas'
 - 
 
50 
        }))
 - 
 
51 
        console.log('>>: err > ', err)
 - 
 
52 
      })
 - 
 
53 
  }
 - 
 
54 
 
 37 
 
55 
  const deleteAllNotifications = () => {
 38 
  const deleteAllNotifications = () => {
56 
    axios.post('/notifications/clear')
 39 
    axios.post('/notifications/clear')
57 
      .then(({ data }) => {
 40 
      .then(({ data }) => {
58 
        if (!data.success) dispatch(addNotification({ style: 'danger', msg: data.data }))
 41 
        if (!data.success) dispatch(addNotification({ style: 'danger', msg: data.data }))
Línea 91... Línea 74...
91 
    handleNotifications()
 74 
    handleNotifications()
92 
  }, [])
 75 
  }, [])
Línea 93... Línea 76...
93 
 
 76 
 
94 
  return (
 77 
  return (
95 
    <>
 - 
 
96 
      <section className="notifications-page">
 78 
    <>
97 
        <div className="notifications-grid">
 79 
      <main className="notifications-grid container">
98 
          <div className='main-left-sidebar d-none d-md-flex'>
 80 
        <aside className='main-left-sidebar d-none d-md-flex'>
99 
            <ProfileInfo
 81 
          <ProfileInfo
- 
 
 82 
            image={image}
- 
 
 83 
            fullName={fullName}
100 
              entityId={uuid}
 84 
            description={description}
- 
 
 85 
            visits={visits}
- 
 
 86 
            country={country}
101 
              image={image}
 87 
            connections={connections}
102 
            />
 88 
          />
103 
            <SocialNetworks />
 89 
          <SocialNetworks />
104 
          </div>
 90 
        </aside>
105 
          <div className="notification-list">
 91 
        <div className="notification-list">
106 
            <div className="notification-header">
 - 
 
107 
              <h2>
 92 
          <div className="notification-header">
108 
                Notificaciones
 - 
 
109 
              </h2>
 93 
            <h2>Notificaciones</h2>
110 
              <div className="cursor-pointer d-flex align-items-center">
 94 
            <div className="cursor-pointer d-flex align-items-center">
111 
                <BiDotsVerticalRounded
 95 
              <BiDotsVerticalRounded
112 
                  onClick={() => setDisplayOption(!displayOption)}
 96 
                onClick={() => setDisplayOption(!displayOption)}
113 
                  style={{ fontSize: '1.5rem' }}
 97 
                style={{ fontSize: '1.5rem' }}
114 
                />
 98 
              />
115 
                <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >
 99 
              <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >
116 
                  <ul>
 100 
                <ul>
117 
                    <li>
 101 
                  <li>
118 
                      <button
 102 
                    <button
119 
                        className="option-btn"
 103 
                      className="option-btn"
120 
                        onClick={handleConfirmModalShow}
 104 
                      onClick={handleConfirmModalShow}
121 
                      >
 105 
                    >
122 
                        <i className="fa fa-trash-o mr-1" />
 106 
                      <i className="fa fa-trash-o mr-1" />
123 
                        Borrar notificaciones
 107 
                      Borrar notificaciones
124 
                      </button>
 108 
                    </button>
125 
                    </li>
 109 
                  </li>
126 
                  </ul>
 - 
 
127 
                </div>
 110 
                </ul>
128 
              </div>
 111 
              </div>
129 
            </div>
 - 
 
130 
            <ul>
 - 
 
131 
              {notifications.length
 - 
 
132 
                ? [...notifications].reverse().map((element, index) =>
 - 
 
133 
                  <li key={index}>
 - 
 
134 
                    <div className="notification-item">
 - 
 
135 
                      <div className="d-flex align-items-center justify-content-between" style={{ gap: '.5rem' }}>
 - 
 
136 
                        <a href={element.link}>
 - 
 
137 
                          {element.message}
 - 
 
138 
                        </a>
 - 
 
139 
                        <DeleteOutline className='cursor-pointer' onClick={() => deleteNotification(element.link_delete)} />
 - 
 
140 
                      </div>
 - 
 
141 
                      <span>
 - 
 
142 
                        {element.time_elapsed}
 - 
 
143 
                      </span>
 - 
 
144 
                    </div>
 - 
 
145 
                  </li>
 - 
 
146 
                  )
 - 
 
147 
                : <div className="empty-section">
 - 
 
148 
                  <h2>No hay notificaciones</h2>
 - 
 
149 
                </div>
 - 
 
150 
              }
 - 
 
151 
            </ul>
 112 
            </div>
- 
 
 113 
          </div>
- 
 
 114 
          <ul>
- 
 
 115 
            {notifications.length
- 
 
 116 
              ? [...notifications].reverse().map((element, index) =>
- 
 
 117 
                <li key={index}>
- 
 
 118 
                  <div className="notification-item">
- 
 
 119 
                    <div className="d-flex align-items-center justify-content-between" style={{ gap: '.5rem' }}>
- 
 
 120 
                      <a href={element.link}>
- 
 
 121 
                        {element.message}
- 
 
 122 
                      </a>
- 
 
 123 
                      <DeleteOutline className='cursor-pointer' onClick={() => deleteNotification(element.link_delete)} />
- 
 
 124 
                    </div>
- 
 
 125 
                    <span>
- 
 
 126 
                      {element.time_elapsed}
- 
 
 127 
                    </span>
- 
 
 128 
                  </div>
- 
 
 129 
                </li>
- 
 
 130 
                )
- 
 
 131 
              : <div className="empty-section">
- 
 
 132 
                <h2>No hay notificaciones</h2>
- 
 
 133 
              </div>
- 
 
 134 
            }
152 
          </div>
 135 
          </ul>
153 
        </div>
 136 
        </div>
154 
      </section >
 137 
      </main>
155 
      <ConfirmModal
 138 
      <ConfirmModal
156 
        show={confirmModalShow}
 139 
        show={confirmModalShow}
157 
        onClose={handleConfirmModalShow}
 140 
        onClose={handleConfirmModalShow}
158 
        onAccept={handleAccept}
 141 
        onAccept={handleAccept}