Merge pull request #14 from austinlparker/changeCaching

Revalidate cache when new entries arrive

Author: austinlparker

.gitignore

@@ -37,3 +37,5 @@ next-env.d.ts
 
 # Local Netlify folder
 .netlify
+
+.env

src/app/api/revalidate/route.ts

@@ -0,0 +1,24 @@
+import { revalidatePath } from "next/cache";
+import { NextRequest } from "next/server";
+
+export async function POST(request: NextRequest) {
+  const token = request.headers.get("authorization");
+
+  if (token !== `Bearer ${process.env.REVALIDATION_TOKEN}`) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  try {
+    revalidatePath("/", "page");
+    revalidatePath("/feed", "page");
+
+    return new Response("Revalidated", { status: 200 });
+  } catch (error: unknown) {
+    // Log the error and return a 500
+    console.error("Revalidation error:", error);
+    return new Response(
+      `Error revalidating: ${error instanceof Error ? error.message : "Unknown error"}`,
+      { status: 500 },
+    );
+  }
+}

src/app/api/test/route.ts

@@ -0,0 +1,32 @@
+import { saveEntry } from "@/lib/store";
+import { ChangelogEntry } from "@/types/entry";
+
+export async function POST() {
+  // Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return new Response("Test endpoint only available in development", {
+      status: 403,
+    });
+  }
+
+  const testEntry: ChangelogEntry = {
+    id: Date.now(), // Use timestamp as ID for test entries
+    title: `Test Entry ${new Date().toISOString()}`,
+    description: "This is a test entry to verify cache revalidation",
+    date: new Date().toISOString(),
+    metadata: {
+      sourceRepo: "open-telemetry/test-repo",
+      state: "opened",
+      url: "https://github.com/open-telemetry/test-repo/pull/123",
+      author: "test-user",
+    },
+  };
+
+  try {
+    await saveEntry(testEntry);
+    return new Response("Test entry added", { status: 200 });
+  } catch (error) {
+    console.error("Error adding test entry:", error);
+    return new Response("Error adding test entry", { status: 500 });
+  }
+}

src/app/page.tsx

@@ -1,5 +1,6 @@
 import { getAllEntries } from "@/lib/store";
 import { ChangelogList } from "@/components/list";
+import { TestControls } from "@/components/test-controls";
 import { RiRssFill, RiGithubFill, RiExternalLinkLine } from "react-icons/ri";
 
 export const revalidate = 60;
@@ -48,6 +49,8 @@ export default async function Home() {
           </div>
         </header>
 
+        {process.env.NODE_ENV === "development" && <TestControls />}
+
         <main
           id="main-content"
           role="main"

src/components/test-controls.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+
+export function TestControls() {
+  const [status, setStatus] = useState<string>("");
+
+  const addTestEntry = async () => {
+    try {
+      setStatus("Adding test entry...");
+      const response = await fetch("/api/test", {
+        method: "POST",
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      setStatus("Test entry added! Check if the page updates.");
+
+      // Clear status after 3 seconds
+      setTimeout(() => setStatus(""), 3000);
+    } catch (error) {
+      setStatus(
+        `Error: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
+      <button
+        onClick={addTestEntry}
+        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      >
+        Add Test Entry
+      </button>
+      {status && (
+        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+          {status}
+        </p>
+      )}
+    </div>
+  );
+}

src/lib/store.ts

@@ -135,18 +135,41 @@ const MOCK_ENTRIES: ChangelogEntry[] = [
   },
 ];
 
+// In-memory store for development
+const devStore: ChangelogEntry[] = [];
+
 export async function saveEntry(entry: ChangelogEntry) {
+  if (process.env.NODE_ENV === "development") {
+    console.log("Development mode: saving to in-memory store");
+    // Add to start of array to match the sorting in getAllEntries
+    devStore.unshift(entry);
+    return;
+  }
+
   try {
     const store = getStore("changelog-store");
     await store.setJSON(entry.id.toString(), entry);
+
+    // Trigger revalidation
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000";
+    await fetch(`${baseUrl}/api/revalidate`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${process.env.REVALIDATION_TOKEN}`,
+      },
+    });
   } catch (error) {
     console.warn("Failed to save entry:", error);
-    // In development/build, just log the entry
     console.log("Would have saved:", entry);
   }
 }
 
 export async function getAllEntries(): Promise<ChangelogEntry[]> {
+  if (process.env.NODE_ENV === "development") {
+    console.log("Development mode: reading from in-memory store");
+    return devStore.length > 0 ? devStore : MOCK_ENTRIES;
+  }
+
   try {
     const store = getStore("changelog-store");
     const list = await store.list();
@@ -164,7 +187,6 @@ export async function getAllEntries(): Promise<ChangelogEntry[]> {
     );
   } catch (error) {
     console.warn("Failed to get entries:", error);
-    // Return mock data in development/build
     return MOCK_ENTRIES;
   }
 }