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={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>

              {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