From aa81948f29b302ef2a95fc4f1c2c7311cb6298c1 Mon Sep 17 00:00:00 2001
From: "Federico Pasqua (eisterman)" <federico.pasqua.96@gmail.com>
Date: Tue, 1 Apr 2025 17:14:43 +0200
Subject: [PATCH] Edit Contact but without loading?

---
 .../contacts/[contactId]/Contact.tsx          | 11 ++-
 .../contacts/[contactId]/edit/loading.tsx     |  5 ++
 .../contacts/[contactId]/edit/page.tsx        | 69 +++++++++++++++++++
 .../(sidebar)/contacts/[contactId]/page.tsx   |  4 +-
 src/app/(sidebar)/layout.tsx                  |  5 +-
 src/app/(sidebar)/loaders.ts                  | 10 +++
 6 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 src/app/(sidebar)/contacts/[contactId]/edit/loading.tsx
 create mode 100644 src/app/(sidebar)/contacts/[contactId]/edit/page.tsx
 create mode 100644 src/app/(sidebar)/loaders.ts

diff --git a/src/app/(sidebar)/contacts/[contactId]/Contact.tsx b/src/app/(sidebar)/contacts/[contactId]/Contact.tsx
index e54c418..edd5764 100644
--- a/src/app/(sidebar)/contacts/[contactId]/Contact.tsx
+++ b/src/app/(sidebar)/contacts/[contactId]/Contact.tsx
@@ -3,6 +3,7 @@
 import { ContactRecord } from "@/app/data";
 import Form from "next/form";
 import { use } from "react";
+import { useRouter } from "next/navigation";
 
 export default function Contact({
   contact
@@ -10,6 +11,7 @@ export default function Contact({
   contact: Promise<ContactRecord>
 }) {
   const c = use(contact);
+  const router = useRouter();
 
   return (
     <div id="contact">
@@ -47,9 +49,12 @@ export default function Contact({
         {c.notes ? <p>{c.notes}</p> : null}
 
         <div>
-          <Form action="edit">
-            <button type="submit">Edit</button>
-          </Form>
+          <button
+            type="button"
+            onClick={() => router.push(`/contacts/${c.id}/edit`)}
+          >
+            Edit
+          </button>
 
           <Form
             action="destroy"
diff --git a/src/app/(sidebar)/contacts/[contactId]/edit/loading.tsx b/src/app/(sidebar)/contacts/[contactId]/edit/loading.tsx
new file mode 100644
index 0000000..9c8ee3e
--- /dev/null
+++ b/src/app/(sidebar)/contacts/[contactId]/edit/loading.tsx
@@ -0,0 +1,5 @@
+export default function ContactLoading() {
+  return (
+    <div>Loading Edit Contact...</div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx b/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx
new file mode 100644
index 0000000..ce2068c
--- /dev/null
+++ b/src/app/(sidebar)/contacts/[contactId]/edit/page.tsx
@@ -0,0 +1,69 @@
+import Form from "next/form";
+import { fetchContact } from "@/app/(sidebar)/loaders";
+import { notFound } from "next/navigation";
+
+
+export default async function EditContactPage({
+  params
+}: {
+  params: Promise<{ contactId: string }>
+}) {
+  const { contactId } = await params;
+  const contact = await fetchContact(contactId).then((c) => {
+    if (c === null) notFound();
+    return c;
+  });
+
+  return (
+    <Form key={contact.id} id="contact-form" formMethod="post" action=".">
+      <p>
+        <span>Name</span>
+        <input
+          aria-label="First name"
+          defaultValue={contact.first}
+          name="first"
+          placeholder="First"
+          type="text"
+        />
+        <input
+          aria-label="Last name"
+          defaultValue={contact.last}
+          name="last"
+          placeholder="Last"
+          type="text"
+        />
+      </p>
+      <label>
+        <span>Twitter</span>
+        <input
+          defaultValue={contact.twitter}
+          name="twitter"
+          placeholder="@jack"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Avatar URL</span>
+        <input
+          aria-label="Avatar URL"
+          defaultValue={contact.avatar}
+          name="avatar"
+          placeholder="https://example.com/avatar.jpg"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Notes</span>
+        <textarea
+          defaultValue={contact.notes}
+          name="notes"
+          rows={6}
+        />
+      </label>
+      <p>
+        <button type="submit">Save</button>
+        <button type="button">Cancel</button>
+      </p>
+    </Form>
+  );
+}
\ No newline at end of file
diff --git a/src/app/(sidebar)/contacts/[contactId]/page.tsx b/src/app/(sidebar)/contacts/[contactId]/page.tsx
index fbf41fe..c1ac2e0 100644
--- a/src/app/(sidebar)/contacts/[contactId]/page.tsx
+++ b/src/app/(sidebar)/contacts/[contactId]/page.tsx
@@ -1,6 +1,6 @@
-import { getContact } from "@/app/data";
 import { notFound } from "next/navigation";
 import Contact from "@/app/(sidebar)/contacts/[contactId]/Contact";
+import { fetchContact } from "@/app/(sidebar)/loaders";
 
 export default async function ContactPage({
   params
@@ -8,7 +8,7 @@ export default async function ContactPage({
   params: Promise<{ contactId: string }>
 }) {
   const { contactId } = await params;
-  const contact = getContact(contactId).then((c) => {
+  const contact = fetchContact(contactId).then((c) => {
     if (c === null) notFound();
     return c;
   });
diff --git a/src/app/(sidebar)/layout.tsx b/src/app/(sidebar)/layout.tsx
index 7fa8391..b2a7752 100644
--- a/src/app/(sidebar)/layout.tsx
+++ b/src/app/(sidebar)/layout.tsx
@@ -2,8 +2,9 @@ import React, { Suspense } from "react";
 import Link from "next/link";
 import Form from "next/form";
 import ContactList from "./sidebar-contacts";
-import { createEmptyContact, getContacts } from "@/app/data";
+import { createEmptyContact } from "@/app/data";
 import { revalidatePath } from "next/cache";
+import { fetchContacts } from "@/app/(sidebar)/loaders";
 
 async function newContact() {
   "use server";
@@ -16,7 +17,7 @@ export default function SidebarRootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const contacts = getContacts();
+  const contacts = fetchContacts();
 
   return (
     <>
diff --git a/src/app/(sidebar)/loaders.ts b/src/app/(sidebar)/loaders.ts
new file mode 100644
index 0000000..f99c6a1
--- /dev/null
+++ b/src/app/(sidebar)/loaders.ts
@@ -0,0 +1,10 @@
+import { getContact, getContacts } from "@/app/data";
+import { cache } from "react";
+
+export const fetchContacts = cache(async () => {
+  return await getContacts();
+});
+
+export const fetchContact = cache(async (contactId: string) => {
+  return await getContact(contactId);
+});