Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  fetchFeeds,
  setCurrentPage,
} from "../../../../redux/feed/feed.actions";

import Feed from "../feed-template/Feed";
import Spinner from "../../../UI/Spinner";
import EmptySection from "../../../UI/EmptySection";
import ShareModal from "../../../share-modal/ShareModal";

const PaginationComponent = React.lazy(() =>
  import("../../../UI/PaginationComponent")
);

const FeedList = ({ feed, image }) => {
  const { allFeeds, timelineUrl, pages, currentPage, loading } = useSelector(
    ({ feed }) => feed
  );
  const dispatch = useDispatch();

  const fetchSpecificFeed = () =>
    dispatch(fetchFeeds(timelineUrl + "/feed/" + feed, 1));

  const onChangePageHandler = (currentPage) => {
    dispatch(setCurrentPage(currentPage));
    window.scrollTo(0, 0);
  };

  useEffect(() => {
    dispatch(setCurrentPage(1));
  }, []);

  useEffect(() => {
    if (feed) {
      fetchSpecificFeed();
    } else {
      dispatch(fetchFeeds(timelineUrl, currentPage));
    }
  }, [timelineUrl, currentPage, feed]);

  if (loading) {
    return <Spinner />;
  }

  if (!allFeeds.length) {
    return <EmptySection message="No hay publicaciones" />;
  }

  return (
    <>
      {allFeeds.map((feed) => {
        return <Feed key={feed.feed_uuid} image={image} {...feed} />;
      })}
      <React.Suspense fallback={null}>
        <PaginationComponent
          onChangePage={onChangePageHandler}
          pages={pages}
          isRow
          currentActivePage={currentPage}
        />
        <ShareModal timelineUrl={timelineUrl} currentPage={currentPage} />
      </React.Suspense>
    </>
  );
};

export default FeedList;