12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- import { actionOnePost } from '../../actions/query/postQuery'
- import { actionFullExplorePostsTypeSaga } from '../../actions/typeSaga/exploreTypesSaga'
- import { Row, Col } from 'antd'
- import { Card } from '../../components/post/PostCard'
- import React, { useEffect, useState } from 'react'
- import { connect } from 'react-redux'
- import { actionClearExplorePostsType } from '../../actions/types/exploreTypes'
- import load from '../../materials/load.gif'
- const ExplorePosts = ({
- explorePosts = [],
- onPost,
- onClearExplore,
- onExlorePosts,
- explorePostsPromise,
- }) => {
- const [checkScroll, setScroll] = useState(true)
- useEffect(() => {
- if (checkScroll) {
- onExlorePosts()
- }
- setScroll(false)
- }, [checkScroll])
- useEffect(() => {
- document.addEventListener('scroll', scrollHandler)
- return () => {
- document.removeEventListener('scroll', scrollHandler)
- onClearExplore()
- }
- }, [])
- useEffect(() => {
- document.addEventListener('scroll', scrollHandler)
- }, [explorePosts.length])
- const scrollHandler = (e) => {
- if (
- e.target.documentElement.scrollHeight -
- (e.target.documentElement.scrollTop + window.innerHeight) <
- 200
- ) {
- setScroll(true)
- document.removeEventListener('scroll', scrollHandler)
- }
- }
- return (
- <>
- <Row>
- <Col
- xl={{ offset: 4, span: 18 }}
- lg={{ offset: 2, span: 20 }}
- md={{ offset: 2, span: 20 }}
- sm={{ offset: 2, span: 22 }}
- xs={{offset:3, span: 20 }}
- // span={18} offset={4}
-
- >
- <div className="Explore">
- {(explorePosts || [])?.map((item) => (
- <Card post={item} onPost={onPost} />
- ))}
- </div>
- </Col>
- </Row>
- {explorePostsPromise?.status == 'PENDING' && (
- <img className="Preloader" src={load} width="100" height="100" />
- )}
- </>
- )
- }
- export const CExplorePosts = connect(
- (state) => ({
- my_Id: state.auth?.payload?.sub?.id || '',
- countAllPostsUser: state.promise?.countAllPostsUser?.payload,
- explorePosts: state.explore?.explorePosts,
- explorePostsPromise: state.promise?.explorePosts,
- explorePostsCount: state.explore?.explorePostsCount,
- }),
- {
- onExlorePosts: actionFullExplorePostsTypeSaga,
- onPost: actionOnePost,
- onClearExplore: actionClearExplorePostsType,
- },
- )(ExplorePosts)
|