Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5380 Rev 5933
Línea 10... Línea 10...
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 '../dashboard/components/home-section/ProfileInfo'
 12 
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo'
Línea 13... Línea 13...
13 
 
 13 
 
14 
const Notifications = ({ backendVars }) => {
 14 
const Notifications = ({ backendVars }) => {
- 
 
 15 
  const { image, fullName, country, visits, connections, description } =
15 
  const { image, fullName, country, visits, connections, description } = backendVars
 16 
    backendVars
16 
  const [notifications, setNotifications] = useState([])
 17 
  const [notifications, setNotifications] = useState([])
17 
  const [displayOption, setDisplayOption] = useState(false)
 18 
  const [displayOption, setDisplayOption] = useState(false)
18 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 19 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
19 
  const dispatch = useDispatch()
 20 
  const dispatch = useDispatch()
Línea 34... Línea 35...
34 
      console.log('>>: error > ', error)
 35 
      console.log('>>: error > ', error)
35 
    }
 36 
    }
36 
  }
 37 
  }
Línea 37... Línea 38...
37 
 
 38 
 
- 
 
 39 
  const deleteAllNotifications = () => {
38 
  const deleteAllNotifications = () => {
 40 
    axios
39 
    axios.post('/notifications/clear')
 41 
      .post('/notifications/clear')
- 
 
 42 
      .then(({ data }) => {
40 
      .then(({ data }) => {
 43 
        if (!data.success)
41 
        if (!data.success) dispatch(addNotification({ style: 'danger', msg: data.data }))
 44 
          dispatch(addNotification({ style: 'danger', msg: data.data }))
42 
        dispatch(addNotification({ style: 'success', msg: data.data }))
 45 
        dispatch(addNotification({ style: 'success', msg: data.data }))
43 
        setNotifications([])
 46 
        setNotifications([])
- 
 
 47 
      })
44 
      })
 48 
      .catch((err) =>
- 
 
 49 
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
45 
      .catch(err => dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` })))
 50 
      )
Línea 46... Línea 51...
46 
  }
 51 
  }
- 
 
 52 
 
47 
 
 53 
  const deleteNotification = (url) => {
48 
  const deleteNotification = (url) => {
 54 
    axios
49 
    axios.post(url)
 55 
      .post(url)
- 
 
 56 
      .then(({ data: response }) => {
50 
      .then(({ data: response }) => {
 57 
        if (!response.success) {
- 
 
 58 
          return dispatch(
51 
        if (!response.success) {
 59 
            addNotification({ style: 'danger', msg: response.data })
52 
          return dispatch(addNotification({ style: 'danger', msg: response.data }))
 60 
          )
- 
 
 61 
        }
- 
 
 62 
        dispatch(addNotification({ style: 'success', msg: response.data }))
53 
        }
 63 
        setNotifications((prevNotifications) =>
- 
 
 64 
          prevNotifications.filter(
- 
 
 65 
            (notification) => notification.link_delete !== url
54 
        dispatch(addNotification({ style: 'success', msg: response.data }))
 66 
          )
- 
 
 67 
        )
55 
        setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.link_delete !== url))
 68 
      })
- 
 
 69 
      .catch((err) =>
56 
      })
 70 
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
Línea 57... Línea 71...
57 
      .catch(err => dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` })))
 71 
      )
58 
  }
 72 
  }
59 
 
 73 
 
Línea 74... Línea 88...
74 
    handleNotifications()
 88 
    handleNotifications()
75 
  }, [])
 89 
  }, [])
Línea 76... Línea 90...
76 
 
 90 
 
