Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { Suspense, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchFeeds, setCurrentPage } from '../../../redux/feed/feed.actions'
import EmptySection from '../../../shared/empty-section/EmptySection'
import Spinner from '../../../shared/loading-spinner/Spinner'
import Feed from '../feed/FeedTemplate'

const ShareModal = React.lazy(() => import('../share-modal/ShareModal'))
const PaginationComponent = React.lazy(() =>
  import('../../../shared/pagination/PaginationComponent')
)

const isDashboard = window.location.pathname.includes('dashboard')
const isMobile = window.innerWidth < 768

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

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

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

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

  if (loading) {
    return <Spinner />
  }

  return (
    <>
      {allFeeds.length ? (
        allFeeds.map((feed, index) => {
          if (isMobile && isDashboard && index === 5) {
            const PeopleYouMayKnow = React.lazy(() =>
              import(
                '../../../shared/helpers/people-you-may-know/PeopleYouMayKnow'
              )
            )
            return (
              <>
                <Suspense fallback={null}>
                  <PeopleYouMayKnow />
                </Suspense>
                <Feed
                  feed={feed}
                  key={feed.feed_unique}
                  owner_shared={feed.owner_shared}
                  image={image}
                />
              </>
            )
          }
          if (isMobile && isDashboard && index === 8) {
            const HomeNews = React.lazy(() =>
              import('../home-section/HomeNews')
            )
            return (
              <>
                <Suspense fallback={null}>
                  <HomeNews />
                </Suspense>
                <Feed
                  feed={feed}
                  key={feed.feed_unique}
                  owner_shared={feed.owner_shared}
                  image={image}
                />
              </>
            )
          }
          return (
            <Feed
              feed={feed}
              key={feed.feed_unique}
              owner_shared={feed.owner_shared}
              image={image}
            />
          )
        })
      ) : (
        <EmptySection message={labels.NOT_AVAILABLE_FEEDS} />
      )}
      <Suspense fallback={null}>
        <ShareModal timelineUrl={timelineUrl} currentPage={currentPage} />
      </Suspense>
      <Suspense fallback={null}>
        <PaginationComponent
          onChangePage={onChangePageHandler}
          pages={pages}
          isRow
          currentActivePage={currentPage}
        />
      </Suspense>
    </>
  )
}

export default React.memo(FeedSection)