Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import {
  Grid,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemText
} from '@mui/material'
import { Delete } from '@mui/icons-material'

import { axios } from '@utils'
import { useFetch } from '@hooks'
import { addNotification } from '@store/notification/notification.actions'

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

const NotificationsPage = () => {
  const { data: notifications } = useFetch('/notifications', [])
  const { data: user } = useFetch('/helpers/menu')
  const [setNotifications] = useState([])
  const [confirmModalShow, setConfirmModalShow] = useState(false)
  const dispatch = useDispatch()

  useFetch('/notifications/mark-all-read')

  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 toggleConfirmModal = () => {
    setConfirmModalShow(!confirmModalShow)
  }

  return (
    <>
      <Grid container spacing={2}>
        <Grid item xs={12} md={4}>
          <ProfileInfo {...user} />
        </Grid>
        <Grid item xs={12} md={8}>
          <Widget>
            <Widget.Header
              title='Notificaciones'
              renderAction={() => (
                <Options>
                  <Options.Item onClick={toggleConfirmModal}>
                    Borrar notificaciones
                  </Options.Item>
                </Options>
              )}
            />
            <Widget.Body>
              {notifications.length === 0 && (
                <EmptySection message='No hay notificaciones' align='center' />
              )}

              <List>
                {notifications.map(({ link, message, time_elapsed }) => (
                  <ListItem
                    key={link}
                    secondaryAction={
                      <IconButton onClick={deleteNotification}>
                        <Delete />
                      </IconButton>
                    }
                  >
                    <ListItemButton LinkComponent={Link} to={link}>
                      <ListItemText
                        primary={message}
                        secondary={time_elapsed}
                      />
                    </ListItemButton>
                  </ListItem>
                ))}
              </List>
            </Widget.Body>
          </Widget>
        </Grid>
      </Grid>

      <ConfirmModal
        show={confirmModalShow}
        onClose={toggleConfirmModal}
        onAccept={() => {
          deleteAllNotifications()
          toggleConfirmModal()
        }}
      />
    </>
  )
}

export default NotificationsPage