Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 196 | Rev 862 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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