Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, 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 Spinner from '@components/UI/Spinner'
import EmptySection from '@components/UI/EmptySection'
import ProfileInfo from '@components/widgets/default/ProfileWidget'
import ConfirmModal from '@components/modals/ConfirmModal'

const NotificationsPage = () => {
  const { data: user } = useFetch('/helpers/menu')
  const { data: fetchedNotifications, isLoading } = useFetch(
    '/notifications',
    []
  )
  const [notifications, setNotifications] = useState([])
  const [deleteModalState, setDeleteModalState] = useState({
    show: false,
    type: 'multiple',
    url: null
  })
  const dispatch = useDispatch()

  // useFetch('/notifications/mark-all-read') POST request needed

  const deleteAllNotifications = () => {
    axios
      .post('/notifications/clear')
      .then(({ data: { data, success } }) => {
        if (!success)
          throw new Error('Error al borrar todas las notificaciones')
        setNotifications([])
        dispatch(addNotification({ style: 'success', msg: data }))
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  const deleteNotification = (url) => {
    axios
      .post(url)
      .then(({ data: { data, success } }) => {
        if (!success) throw new Error('Error al borrar la notificacion')
        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 handleDelete = (url) => {
    setDeleteModalState({
      show: true,
      type: url ? 'single' : 'multiple',
      url
    })
  }

  const handleDeleteAccept = () => {
    if (deleteModalState.type === 'multiple') {
      deleteAllNotifications()
    } else {
      deleteNotification(deleteModalState.url)
    }
    setDeleteModalState({
      show: false,
      type: 'multiple'
    })
  }

  const handleDeleteCancel = () => {
    setDeleteModalState({
      show: false,
      type: 'multiple'
    })
  }

  useEffect(() => {
    if (fetchedNotifications) {
      setNotifications(fetchedNotifications)
    }
  }, [fetchedNotifications])

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

              <List sx={{ maxHeight: '60vh', overflow: 'auto' }}>
                {notifications.map(
                  ({ link_delete, link, message, time_elapsed }) => (
                    <ListItem
                      key={link}
                      secondaryAction={
                        <IconButton onClick={() => handleDelete(link_delete)}>
                          <Delete />
                        </IconButton>
                      }
                    >
                      <ListItemButton LinkComponent={Link} to={link}>
                        <ListItemText
                          primary={message}
                          secondary={time_elapsed}
                        />
                      </ListItemButton>
                    </ListItem>
                  )
                )}
              </List>
            </Widget.Body>
          </Widget>
        </Grid>
      </Grid>
      <ConfirmModal
        show={deleteModalState.show}
        onClose={handleDeleteCancel}
        onAccept={handleDeleteAccept}
      />
    </>
  )
}

export default NotificationsPage