Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

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

import DeleteOutline from '@mui/icons-material/DeleteOutline'

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

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

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

import ConfirmModal from '../shared/confirm-modal/ConfirmModal';

import { useDispatch } from 'react-redux';

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

const Notifications = ({ backendVars }) => {

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

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

  const [displayOption, setDisplayOption] = useState(false)

  const [confirmModalShow, setConfirmModalShow] = useState(false);

  const dispatch = useDispatch()

  const menuOptions = useRef(null)

  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)

  const handleAccept = () => {

    deleteAllNotifications()

    handleConfirmModalShow()

  }

  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

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

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

      })

      .catch(err => {

        dispatch(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 }) => {

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

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

        setNotifications([])

      })

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

  }

  const deleteNotification = (url) => {

    axios.post(url)

      .then(({ data }) => {

        if (!data.success) {

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

        }

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

        setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.link_delete === url))

      })

      .catch(err => dispatch(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="notifications-grid">

          <div className='main-left-sidebar d-none d-md-flex'>

            <ProfileInfo

              image={image}

              fullName={fullName}

              description={description}

              visits={visits}

              country={country}

              connections={connections}

            />

            <SocialNetworks />

          </div>

          <div className="notification-list">

            <div className="notification-header">

              <h2>

                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"

                        onClick={handleConfirmModalShow}

                      >

                        <i className="fa fa-trash-o mr-1" />

                        Borrar notificaciones

                      </button>

                    </li>

                  </ul>

                </div>

              </div>

            </div>

            <ul>

              {notifications.length

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

                  <li key={index}>

                    <div className="notification-item">

                      <div className="d-flex align-items-center justify-content-center" style={{ gap: '.5rem' }}>

                        <a href={element.link}>

                          {element.message}

                        </a>

                        <DeleteOutline onClick={() => deleteNotification(element.link_delete)} />

                      </div>

                      <span>

                        {element.time_elapsed}

                      </span>

                    </div>

                  </li>

                )

                :

                <div className="empty-section">

                  <h2>No hay notificaciones</h2>

                </div>

              }

            </ul>

          </div>

        </div>

      </section >

      <ConfirmModal

        show={confirmModalShow}

        onClose={handleConfirmModalShow}

        onAccept={handleAccept}

        acceptLabel='Aceptar'

      />

    </>

  )

}

export default Notifications