Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 196 | Rev 862 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
861 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { Link } from 'react-router-dom'
3 
import { axios } from '../../../utils'
4 
import { useSelector } from 'react-redux'
5 
import { addNotification } from '../../../redux/notification/notification.actions'
6 
import styled from 'styled-components'
5 stevensc 7 
 
861 stevensc 8 
import StyledContainer from '../WidgetLayout'
9 
import EmptySection from '../../UI/EmptySection'
5 stevensc 10 
 
861 stevensc 11 
const StyledNewsList = styled.ul`
12 
  display: flex;
13 
  flex-direction: column;
14 
  gap: 0.5rem;
15 
  max-height: 380px;
16 
  overflow: auto;
17 
`
5 stevensc 18 
 
861 stevensc 19 
const StyledNewItem = styled.div`
20 
  display: flex;
21 
  gap: 0.5rem;
22 
  img {
23 
    height: 80px;
24 
    width: 80px;
25 
    object-fit: cover;
26 
  }
27 
  .post-info {
28 
    display: flex;
29 
    flex-direction: column;
30 
    h4 {
31 
      font-weight: 600;
32 
      font-size: 1.2rem;
33 
      color: subtitle-color;
34 
    }
35 
    span {
36 
      color: $font-color;
37 
      font-size: 0.8rem;
38 
    }
39 
  }
40 
`
41 
 
5 stevensc 42 
export default function HomeNews({ currentPost }) {
861 stevensc 43 
  const labels = useSelector(({ intl }) => intl.labels)
44 
  const [news, setNews] = useState([])
5 stevensc 45 
 
46 
  const loadNews = () => {
47 
    axios
861 stevensc 48 
      .get('/helpers/posts')
49 
      .then(({ data: responseData }) => {
50 
        const { data, success } = responseData
67 stevensc 51 
 
52 
        if (!success) {
861 stevensc 53 
          throw new Error(data)
5 stevensc 54 
        }
67 stevensc 55 
 
861 stevensc 56 
        setNews(data)
5 stevensc 57 
      })
58 
      .catch(() => {
59 
        addNotification({
861 stevensc 60 
          style: 'danger',
61 
          msg: 'Disculpe, ha ocurrido un error buscando novedades'
62 
        })
63 
      })
64 
  }
5 stevensc 65 
 
66 
  useEffect(() => {
861 stevensc 67 
    loadNews()
68 
  }, [])
5 stevensc 69 
 
70 
  return (
861 stevensc 71 
    <StyledContainer>
72 
      <StyledContainer.Header title={labels.posts} />
73 
 
74 
      <StyledNewsList>
5 stevensc 75 
        {!news.length ? (
76 
          <EmptySection message={labels.not_available_posts} />
77 
        ) : (
861 stevensc 78 
          news.map(({ link, title, image, date }) => {
79 
            if (link.includes(currentPost)) return null
5 stevensc 80 
 
81 
            return (
861 stevensc 82 
              <StyledNewItem key={title}>
83 
                <Link to={link}>
84 
                  <img src={image} alt={`${title} image`} />
5 stevensc 85 
                </Link>
861 stevensc 86 
 
87 
                <div className='post-info'>
88 
                  <Link to={link}>
89 
                    <h4 title={title}>{title}</h4>
5 stevensc 90 
                  </Link>
861 stevensc 91 
                  <span>{date}</span>
5 stevensc 92 
                </div>
861 stevensc 93 
              </StyledNewItem>
94 
            )
5 stevensc 95 
          })
96 
        )}
861 stevensc 97 
      </StyledNewsList>
98 
    </StyledContainer>
99 
  )
5 stevensc 100 
}