| 6830 |
stevensc |
1 |
import React, { useEffect } from 'react'
|
|
|
2 |
import { useDispatch, useSelector } from 'react-redux'
|
|
|
3 |
import { fetchFeeds, setCurrentPage } from '../../../redux/feed/feed.actions'
|
|
|
4 |
|
|
|
5 |
import Feed from './Feed'
|
|
|
6 |
import Spinner from '../../UI/Spinner'
|
|
|
7 |
import EmptySection from '../../UI/EmptySection'
|
|
|
8 |
import ShareModal from '../../share-modal/ShareModal'
|
|
|
9 |
|
|
|
10 |
const PaginationComponent = React.lazy(() =>
|
|
|
11 |
import('../../UI/PaginationComponent')
|
|
|
12 |
)
|
|
|
13 |
|
|
|
14 |
const FeedList = ({ feed, image }) => {
|
|
|
15 |
const { allFeeds, timelineUrl, pages, currentPage, loading } = useSelector(
|
|
|
16 |
({ feed }) => feed
|
|
|
17 |
)
|
|
|
18 |
const dispatch = useDispatch()
|
|
|
19 |
|
|
|
20 |
const fetchSpecificFeed = () =>
|
|
|
21 |
dispatch(fetchFeeds(timelineUrl + '/feed/' + feed, 1))
|
|
|
22 |
|
|
|
23 |
useEffect(() => {
|
|
|
24 |
if (feed) {
|
|
|
25 |
return fetchSpecificFeed()
|
|
|
26 |
} else {
|
|
|
27 |
return dispatch(fetchFeeds(timelineUrl, currentPage))
|
|
|
28 |
}
|
|
|
29 |
}, [timelineUrl, currentPage, feed])
|
|
|
30 |
|
|
|
31 |
const onChangePageHandler = (currentPage) => {
|
|
|
32 |
dispatch(setCurrentPage(currentPage))
|
|
|
33 |
dispatch(fetchFeeds(timelineUrl, currentPage))
|
|
|
34 |
window.scrollTo(0, 0)
|
|
|
35 |
}
|
|
|
36 |
|
|
|
37 |
if (loading) {
|
|
|
38 |
return <Spinner />
|
|
|
39 |
}
|
|
|
40 |
|
|
|
41 |
if (!allFeeds.length) {
|
|
|
42 |
return <EmptySection message="No hay publicaciones" />
|
|
|
43 |
}
|
|
|
44 |
|
|
|
45 |
return (
|
|
|
46 |
<>
|
|
|
47 |
{allFeeds.map((feed) => {
|
|
|
48 |
return <Feed key={feed.feed_uuid} image={image} {...feed} />
|
|
|
49 |
})}
|
|
|
50 |
<React.Suspense fallback={null}>
|
|
|
51 |
<PaginationComponent
|
|
|
52 |
onChangePage={onChangePageHandler}
|
|
|
53 |
pages={pages}
|
|
|
54 |
isRow
|
|
|
55 |
currentActivePage={currentPage}
|
|
|
56 |
/>
|
|
|
57 |
<ShareModal timelineUrl={timelineUrl} currentPage={currentPage} />
|
|
|
58 |
</React.Suspense>
|
|
|
59 |
</>
|
|
|
60 |
)
|
|
|
61 |
}
|
|
|
62 |
|
|
|
63 |
export default FeedList
|