mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feed is fully functional, but lacks design

Browse source
This commit is contained in:
MisbehavedNinjaRadiator 2025-06-29 09:49:39 +02:00 • committed by MisbehavedNinjaRadiator
parent ea2d36de1c
commit c3a7776fa5
3 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
code/frontend/src/components/Post.tsx
View file

@ -73,7 +73,7 @@ export default function Post({ postId }: PostProps) {
if (!post) { if (!post) {
return ( return (
<Card sx={{ maxWidth: 345, margin: 2 }}> <Card sx={{ maxWidth: 365, margin: 2, width:'100%'}}>
<CardContent> <CardContent>
<Typography>Loading...</Typography> <Typography>Loading...</Typography>
</CardContent> </CardContent>

24
code/frontend/src/components/feed/Feed.tsx
View file

@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
import Post from "../Post"; import Post from "../Post";
import "./feed.css"; import "./feed.css";
import api from "../../api/axios"; import api from "../../api/axios";
import { create } from "axios";
interface PostListItem { interface PostListItem {
id: string; id: string;
@ -21,15 +22,15 @@ function Feed() {
if (loading || !hasMore) return; if (loading || !hasMore) return;
setLoading(true); setLoading(true);
try { try {
const params: any = { limit: PAGE_SIZE }; let url = `/feed?limit=${PAGE_SIZE}`;
if (nextCursor) params.createdAt = nextCursor; if (nextCursor) {
url = `/feed?createdAt=${encodeURIComponent(nextCursor)}&limit=${PAGE_SIZE}`;
}
interface FeedResponse { interface FeedResponse {
posts: PostListItem[]; posts: PostListItem[];
nextCursor: string | null; nextCursor: string | null;
} }
const response = await api.get<FeedResponse>("/feed?limit=10"); const response = await api.get<FeedResponse>(url);
//const response = await api.get<FeedResponse>("http://localhost:3001/api/feed?limit=10");
console.log("Feed response:", response.data); console.log("Feed response:", response.data);
const { posts: newPosts, nextCursor: newCursor } = response.data; const { posts: newPosts, nextCursor: newCursor } = response.data;
setPosts((prev) => [...prev, ...newPosts]); setPosts((prev) => [...prev, ...newPosts]);
@ -48,16 +49,17 @@ function Feed() {
useEffect(() => { useEffect(() => {
const onScroll = () => { const onScroll = () => {
const feed = feedRef.current; if (loading || !hasMore) return;
if (!feed || loading || !hasMore) return; if (
if (feed.scrollTop + feed.clientHeight >= feed.scrollHeight - 100) { window.innerHeight + window.scrollY >=
document.body.offsetHeight - 100
) {
fetchPosts(); fetchPosts();
} }
}; };
const feed = feedRef.current; window.addEventListener("scroll", onScroll);
feed?.addEventListener("scroll", onScroll);
return () => { return () => {
feed?.removeEventListener("scroll", onScroll); window.removeEventListener("scroll", onScroll);
}; };
}, [loading, hasMore, nextCursor]); }, [loading, hasMore, nextCursor]);

1
code/frontend/src/components/feed/feed.css
View file

@ -13,6 +13,7 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
height: 80vh;
} }
.loading { .loading {
width: 100%; width: 100%;