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) {
return (
<Card sx={{ maxWidth: 345, margin: 2 }}>
<Card sx={{ maxWidth: 365, margin: 2, width:'100%'}}>
<CardContent>
<Typography>Loading...</Typography>
</CardContent>

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

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

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