Improved UI and compliance with api endpoint restrictions

src/pages/FeedPage.jsx

@@ -1,53 +1,72 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { PostList } from "../components/PostList";
 
-export function FeedPage({ loadFeed }) {
-  const [items, setItems] = useState([]);
+function getPosts(data) {
+  return Array.isArray(data) ? data : data.posts || data.items || [];
+}
+
+export function FeedPage({ loadPosts, editPost, deletePost, loadImage, currentUserId, currentUsername }) {
+  const [posts, setPosts] = useState([]);
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(() => {
+    setError("");
+    setLoading(true);
+    return loadPosts()
+      .then((data) => {
+        const rawPosts = getPosts(data);
+        // Filter out logged-in user's own posts on feed
+        const otherUserPosts = rawPosts.filter((post) => {
+          const authorId = post.author_id ?? post.authorId ?? post.author?.id;
+          if (authorId !== undefined && authorId !== null) {
+            return String(authorId) !== String(currentUserId);
+          }
+          if (post.author_username && currentUsername) {
+            return post.author_username !== currentUsername;
+          }
+          return true;
+        });
+        setPosts(otherUserPosts);
+      })
+      .catch((loadError) => setError(loadError.message))
+      .finally(() => setLoading(false));
+  }, [loadPosts, currentUserId, currentUsername]);
 
   useEffect(() => {
-    let mounted = true;
-    loadFeed()
-      .then((data) => {
-        if (mounted) {
-          setItems(data.items || []);
-        }
-      })
-      .catch((err) => {
-        if (mounted) {
-          setError(err.message);
-        }
-      });
+    refresh();
+  }, [refresh]);
 
-    return () => {
-      mounted = false;
-    };
-  }, [loadFeed]);
+  async function handleEdit(id, data) {
+    await editPost(id, data);
+    await refresh();
+  }
+
+  async function handleDelete(id) {
+    await deletePost(id);
+    await refresh();
+  }
 
   return (
-    <section>
-      <header className="page-head">
-        <h2>Community Feed</h2>
+    <section className="feed-page">
+      <header className="feed-header">
+        <div>
+          <p className="eyebrow">Your daily archive</p>
+          <h2>Community Feed</h2>
+        </div>
+        <span className="feed-status">Explore posts from others</span>
       </header>
-
       {error ? <p className="error-text">{error}</p> : null}
-
-      <div className="post-list">
-        {items.map((item) => (
-          <article key={item.id} className="panel post-card">
-            <div className="post-top">
-              <img src={item.author?.avatarUrl} alt={item.author?.name} />
-              <div>
-                <p>{item.author?.name}</p>
-                <span>@{item.author?.username}</span>
-              </div>
-            </div>
-            <p>{item.content}</p>
-            <button type="button" className="ghost-btn">
-              Like ({item.likes})
-            </button>
-          </article>
-        ))}
-      </div>
+      {loading ? (
+        <p className="post-loading">Loading community feed...</p>
+      ) : posts.length === 0 ? (
+        <div className="panel empty-feed-panel">
+          <h3>No posts from other users yet</h3>
+          <p className="muted">Posts created by you will appear on your profile. Check back later for community updates!</p>
+        </div>
+      ) : (
+        <PostList posts={posts} currentUserId={currentUserId} loadImage={loadImage} onEdit={handleEdit} onDelete={handleDelete} />
+      )}
     </section>
   );
 }