Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useLayoutEffect, useEffect } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { getBackendVars } from '../../services/backendVars'
import { addNotification } from '../../redux/notification/notification.actions'
import { Col, Container, Row } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { IconButton } from '@mui/material'
import DeleteOutline from '@mui/icons-material/DeleteOutline'

import Options from '../../components/UI/Option'
import ConfirmModal from '../../components/modals/ConfirmModal'
import EmptySection from '../../components/UI/EmptySection'
import ProfileInfo from '../../components/widgets/default/ProfileWidget'

const NotificationsPage = () => {
  const [userInfo, setuserInfo] = useState({})
  const [notifications, setNotifications] = useState([])
  const [confirmModalShow, setConfirmModalShow] = useState(false)
  const dispatch = useDispatch()

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

  const getNotifications = async () => {
    axios
      .get('/notifications')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Ha ocurrido un error, por favor intente más tarde'
          throw new Error(errorMessage)
        }

        setNotifications(data)
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  const deleteAllNotifications = () => {
    axios
      .post('/notifications/clear')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }

        dispatch(addNotification({ style: 'success', msg: data }))
        setNotifications([])
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  const deleteNotification = (url) => {
    axios
      .post(url)
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }

        const newNotifications = notifications.filter(
          ({ link_delete }) => link_delete !== url
        )

        setNotifications(newNotifications)
        dispatch(addNotification({ style: 'success', msg: data }))
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  const readAllNotification = () => {
    axios
      .post('notifications/mark-all-read')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  const toggleConfirmModal = () => {
    setConfirmModalShow(!confirmModalShow)
  }

  useEffect(() => {
    getBackendVars('/helpers/menu')
      .then(
        ({ image, full_name, country, visits, connections, description }) => {
          setuserInfo({
            image,
            full_name,
            country,
            visits,
            connections,
            description
          })
        }
      )
      .catch((err) => {
        console.log(err)
      })
  }, [])

  useLayoutEffect(() => {
    getNotifications()
    readAllNotification()
  }, [])

  return (
    <>
      <Container as='main'>
        <Row>
          <Col as='aside' md='4' className='d-none d-md-flex'>
            <ProfileInfo
              image={image}
              fullName={fullName}
              description={description}
              visits={visits}
              country={country}
              connections={connections}
            />
          </Col>
          <Col as='section' md='8' className='notification-list'>
            <div className='notification-header position-relative'>
              <h2>Notificaciones</h2>
              <Options
                options={[
                  {
                    label: 'Borrar notificaciones',
                    action: toggleConfirmModal
                  }
                ]}
              />
            </div>

            {notifications.length ? (
              [...notifications].reverse().map((notification, index) => (
                <div key={index}>
                  <NotificationsPage.Item
                    onDelete={deleteNotification}
                    {...notification}
                  />
                </div>
              ))
            ) : (
              <EmptySection message='No hay notificaciones' align='center' />
            )}
          </Col>
        </Row>
      </Container>
      <ConfirmModal
        show={confirmModalShow}
        onClose={toggleConfirmModal}
        onAccept={() => {
          deleteAllNotifications()
          toggleConfirmModal()
        }}
      />
    </>
  )
}

const Item = ({ link_delete, link, message, time_elapsed, onDelete }) => {
  return (
    <div className='notification-item'>
      <div className='d-flex align-items-center justify-content-between m-0 p-0'>
        <Link to={link}>{message}</Link>
        <IconButton onClick={() => onDelete(link_delete)}>
          <DeleteOutline />
        </IconButton>
      </div>
      <span>{time_elapsed}</span>
      <hr />
    </div>
  )
}

NotificationsPage.Item = Item

export default NotificationsPage