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 (<> {listIdPosts && listIdPosts.map((post, index) => )} ) } export default Feed;