Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from 'react';
import { useState } from 'react';
import { useLayoutEffect } from 'react';
import { useDispatch } from 'react-redux';
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo';
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks';
import { addNotification } from '../redux/notification/notification.actions';
import { axios } from '../utils';

const Notifications = ({ backendVars }) => {

  const { image, fullName, country, visits, connections, description } = backendVars
  const [notifications, setNotifications] = useState([]);
  const dispatch = useDispatch()

  const handleNotifications = async () => {
    try {
      const _notifications = await axios.get('/notifications');
      setNotifications(_notifications.data.data)
      console.log('>>: _notifications ', notifications)
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }

  const markReadNotifications = () => {
    axios.post('/notifications/markRead')
      .then(({ data }) => data.success)
      .catch(err => {
        dispatch(addNotification({
          style: "error",
          msg: 'Disculpe, ha ocurrido un error marcando notificaciones como leidas',
        }))
        console.log('>>: err > ', err)
      })
  }

  useLayoutEffect(() => {
    handleNotifications();
    markReadNotifications()
  }, []);

  return (
    <section className="notifications-page">
      <div className="card notifications-grid">
        <div className='main-left-sidebar' style={{ marginTop: '1.25rem' }}>
          <ProfileInfo
            image={image}
            fullName={fullName}
            description={description}
            visits={visits}
            country={country}
            connections={connections}
          />
          <SocialNetworks />
        </div>
        <div className="card-body">
          <div className="container">
            <h2
              className="card-title"
              style={{ fontSize: '1.7rem', fontWeight: '700' }}
            >
              Notificaciones
            </h2>
            <div className="messages-sec border-gray px-5 py-4">
              <ul>
                {
                  notifications.length
                    ? notifications.reverse().map((element, i) => (
                      <li key={i}>
                        <div className="notification-item">
                          <a href={element.link}>
                            {element.message}
                          </a>
                          <span>
                            {element.time_elapsed}
                          </span>
                        </div>
                      </li>
                    )
                    )
                    :
                    <div
                      className="section_admin_title_buttons w-100"
                      style={{ display: 'grid', placeItems: 'center' }}
                    >
                      <h1 className="title">No hay notificaciones</h1>
                    </div>
                }
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section >
  )
}
export default Notifications