Proyectos de Subversion LeadersLinked - SPA

Rev

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