Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 861 | Rev 863 | 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 {
862 stevensc 23 
    width: 100px;
24 
    aspect-ratio: 3/2;
861 stevensc 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 
 
862 stevensc 74 
      <StyledContainer.Body className='pt-0'>
75 
        <StyledNewsList>
76 
          {!news.length ? (
77 
            <EmptySection message={labels.not_available_posts} />
78 
          ) : (
79 
            news.map(({ link, title, image, date }) => {
80 
              if (link.includes(currentPost)) return null
5 stevensc 81 
 
862 stevensc 82 
              return (
83 
                <StyledNewItem key={title}>
861 stevensc 84 
                  <Link to={link}>
862 stevensc 85 
                    <img src={image} alt={`${title} image`} />
5 stevensc 86 
                  </Link>
862 stevensc 87 
 
88 
                  <div className='post-info'>
89 
                    <Link to={link}>
90 
                      <h4 title={title}>{title}</h4>
91 
                    </Link>
92 
                    <span>{date}</span>
93 
                  </div>
94 
                </StyledNewItem>
95 
              )
96 
            })
97 
          )}
98 
        </StyledNewsList>
99 
      </StyledContainer.Body>
861 stevensc 100 
    </StyledContainer>
101 
  )
5 stevensc 102 
}