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

const NotificationsPage = () => {
  const { data: user } = useFetch('/helpers/menu')
  const { data: fetchedNotifications } = 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={2}>
        <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>
              {notifications.length === 0 ? (
                <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