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