Proyectos de Subversion LeadersLinked - SPA

Rev

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