Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2277 Rev 2278
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import { Link } from 'react-router-dom'
 2 
import { useHistory } from 'react-router-dom'
3 
import { useSelector } from 'react-redux'
 3 
import { useSelector } from 'react-redux'
4 
import styled from 'styled-components'
 - 
 
Línea 5... Línea 4...
5 
 
 4 
 
Línea 6... Línea 5...
6 
import useFetch from '@app/hooks/useFetch'
 5 
import useFetch from '@app/hooks/useFetch'
7 
 
 6 
 
8 
import Widget from '@app/components/UI/Widget'
 - 
 
9 
import EmptySection from '@app/components/UI/EmptySection'
 - 
 
10 
 
 - 
 
11 
const StyledNewsList = styled.ul`
 - 
 
12 
  display: flex;
 - 
 
13 
  flex-direction: column;
 - 
 
14 
  gap: 0.5rem;
 - 
 
15 
  max-height: 380px;
 - 
 
16 
  padding-bottom: 10px;
 - 
 
17 
  overflow: auto;
 - 
 
18 
`
 - 
 
19 
 
 - 
 
20 
const StyledNewItem = styled.div`
 - 
 
21 
  display: flex;
 - 
 
22 
  gap: 0.5rem;
 - 
 
23 
  > a:first-child {
 - 
 
24 
    flex-shrink: 0;
 - 
 
25 
  }
 - 
 
26 
  img {
 - 
 
27 
    width: 100px;
 - 
 
28 
    aspect-ratio: 100/60;
 - 
 
29 
    object-fit: cover;
 - 
 
30 
  }
 - 
 
31 
  .post-info {
 - 
 
32 
    display: flex;
 - 
 
33 
    flex-direction: column;
 7 
import Widget from '@app/components/UI/Widget'
34 
    flex: 1 1 50%;
 - 
 
35 
    max-width: calc(100% - (100px + 0.5rem));
 - 
 
36 
    h4 {
 - 
 
37 
      font-weight: 600;
 - 
 
38 
      font-size: 1.2rem;
 - 
 
39 
      color: var(--subtitle-color);
 - 
 
40 
      overflow: hidden;
 - 
 
41 
      white-space: nowrap;
 - 
 
42 
      text-overflow: ellipsis;
 - 
 
43 
    }
 - 
 
44 
    span {
 - 
 
45 
      color: var(--font-color);
 - 
 
46 
      font-size: 0.8rem;
 - 
 
47 
    }
 - 
 
Línea 48... Línea 8...
48 
  }
 8 
import EmptySection from '@app/components/UI/EmptySection'
49 
`
 9 
import { List, ListItem } from '@app/components/UI/List'
50 
 
 10 
 
- 
 
 11 
export default function HomeNews({ currentPost }) {
Línea 51... Línea 12...
51 
export default function HomeNews({ currentPost }) {
 12 
  const { data: news } = useFetch('/helpers/posts')
52 
  const { data: news } = useFetch('/helpers/posts')
 13 
  const labels = useSelector(({ intl }) => intl.labels)
53 
  const labels = useSelector(({ intl }) => intl.labels)
 14 
  const history = useHistory()
Línea 54... Línea 15...
54 
 
 15 
 
55 
  return (
 - 
 
56 
    <Widget>
 - 
 
57 
      <Widget.Header title={labels.posts} />
 16 
  return (
58 
 
 17 
    <Widget>
59 
      <Widget.Body>
 18 
      <Widget.Header title={labels.posts} />
60 
        <StyledNewsList>
 19 
 
61 
          {!news.length ? (
 20 
      <Widget.Body>
62 
            <EmptySection message={labels.not_available_posts} />
 21 
        <EmptySection message={labels.not_available_posts} />
63 
          ) : (
 - 
 
64 
            news.map(({ link, title, image, date }) => {
 22 
        <List>
65 
              if (link.includes(currentPost)) return null
 - 
 
66 
 
 23 
          {news.map(({ link, title, image, date }) => {
67 
              return (
 - 
 
68 
                <StyledNewItem key={title}>
 - 
 
69 
                  <Link to={link}>
 24 
            if (link.includes(currentPost)) return null
70 
                    <img src={image} alt={`${title} image`} />
 - 
 
71 
                  </Link>
 25 
 
72 
 
 26 
            return (
73 
                  <div className='post-info'>
 27 
              <ListItem
74 
                    <Link to={link}>
 28 
                key={title}
75 
                      <h4 title={title}>{title}</h4>
 29 
                title={title}
76 
                    </Link>
 30 
                image={image}
77 
                    <span>{date}</span>
 31 
                subheader={date}
78 
                  </div>
 32 
                avatarVariant='square'
79 
                </StyledNewItem>
 33 
                onClick={() => history.replace(link)}
80 
              )
 34 
              />
81 
            })
 35 
            )
82 
          )}
 36 
          })}