Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useLayoutEffect, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { Grid } from '@mui/material'
import styled from 'styled-components'

import { axios } from '../../utils'
import { getBackendVars } from '../../services/backendVars'
import { addNotification } from '../../redux/notification/notification.actions'

import Options from '../../components/UI/Option'
import ConfirmModal from '../../components/modals/ConfirmModal'
import EmptySection from '../../components/UI/EmptySection'
import ProfileInfo from '../../components/widgets/default/ProfileWidget'
import WidgetWrapper from '../../components/widgets/WidgetLayout'
import NotificationOption from '@app/components/notifications/NotificationOption'

const StyledNotificationList = styled(WidgetWrapper.Body)`
  max-height: 60vh;
  overflow: auto;
`

const NotificationsPage = () => {
  const [userInfo, setuserInfo] = useState({})
  const [notifications, setNotifications] = useState([])
  const [confirmModalShow, setConfirmModalShow] = useState(false)
  const dispatch = useDispatch()

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

  const getNotifications = async () => {
    axios
      .get('/notifications')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Ha ocurrido un error, por favor intente más tarde'
          throw new Error(errorMessage)
        }

        setNotifications(data)
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  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 readAllNotification = () => {
    axios
      .post('notifications/mark-all-read')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
  }

  const toggleConfirmModal = () => {
    setConfirmModalShow(!confirmModalShow)
  }

  useEffect(() => {
    getBackendVars('/helpers/menu')
      .then(
        ({ image, fullName, country, visits, connections, description }) => {
          setuserInfo({
            image,
            fullName,
            country,
            visits,
            connections
          })
        }
      )
      .catch((err) => {
        console.log(err)
      })
  }, [])

  useLayoutEffect(() => {
    getNotifications()
    readAllNotification()
  }, [])

  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}>
          <WidgetWrapper>
            <WidgetWrapper.Header title='Notificaciones'>
              <Options
                options={[
                  {
                    label: 'Borrar notificaciones',
                    action: toggleConfirmModal
                  }
                ]}
              />
            </WidgetWrapper.Header>

            <StyledNotificationList>
              {notifications.length ? (
                [...notifications].reverse().map((notification, index) => (
                  <div key={index}>
                    <NotificationOption
                      {...notification}
                      onDelete={deleteNotification}
                    />
                  </div>
                ))
              ) : (
                <EmptySection message='No hay notificaciones' align='center' />
              )}
            </StyledNotificationList>
          </WidgetWrapper>
        </Grid>
      </Grid>

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

export default NotificationsPage