PROJECT_HIPSTAGRAM/src/pages/feedPosts/index.js

import React, { useState, useEffect } from 'react'
import { actionFullAllGetPostsSaga } from '../../actions/typeSaga/feedTypesSaga'
import { actionAddCommentFeedTypeSaga } from '../../actions/typeSaga/commentTypesSaga'
import { actionClearFeedPostsType } from '../../actions/types/feedTypes'
import { Provider, connect } from 'react-redux'
import { Divider } from 'antd'
import { CPost } from '../onePost'
import { Row, Col } from 'antd'
import LinkToUser from '../../components/LinkToUser'
import { Comments } from '../../components/comment/Comment'
import AddComment from '../../components/comment/AddComment'
import { MyCarousel } from '../../components/post/Carousel'
import load from '../../materials/load.gif'
import { actionFindSubCommentTypeSaga } from '../../actions/typeSaga/postTypesSaga'
import { CLikeFeed } from '../../components/like/Like'
const MyPostFeed = ({
  postsFeed = [],
  onPostsFeed,
  addComment,
  onClearFeed,
  postsFeedPromise,
}) => {
  const [checkScroll, setScroll] = useState(true)

  useEffect(() => {
    if (checkScroll) {
      onPostsFeed()
    }
    setScroll(false)
  }, [checkScroll])

  useEffect(() => {
    document.addEventListener('scroll', scrollHandler)
    return () => {
      document.removeEventListener('scroll', scrollHandler)
      onClearFeed()
    }
  }, [])

  useEffect(() => {
    document.addEventListener('scroll', scrollHandler)
  }, [postsFeed.length])

  const scrollHandler = (e) => {
    if (
      e.target.documentElement.scrollHeight -
        (e.target.documentElement.scrollTop + window.innerHeight) <
      200
    ) {
      setScroll(true)
      document.removeEventListener('scroll', scrollHandler)
    }
  }

  return (
    <div style={{ marginTop: '50px' }}>
      <div className="PostsFeed">
        <Row>
          <Col span={12} offset={6}>
            <div>
              {postsFeed?.length == 0 && (
                <div style={{ textAlign: 'center' }}>
                  <h1> You have no posts to feed! </h1>
                  <h1> Post and follow other users! </h1>
                </div>
              )}
              {(postsFeed || []).map(
                ({ _id, images, title, text, owner, comments, likes }) => (
                  <div className="PostFeed">
                    <LinkToUser
                      _id={owner?._id}
                      key={_id}
                      style={{ marginLeft: '50px' }}
                      login={owner?.login}
                      avatar={owner?.avatar}
                      size={50}
                    />
                    <MyCarousel images={images} />
                    <div style={{ margin: '0 10%' }}>
                      <h2 className="Title"> Title: {title || ''}</h2>
                      <h2 className="Title"> Text: {text || ''}</h2>
                      <Divider>Comments</Divider>
                      <div style={{ margin: '10px', position: 'relative' }}>
                        <div className="ScrollForFeed">
                          <CCommentsForFeed postId={_id} comments={comments} />
                        </div>
                        <div style={{ display: 'flex', margin: '20px 0px' }}>
                          <CLikeFeed likes={likes} postId={_id} />

                          <AddComment
                            addComment={addComment}
                            postId={_id}
                            style={{
                              position: 'absolute',
                              bottom: '70px',
                              zIndex: '100',
                            }}
                            width={'300px'}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                ),
              )}
            </div>
          </Col>
        </Row>
        {postsFeedPromise?.status == 'PENDING' && (
          <img
            style={{
              display: 'block',
              margin: '0 auto',
              padding: '10px',
            }}
            src={load}
            width="100"
            height="100"
          />
        )}
      </div>
    </div>
  )
}

const CCommentsForFeed = connect(
  (state) => ({
    addSubComment: state.promise?.addSubComment,
    addComment: state.promise?.addComment?.payload,
  }),
  {
    findSubComment: actionFindSubCommentTypeSaga,
  },
)(Comments)

export const CPostForFeed = connect(
  (state) => ({
    postsFeed: state.feed?.postsFeed || [],
    addComment: state.promise?.addComment?.payload,
    postsFeedPromise: state.promise?.postsFeed,
  }),
  {
    onPostsFeed: actionFullAllGetPostsSaga,
    onClearFeed: actionClearFeedPostsType,
    addComment: actionAddCommentFeedTypeSaga,
  },
)(MyPostFeed)