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;