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);