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