diff --git a/code/frontend/src/components/Post.tsx b/code/frontend/src/components/Post.tsx
index 372a074..edaa81e 100644
--- a/code/frontend/src/components/Post.tsx
+++ b/code/frontend/src/components/Post.tsx
@@ -18,7 +18,9 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
interface ExpandMoreProps extends IconButtonProps {
expand: boolean;
}
-
+interface PostProps {
+ postId: number;
+}
const ExpandMore = styled((props: ExpandMoreProps) => {
const { expand, ...other } = props;
return ;
@@ -43,19 +45,26 @@ const ExpandMore = styled((props: ExpandMoreProps) => {
],
}));
-export default function Post() {
+export default function Post({postId}: PostProps) {
const [expanded, setExpanded] = React.useState(false);
+ const content = "Fetch content here";
+ const expandedContent = "Fetch expanded here"
+ const title = "Fetch heading here";
+ const createdAt = "Fetch created at here";
+ const user = "Fetch user here";
+ const media = "Fetch media here (path)";
const handleExpandClick = () => {
setExpanded(!expanded);
};
+
return (
- R
+
+ {user ? user.charAt(0).toUpperCase() : 'U'} //Todo: when fetching change to user.name or sth
}
action={
@@ -63,20 +72,17 @@ export default function Post() {
}
- title="Shrimp and Chorizo Paella"
- subheader="September 14, 2016"
+ title={title}
+ subheader= {createdAt}
/>
- This impressive paella is a perfect party dish and a fun meal to cook
- together with your guests. Add 1 cup of frozen peas along with the mussels,
- if you like.
+ {content}
@@ -97,31 +103,7 @@ export default function Post() {
- Method:
-
- Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
- aside for 10 minutes.
-
-
- Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
- medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
- occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
- large plate and set aside, leaving chicken and chorizo in the pan. Add
- pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
- stirring often until thickened and fragrant, about 10 minutes. Add
- saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
-
-
- Add rice and stir very gently to distribute. Top with artichokes and
- peppers, and cook without stirring, until most of the liquid is absorbed,
- 15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
- mussels, tucking them down into the rice, and cook again without
- stirring, until mussels have opened and rice is just tender, 5 to 7
- minutes more. (Discard any mussels that don't open.)
-
-
- Set aside off of the heat to let rest for 10 minutes, and then serve.
-
+ {expandedContent}
diff --git a/code/frontend/src/components/feed/Feed.tsx b/code/frontend/src/components/feed/Feed.tsx
index b878629..6bf3dd2 100644
--- a/code/frontend/src/components/feed/Feed.tsx
+++ b/code/frontend/src/components/feed/Feed.tsx
@@ -1,7 +1,6 @@
import React, { useState, useEffect, useRef } from "react";
-import TestPost from "../../TestPost";
-import "./feed.css";
import Post from "../Post";
+import "./feed.css";
function Feed() {
const [posts, setPosts] = useState([]);
@@ -10,19 +9,25 @@ function Feed() {
const feedRef = useRef(null);
const PAGE_SIZE = 10;
+ // Dummy fetch function that simulates loading posts by ID
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);
+ newPosts.push(prev.length + i + 1);
}
return [...prev, ...newPosts];
});
setLoading(false);
+
+ // Stop after 50 posts, just as an example
+ if (posts.length + PAGE_SIZE >= 50) {
+ setHasMore(false);
+ }
}, 800);
};
@@ -49,13 +54,12 @@ function Feed() {
return (
-
-
^
-
- {posts.map((postId, idx) => (
-
+
+ {posts.map((postId) => (
+
))}
{loading && Loading more posts...
}
+ {!hasMore && No more posts
}