Proyectos de Subversion LeadersLinked - Antes de SPA

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

import PeopleYouMayKnow from "../../../shared/helpers/people-you-may-know/PeopleYouMayKnow";
import Spinner from "../../../shared/loading-spinner/Spinner";
import PaginationComponent from "../../../shared/pagination/PaginationComponent";
import FeedContent from "../feed/FeedContent";
import FeedTemplate from "../feed/FeedTemplate";
import HomeNews from "../home-section/HomeNews";
import ShareModal from "../share-modal/ShareModal";

const PATH = window.location.pathname

const FeedSection = ({ routeTimeline, feed, image }) => {

  const { allFeeds, timelineUrl, pages, currentPage, loading } = useSelector((state) => state.feed)
  const dispatch = useDispatch()


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

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


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

  if (loading) return (
    <div className="w-100 h-100" style={{ display: "grid", placeItems: 'center' }}>
      <Spinner />
    </div>
  )

  return (
    <>
      {allFeeds.length
        ? allFeeds.map((feed, index) =>
          <>
            {
              (index === 5 && PATH.includes('dashboard')) &&
              <div className='d-block d-md-none'>
                <PeopleYouMayKnow />
              </div>
            }
            {
              (index === 8 && PATH.includes('dashboard')) &&
              < div className='d-block d-md-none'>
                <HomeNews />
              </div>
            }
            <FeedTemplate
              feed={feed}
              key={feed.feed_unique}
              owner_shared={feed.owner_shared}
              image={image}
            >
              <FeedContent
                isShare={feed.shared_name ? true : false}
                ownerFileImage={feed.owner_file_image}
                ownerFileVideo={feed.owner_file_video}
                ownerFileImagePreview={feed.owner_file_image_preview}
                ownerFileDocument={feed.owner_file_document}
                ownerDescription={feed.owner_description}
                sharedItem={{
                  name: feed.shared_name,
                  image: feed.shared_image,
                  time_elapse: feed.shared_time_elapse,
                  description: feed.shared_description,
                  file_video: feed.shared_file_video,
                  file_image_preview: feed.shared_file_image_preview,
                  file_image: feed.shared_file_image,
                  file_document: feed.shared_file_document
                }}
              />
            </FeedTemplate>
          </>)
        :
        <div style={{ display: 'grid', width: '100%', padding: '20px', placeItems: 'center' }}>
          <h2>No hay publicaciones</h2>
        </div>
      }
      <ShareModal
        timelineUrl={timelineUrl}
        currentPage={currentPage}
      />
      <PaginationComponent
        onChangePage={onChangePageHandler}
        pages={pages}
        isRow
        currentActivePage={currentPage}
      />
    </>
  );
};

export default React.memo(FeedSection);