Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

import { useFetch } from '@hooks'

import Widget from '@components/UI/Widget'
import EmptySection from '@components/UI/EmptySection'
import {
  Avatar,
  List,
  ListItemAvatar,
  ListItemButton,
  ListItemText
} from '@mui/material'
import { ListItem } from '@components/UI/List'

export default function HomeNews({ currentPost }) {
  const { data: posts } = useFetch('/helpers/posts', [])
  const labels = useSelector(({ intl }) => intl.labels)
  const navigate = useNavigate()

  const filterPosts = useMemo(
    () => posts?.filter((post) => post.link.includes(currentPost)),
    [currentPost, posts]
  )

  return (
    <Widget>
      <Widget.Header title={labels.posts} />

      <Widget.Body>
        {posts?.length <= 0 && (
          <EmptySection message={labels.not_available_posts} />
        )}

        <List sx={{ maxHeight: 285, overflow: 'auto' }}>
          {filterPosts.map(({ link, title, image, date }) => (
            <ListItem key={title}>
              <ListItemButton onClick={() => navigate(link)}>
                <ListItemAvatar>
                  <Avatar src={image} alt={`${title} post image`} />
                </ListItemAvatar>

                <ListItemText primary={title} secondary={date} />
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Widget.Body>
    </Widget>
  )
}