Add Refresh button to feed

app/RefreshButton.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useTransition } from 'react'
+import { refreshFeed } from './actions'
+
+export default function RefreshButton() {
+  const [pending, startTransition] = useTransition()
+
+  return (
+    <div className="flex justify-center border-b border-neutral-800 py-2">
+      <button
+        type="button"
+        disabled={pending}
+        onClick={() => startTransition(() => refreshFeed())}
+        className="rounded-full border border-neutral-700 px-5 py-1.5 text-sm font-semibold transition hover:bg-neutral-900 disabled:opacity-50"
+      >
+        {pending ? 'Refreshing…' : 'Refresh'}
+      </button>
+    </div>
+  )
+}

app/actions.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { redirect } from "next/navigation";
-import { revalidatePath } from "next/cache";
+import { revalidatePath, refresh } from "next/cache";
 import { query } from "@/lib/db";
 import {
   createSession,
@@ -70,6 +70,10 @@ export async function logout() {
   redirect("/login");
 }
 
+export async function refreshFeed(): Promise<void> {
+  refresh();
+}
+
 export async function createPost(formData: FormData): Promise<void> {
   const user = await getCurrentUser();
   if (!user) redirect("/login");

app/page.tsx

@@ -3,6 +3,7 @@ import { getCurrentUser } from "@/lib/auth";
 import { query } from "@/lib/db";
 import Composer from "./Composer";
 import LogoutButton from "./LogoutButton";
+import RefreshButton from "./RefreshButton";
 
 type FeedPost = {
   id: number;
@@ -80,6 +81,8 @@ export default async function Home() {
         </div>
       )}
 
+      <RefreshButton />
+
       <section>
         {posts.length === 0 ? (
           <p className="p-8 text-center text-neutral-500">

next.config.ts

@@ -1,6 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  allowedDevOrigins: ["*.trycloudflare.com"],
   experimental: {
     serverActions: {
       // Allow image uploads up to ~5MB through Server Actions.