77 
  return (
 91 
  return (
78 
    <>
 92 
    <>
79 
      <main className="notifications-grid container">
 93 
      <main className="notifications-grid container px-0">
80 
        <aside className='main-left-sidebar d-none d-md-flex'>
 94 
        <aside className="main-left-sidebar d-none d-md-flex">
81 
          <ProfileInfo
 95 
          <ProfileInfo
82 
            image={image}
 96 
            image={image}
83 
            fullName={fullName}
 97 
            fullName={fullName}
84 
            description={description}
 98 
            description={description}
Línea 94... Línea 108...
94 
            <div className="cursor-pointer d-flex align-items-center">
 108 
            <div className="cursor-pointer d-flex align-items-center">
95 
              <BiDotsVerticalRounded
 109 
              <BiDotsVerticalRounded
96 
                onClick={() => setDisplayOption(!displayOption)}
 110 
                onClick={() => setDisplayOption(!displayOption)}
97 
                style={{ fontSize: '1.5rem' }}
 111 
                style={{ fontSize: '1.5rem' }}
98 
              />
 112 
              />
- 
 
 113 
              <div
99 
              <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >
 114 
                className={`feed-options ${displayOption ? 'active' : ''}`}
- 
 
 115 
                ref={menuOptions}
- 
 
 116 
              >
100 
                <ul>
 117 
                <ul>
101 
                  <li>
 118 
                  <li>
102 
                    <button
 119 
                    <button
103 
                      className="option-btn"
 120 
                      className="option-btn"
104 
                      onClick={handleConfirmModalShow}
 121 
                      onClick={handleConfirmModalShow}
Línea 110... Línea 127...
110 
                </ul>
 127 
                </ul>
111 
              </div>
 128 
              </div>
112 
            </div>
 129 
            </div>
113 
          </div>
 130 
          </div>
114 
          <ul>
 131 
          <ul>
115 
            {notifications.length
 132 
            {notifications.length ? (
116 
              ? [...notifications].reverse().map((element, index) =>
 133 
              [...notifications].reverse().map((element, index) => (
117 
                <li key={index}>
 134 
                <li key={index}>
118 
                  <div className="notification-item">
 135 
                  <div className="notification-item">
- 
 
 136 
                    <div
119 
                    <div className="d-flex align-items-center justify-content-between" style={{ gap: '.5rem' }}>
 137 
                      className="d-flex align-items-center justify-content-between"
120 
                      <a href={element.link}>
 138 
                      style={{ gap: '.5rem' }}
- 
 
 139 
                    >
121 
                        {element.message}
 140 
                      <a href={element.link}>{element.message}</a>
122 
                      </a>
 141 
                      <DeleteOutline
- 
 
 142 
                        className="cursor-pointer"
123 
                      <DeleteOutline className='cursor-pointer' onClick={() => deleteNotification(element.link_delete)} />
 143 
                        onClick={() => deleteNotification(element.link_delete)}
- 
 
 144 
                      />
124 
                    </div>
 145 
                    </div>
125 
                    <span>
 - 
 
126 
                      {element.time_elapsed}
 146 
                    <span>{element.time_elapsed}</span>
127 
                    </span>
 - 
 
128 
                  </div>
 147 
                  </div>
129 
                </li>
 148 
                </li>
130 
                )
 149 
              ))
- 
 
 150 
            ) : (
131 
              : <div className="empty-section">
 151 
              <div className="empty-section">
132 
                <h2>No hay notificaciones</h2>
 152 
                <h2>No hay notificaciones</h2>
133 
              </div>
 153 
              </div>
134 
            }
 154 
            )}
135 
          </ul>
 155 
          </ul>
136 
        </div>
 156 
        </div>
137 
      </main>
 157 
      </main>
138 
      <ConfirmModal
 158 
      <ConfirmModal
139 
        show={confirmModalShow}
 159 
        show={confirmModalShow}
140 
        onClose={handleConfirmModalShow}
 160 
        onClose={handleConfirmModalShow}
141 
        onAccept={handleAccept}
 161 
        onAccept={handleAccept}
142 
        acceptLabel='Aceptar'
 162 
        acceptLabel="Aceptar"
143 
      />
 163 
      />
144 
    </>
 164 
    </>
145 
  )
 165 
  )
146 
}
 166 
}