Very basic feed of basic layout posts

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 <IconButton {...other} />;
@@ -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 (
     <Card sx={{ maxWidth: 345 }}>
       <CardHeader
         avatar={
           <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">     
-            R
+            {user ? user.charAt(0).toUpperCase() : 'U'}   //Todo: when fetching change to user.name or sth
           </Avatar>
         }
         action={
@@ -63,20 +72,17 @@ export default function Post() {
             <MoreVertIcon />
           </IconButton>
         }
-        title="Shrimp and Chorizo Paella"
+        title={title}
-        subheader="September 14, 2016"
+        subheader= {createdAt}
       />
       <CardMedia
         component="img"
         height="194"
-        image="/static/images/cards/paella.jpg"
+        image= {media}
-        alt="Paella dish"
       />
       <CardContent>
         <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          This impressive paella is a perfect party dish and a fun meal to cook
+          {content}
-          together with your guests. Add 1 cup of frozen peas along with the mussels,
-          if you like.
         </Typography>
       </CardContent>
       <CardActions disableSpacing>
@@ -97,31 +103,7 @@ export default function Post() {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography sx={{ marginBottom: 2 }}>Method:</Typography>
+          <Typography sx={{ marginBottom: 2 }}>{expandedContent}</Typography>
-          <Typography sx={{ marginBottom: 2 }}>
-            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
-            aside for 10 minutes.
-          </Typography>
-          <Typography sx={{ marginBottom: 2 }}>
-            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.
-          </Typography>
-          <Typography sx={{ marginBottom: 2 }}>
-            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&apos;t open.)
-          </Typography>
-          <Typography>
-            Set aside off of the heat to let rest for 10 minutes, and then serve.
-          </Typography>
         </CardContent>
       </Collapse>
     </Card>

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<number[]>([]);
@@ -10,19 +9,25 @@ function Feed() {
   const feedRef = useRef<HTMLDivElement | null>(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 (
     <div className="feedContainer">
-        
+      <main className="feedContent" ref={feedRef}>
-      <main className="feedContent" ref={feedRef}>^
+        {posts.map((postId) => (
-        <Post/>
+          <Post key={postId} postId={postId} />
-        {posts.map((postId, idx) => (
-          <TestPost key={idx} postId={postId} />
         ))}
         {loading && <div className="loading">Loading more posts...</div>}
+        {!hasMore && <div>No more posts</div>}
       </main>
     </div>
   );

code/frontend/src/components/feed/feed.css

@@ -28,7 +28,7 @@
 /* Desktop responsive behavior */
 @media (min-width: 768px) {
   .feedContent {
-    width: 600px;
+    width: 400px;
     margin: 0 auto;
     padding: 2rem 0;
   }