Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState, useLayoutEffect, useRef } from 'react';
import { axios } from '../utils';
import { BiDotsVerticalRounded } from 'react-icons/bi';
import { FaTrash } 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';
import ConfirmModal from '../shared/confirm-modal/ConfirmModal';
import { useDispatch } from 'react-redux';

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}` })))
  }

  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' 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={handleConfirmModalShow}
                          >
                            <FaTrash className="mr-1" />
                            Borrar notificaciones
                          </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 >
      <ConfirmModal
        show={confirmModalShow}
        onClose={handleConfirmModalShow}
        onAccept={handleAccept}
        acceptLabel='Aceptar'
      />
    </>
  )
}

export default Notifications