index.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import { actionOnePost } from '../../actions/query/postQuery'
  2. import { actionFullExplorePostsTypeSaga } from '../../actions/typeSaga/exploreTypesSaga'
  3. import { Row, Col } from 'antd'
  4. import { Card } from '../../components/post/PostCard'
  5. import React, { useEffect, useState } from 'react'
  6. import { connect } from 'react-redux'
  7. import { actionClearExplorePostsType } from '../../actions/types/exploreTypes'
  8. import load from '../../materials/load.gif'
  9. const ExplorePosts = ({
  10. explorePosts = [],
  11. onPost,
  12. onClearExplore,
  13. onExlorePosts,
  14. explorePostsPromise,
  15. }) => {
  16. const [checkScroll, setScroll] = useState(true)
  17. useEffect(() => {
  18. if (checkScroll) {
  19. onExlorePosts()
  20. }
  21. setScroll(false)
  22. }, [checkScroll])
  23. useEffect(() => {
  24. document.addEventListener('scroll', scrollHandler)
  25. return () => {
  26. document.removeEventListener('scroll', scrollHandler)
  27. onClearExplore()
  28. }
  29. }, [])
  30. useEffect(() => {
  31. document.addEventListener('scroll', scrollHandler)
  32. }, [explorePosts.length])
  33. const scrollHandler = (e) => {
  34. if (
  35. e.target.documentElement.scrollHeight -
  36. (e.target.documentElement.scrollTop + window.innerHeight) <
  37. 200
  38. ) {
  39. setScroll(true)
  40. document.removeEventListener('scroll', scrollHandler)
  41. }
  42. }
  43. return (
  44. <>
  45. <Row>
  46. <Col span={18} offset={4}>
  47. <div className="Explore">
  48. {(explorePosts || [])?.map((item) => (
  49. <Card post={item} onPost={onPost} />
  50. ))}
  51. </div>
  52. </Col>
  53. </Row>
  54. {explorePostsPromise?.status == 'PENDING' && (
  55. <img className="Preloader" src={load} width="100" height="100" />
  56. )}
  57. </>
  58. )
  59. }
  60. export const CExplorePosts = connect(
  61. (state) => ({
  62. my_Id: state.auth?.payload?.sub?.id || '',
  63. countAllPostsUser: state.promise?.countAllPostsUser?.payload,
  64. explorePosts: state.explore?.explorePosts,
  65. explorePostsPromise: state.promise?.explorePosts,
  66. explorePostsCount: state.explore?.explorePostsCount,
  67. }),
  68. {
  69. onExlorePosts: actionFullExplorePostsTypeSaga,
  70. onPost: actionOnePost,
  71. onClearExplore: actionClearExplorePostsType,
  72. },
  73. )(ExplorePosts)