Refresh posts

Author: dantheli

app/(app)/feed/page.tsx

@@ -1,14 +1,19 @@
+"use client";
+
+import { useState } from "react";
 import { PostList } from "@/components/feed/PostList";
 import { CreatePostDialog } from "@/components/feed/CreatePostDialog";
 
 export default function FeedPage() {
+  const [refreshKey, setRefreshKey] = useState(0);
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-semibold">Posts</h1>
-        <CreatePostDialog />
+        <CreatePostDialog onSuccess={() => setRefreshKey((k) => k + 1)} />
       </div>
-      <PostList />
+      <PostList refreshKey={refreshKey} />
     </div>
   );
 }

components/feed/CreatePostDialog.tsx

@@ -25,7 +25,7 @@ const schema = z.object({
 
 type FormData = z.infer<typeof schema>;
 
-export function CreatePostDialog() {
+export function CreatePostDialog({ onSuccess }: { onSuccess?: () => void }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -48,6 +48,7 @@ export function CreatePostDialog() {
       toast.success("Post created!");
       reset();
       setOpen(false);
+      onSuccess?.();
     } catch {
       toast.error("Failed to create post.");
     } finally {

components/feed/PostList.tsx

@@ -4,15 +4,15 @@ import { useEffect, useState } from "react";
 import { Post } from "@/types";
 import { PostCard } from "./PostCard";
 
-export function PostList() {
+export function PostList({ refreshKey }: { refreshKey?: number }) {
   const [posts, setPosts] = useState<Post[]>([]);
 
   useEffect(() => {
     fetch("/api/posts")
       .then((r) => (r.ok ? r.json() : []))
       .then(setPosts)
       .catch(console.error);
-  }, []);
+  }, [refreshKey]);
 
   if (posts.length === 0) {
     return <p className="text-center text-muted-foreground py-12">No posts yet. Be the first!</p>;