From 57c7440e656f5f2330ba1ece06c406fb7adb0099 Mon Sep 17 00:00:00 2001
From: "Federico Pasqua (eisterman)" <federico.pasqua.96@gmail.com>
Date: Wed, 2 Apr 2025 16:51:33 +0200
Subject: [PATCH] Invalidation when creating new is correct, but the
 invalidation when editing a contact doesn't work properly.

---
 src/app/(sidebar)/contacts/[contactId]/edit/page.tsx | 4 ++++
 src/app/(sidebar)/contacts/[contactId]/page.tsx      | 5 ++++-
 src/app/(sidebar)/layout.tsx                         | 2 +-
 src/app/(sidebar)/loaders.ts                         | 6 ++++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx b/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx
index e0ffd1e..aed09f7 100644
--- a/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx
+++ b/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx
@@ -2,12 +2,16 @@ import Form from "next/form";
 import { fetchContact } from "@/app/(sidebar)/loaders";
 import { notFound, redirect } from "next/navigation";
 import { updateContact } from "@/app/data";
+import { revalidatePath } from "next/cache";
 
 
 async function editContact(contactId: string, formData: FormData) {
   "use server";
   const updates = Object.fromEntries(formData);
   await updateContact(contactId, updates);
+  revalidatePath('/(sidebar)', 'layout');
+  revalidatePath(`/contacts/${contactId}`, 'page');
+  revalidatePath(`/contacts/${contactId}/edit`, 'page');
   redirect(`/contacts/${contactId}`);  // This makes the server component data be reloaded.
   /*
    * The server component architecture is a HTMX-like structure where the component rendered is STATE-LESS
diff --git a/src/app/(sidebar)/contacts/[contactId]/page.tsx b/src/app/(sidebar)/contacts/[contactId]/page.tsx
index c1ac2e0..780d507 100644
--- a/src/app/(sidebar)/contacts/[contactId]/page.tsx
+++ b/src/app/(sidebar)/contacts/[contactId]/page.tsx
@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import Contact from "@/app/(sidebar)/contacts/[contactId]/Contact";
 import { fetchContact } from "@/app/(sidebar)/loaders";
+import React, { Suspense } from "react";
 
 export default async function ContactPage({
   params
@@ -14,6 +15,8 @@ export default async function ContactPage({
   });
 
   return (
-    <Contact contact={contact}/>
+    <Suspense fallback={<div>Loading contact...</div>}>
+      <Contact contact={contact}/>
+    </Suspense>
   );
 }
diff --git a/src/app/(sidebar)/layout.tsx b/src/app/(sidebar)/layout.tsx
index b2a7752..e66ce72 100644
--- a/src/app/(sidebar)/layout.tsx
+++ b/src/app/(sidebar)/layout.tsx
@@ -9,7 +9,7 @@ import { fetchContacts } from "@/app/(sidebar)/loaders";
 async function newContact() {
   "use server";
   await createEmptyContact();
-  revalidatePath('/');
+  revalidatePath('/(sidebar)', 'layout');
 }
 
 export default function SidebarRootLayout({
diff --git a/src/app/(sidebar)/loaders.ts b/src/app/(sidebar)/loaders.ts
index 6df7e48..9a7e1a6 100644
--- a/src/app/(sidebar)/loaders.ts
+++ b/src/app/(sidebar)/loaders.ts
@@ -1,11 +1,13 @@
 import { getContact, getContacts } from "@/app/data";
 
+// This files is a non-needed interface file. I can directly call getContact/s into Server Components.
+
 export const fetchContacts = async () => {
-  console.log("fetch contacts")
+  console.log("fetch contacts");
   return await getContacts();
 };
 
 export const fetchContact = async (contactId: string) => {
-  console.log(`fetch contact ${contactId}`)
+  console.log(`fetch contact ${contactId}`);
   return await getContact(contactId);
 };