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>

  )

}