Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import {
  Avatar,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemText
} from '@mui/material';

import { useFetch } from '@hooks';

import Widget from '@components/UI/Widget';
import EmptySection from '@components/UI/EmptySection';

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)),
    [posts, currentPost]
  );

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

      <Widget.Body>
        {filterPosts?.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>
  );
}