Proyectos de Subversion LeadersLinked - SPA

Rev

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