Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5438 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { addNotification } from '../../../redux/notification/notification.actions'
import EmptySection from '../../../shared/empty-section/EmptySection'
import { axios } from '../../../utils'
import { useSelector } from 'react-redux'

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

  const loadNews = () => {
    axios.get('/helpers/posts')
      .then(({ data: response }) => {
        if (!response.success) {
          addNotification({
            style: 'danger',
            msg: response.data
          })
        }
        setNews(response.data)
      })
      .catch(() => {
        addNotification({
          style: 'danger',
          msg: 'Disculpe, ha ocurrido un error buscando novedades'
        })
      })
  }

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

  return (
    <div className='posts-widget'>
      <h3>{labels.POSTS}</h3>
      <div className="posts-list">
        {!news.length
          ? <EmptySection message={labels.NOT_AVAILABLE_POSTS} />
          : news.map(element => {
            if (element.link.includes(currentPost)) {
              return null
            }

            return (
              <div key={element.title} className='post-item'>
                <img src={element.image} alt={`${element.title} image`} />
                <a href={element.link} target='secondary'>
                  <h4>{element.title}</h4>
                </a>
                <span>{element.date}</span>
                <a
                  className="btn btn-primary"
                  href={element.link}
                  target="secondary"
                >
                  {labels.VIEW_MORE}
                </a>
              </div>
            )
          })}
      </div>
    </div>
  )
}