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()

  const { image, fullName, country, visits, connections } = user

  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

            image={image}

            name={fullName}

            visits={visits}

            country={country}

            connections={connections}

          />

        </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