Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useLayoutEffect, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { Link } from 'react-router-dom'
import { Container, Grid, IconButton } from '@mui/material'
import DeleteOutline from '@mui/icons-material/DeleteOutline'
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 Paraphrase from '../../components/UI/Paraphrase'

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

const StyledNotificationItem = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  p {
    margin-bottom: 0;
  }
`

const StyledActionButton = styled(IconButton)`
  position: absolute !important;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
`

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 (
    <>
      <Container>
        <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}>
                      <NotificationsPage.Item
                        onDelete={deleteNotification}
                        {...notification}
                      />
                    </div>
                  ))
                ) : (
                  <EmptySection
                    message='No hay notificaciones'
                    align='center'
                  />
                )}
              </StyledNotificationList>
            </WidgetWrapper>
          </Grid>
        </Grid>
      </Container>

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

const Item = ({ link_delete, link, message, time_elapsed, onDelete }) => {
  return (
    <StyledNotificationItem>
      <Link to={link}>
        <Paraphrase>{message}</Paraphrase>
      </Link>
      <span>{time_elapsed}</span>

      <StyledActionButton onClick={() => onDelete(link_delete)}>
        <DeleteOutline />
      </StyledActionButton>
    </StyledNotificationItem>
  )
}

NotificationsPage.Item = Item

export default NotificationsPage