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 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'
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo'

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 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: response }) => {
        if (!response.success) {
          return dispatch(
            addNotification({ style: 'danger', msg: response.data })
          )
        }
        dispatch(addNotification({ style: 'success', msg: response.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 (
    <>
      <main className="notifications-grid container px-0">
        <aside className="main-left-sidebar d-none d-md-flex">
          <ProfileInfo
            image={image}
            fullName={fullName}
            description={description}
            visits={visits}
            country={country}
            connections={connections}
          />
        </aside>
        <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-between"
                      style={{ gap: '.5rem' }}
                    >
                      <a href={element.link}>{element.message}</a>
                      <DeleteOutline
                        className="cursor-pointer"
                        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>
      </main>
      <ConfirmModal
        show={confirmModalShow}
        onClose={handleConfirmModalShow}
        onAccept={handleAccept}
        acceptLabel="Aceptar"
      />
    </>
  )
}

export default Notifications