mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-10 13:18:48 +00:00
Feed works with random testposts
This commit is contained in:
parent
5061e4445f
commit
44e17e6287
5 changed files with 141 additions and 44 deletions
|
@ -1,42 +1,61 @@
|
|||
import React from "react";
|
||||
import Header from "../header";
|
||||
import Footer from "../footer/Footer";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import TestPost from "../TestPost";
|
||||
import "./feed.css";
|
||||
|
||||
function Feed() {
|
||||
return (
|
||||
//<Header/>
|
||||
<div className="feedContainer">
|
||||
const [posts, setPosts] = useState<number[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const feedRef = useRef<HTMLDivElement | null>(null);
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Header/>
|
||||
<Footer/>
|
||||
</div>
|
||||
const fetchPosts = () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
//random shit to differentiate test posts
|
||||
setTimeout(() => {
|
||||
setPosts((prev) => {
|
||||
const newPosts = [];
|
||||
for (let i = 0; i < PAGE_SIZE; i++) {
|
||||
newPosts.push(Math.floor(Math.random() * 100) + 1);
|
||||
}
|
||||
return [...prev, ...newPosts];
|
||||
});
|
||||
setLoading(false);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
// <Footer/>
|
||||
);
|
||||
useEffect(() => {
|
||||
fetchPosts();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
const feed = feedRef.current;
|
||||
if (!feed || loading || !hasMore) return;
|
||||
|
||||
if (feed.scrollTop + feed.clientHeight >= feed.scrollHeight - 100) {
|
||||
fetchPosts();
|
||||
}
|
||||
};
|
||||
|
||||
const feed = feedRef.current;
|
||||
feed?.addEventListener("scroll", onScroll);
|
||||
return () => {
|
||||
feed?.removeEventListener("scroll", onScroll);
|
||||
};
|
||||
}, [loading, hasMore]);
|
||||
|
||||
return (
|
||||
<div className="feedContainer">
|
||||
<main className="feedContent" ref={feedRef}>
|
||||
{posts.map((postId, idx) => (
|
||||
<TestPost key={idx} postId={postId} />
|
||||
))}
|
||||
{loading && <div className="loading">Loading more posts...</div>}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Feed;
|
||||
export default Feed;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue