hipstagram/src/components/Feed.js

import OwnerHeader from "./OwnerHeader";
import {useEffect, useState} from "react";
import styled from "styled-components";
import {gqlPostsFeed} from "../shared/services&utilits/gqlRequest";
import PostFeed from "./PostFeed";

const FeedContainer = styled.div`
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
`
const FeedPostWrapper = styled.div`
  margin-bottom: 20px;
  width: 400px;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;

`

function Feed() {
    const [listIdPosts, setListIdPosts] = useState([]);
    const [shouldLoadMore, setShoulLoadMore] = useState(false);
    useEffect(() => {
        getData();
        window.addEventListener('scroll', scrollHandler);
        return () => {
            window.removeEventListener('scroll', scrollHandler);
        };
    }, [])

    useEffect(()=>{
        if  (shouldLoadMore){
            getData();
            setShoulLoadMore(false)
        }
    })

    function getData() {
        gqlPostsFeed(listIdPosts.length).then((res)=>res.json()).then((response) => {
            setListIdPosts([...listIdPosts, ...response.data.PostFind])
        })

    }

    function scrollHandler() {
        const documentHeight = document.body.offsetHeight;
        const screenHeight = window.innerHeight;
        const scroll = window.scrollY;
        const currentScrollPosition = screenHeight + scroll;
        if (currentScrollPosition >= documentHeight - 200) {
            setShoulLoadMore(true)
        }
    }

    return (<>
            <OwnerHeader/>
            <FeedContainer>
                {listIdPosts && listIdPosts.map((post, index) =>
                    <FeedPostWrapper key={index}>
                        <PostFeed post={post} key={index}/>
                    </FeedPostWrapper>
                )}
            </FeedContainer>
        </>

    )
}

export default Feed;