Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useState, useLayoutEffect, useRef } from 'react';

import { axios } from '../utils';

import { connect } from 'react-redux';

import { BiDotsVerticalRounded } from 'react-icons/bi';

import { FaTrash, FaEye } from 'react-icons/fa';

import { addNotification } from '../redux/notification/notification.actions';

import ProfileInfo from '../dashboard/components/home-section/ProfileInfo';

import SocialNetworks from '../dashboard/components/home-section/SocialNetworks';

const Notifications = ({ backendVars }) => {

  const { image, fullName, country, visits, connections, description } = backendVars

  const [notifications, setNotifications] = useState([])

  const [displayOption, setDisplayOption] = useState(false)

  const menuOptions = useRef(null)

  const handleNotifications = async () => {

    try {

      const _notifications = await axios.get('/notifications')

      setNotifications(_notifications.data.data)

    } catch (error) {

      console.log('>>: error > ', error)

    }

  }

  const markReadNotifications = () => {

    axios.post('/notifications/mark-all-read')

      .then(({ data }) => {

        !data.success

          ? addNotification({ style: 'danger', msg: data.data })

          : addNotification({ style: 'success', msg: data.data })

      })

      .catch(err => {

        addNotification({

          style: "danger",

          msg: 'Disculpe, ha ocurrido un error marcando notificaciones como leidas',

        })

        console.log('>>: err > ', err)

      })

  }

  const deleteAllNotifications = () => {

    axios.post('/notifications/clear')

      .then(({ data }) => {

        !data.success && addNotification({ style: 'danger', msg: data.data })

        addNotification({ style: 'success', msg: data.data })

        setNotifications([])

      })

      .catch(err => addNotification({ style: "danger", msg: `Error: ${err}` }))

  }

  useLayoutEffect(() => {

    const handleClickOutside = (event) => {

      if (menuOptions.current && !menuOptions.current.contains(event.target)) {

        setDisplayOption(false)

      }

    }

    document.addEventListener("mousedown", handleClickOutside);

    return () => {

      document.removeEventListener("mousedown", handleClickOutside);

    };

  }, [menuOptions]);

  useLayoutEffect(() => {

    handleNotifications()

  }, []);

  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">

            <div className="messages-sec border-gray px-5 py-4">

              <div className="d-flex align-items-center justify-content-between position-relative mb-3">

                <h2 className="card-title" style={{ fontSize: '1.7rem', fontWeight: '700' }}>

                  Notificaciones

                </h2>

                <div className="cursor-pointer d-flex align-items-center">

                  <BiDotsVerticalRounded

                    onClick={() => setDisplayOption(!displayOption)}

                    style={{ fontSize: '1.5rem' }}

                  />

                  <div className={`feed-options ${displayOption ? 'active' : ''}`} ref={menuOptions} >

                    <ul>

                      <li>

                        <button

                          className="option-btn mb-2"

                          onClick={deleteAllNotifications}

                        >

                          <FaTrash className="mr-1" />

                          Borrar notificaciones

                        </button>

                      </li>

                      <li>

                        <button

                          className="option-btn"

                          onClick={markReadNotifications}

                        >

                          <FaEye className="mr-1" />

                          Marcar notificaciones como leídas

                        </button>

                      </li>

                    </ul>

                  </div>

                </div>

              </div>

              <ul>

                {notifications.length

                  ? [...notifications].reverse().map((element, i) =>

                    <li key={i}>

                      <div className="notification-item">

                        <div className="d-inline-flex flex-column">

                          <a href={element.link} className='mb-1'>

                            {element.message}

                          </a>

                          <span>

                            {element.time_elapsed}

                          </span>

                        </div>

                      </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 >

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

};

export default connect(null, mapDispatchToProps)(Notifications)