Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { axios } from '../../../utils'
import { useSelector } from 'react-redux'
import { addNotification } from '../../../redux/notification/notification.actions'
import styled from 'styled-components'

import StyledContainer from '../WidgetLayout'
import EmptySection from '../../UI/EmptySection'

const StyledNewsList = styled.ul`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 380px;
  overflow: auto;
`

const StyledNewItem = styled.div`
  display: flex;
  gap: 0.5rem;
  img {
    height: 80px;
    width: 80px;
    object-fit: cover;
  }
  .post-info {
    display: flex;
    flex-direction: column;
    h4 {
      font-weight: 600;
      font-size: 1.2rem;
      color: subtitle-color;
    }
    span {
      color: $font-color;
      font-size: 0.8rem;
    }
  }
`

export default function HomeNews({ currentPost }) {
  const labels = useSelector(({ intl }) => intl.labels)
  const [news, setNews] = useState([])

  const loadNews = () => {
    axios
      .get('/helpers/posts')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }

        setNews(data)
      })
      .catch(() => {
        addNotification({
          style: 'danger',
          msg: 'Disculpe, ha ocurrido un error buscando novedades'
        })
      })
  }

  useEffect(() => {
    loadNews()
  }, [])

  return (
    <StyledContainer>
      <StyledContainer.Header title={labels.posts} />

      <StyledNewsList>
        {!news.length ? (
          <EmptySection message={labels.not_available_posts} />
        ) : (
          news.map(({ link, title, image, date }) => {
            if (link.includes(currentPost)) return null

            return (
              <StyledNewItem key={title}>
                <Link to={link}>
                  <img src={image} alt={`${title} image`} />
                </Link>

                <div className='post-info'>
                  <Link to={link}>
                    <h4 title={title}>{title}</h4>
                  </Link>
                  <span>{date}</span>
                </div>
              </StyledNewItem>
            )
          })
        )}
      </StyledNewsList>
    </StyledContainer>
  )
}