eisterman/nextjs-address-book
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Complete "Client Side Routing"

Browse Source
This commit is contained in:
Federico Pasqua
2025-04-01 11:13:27 +02:00
parent d2ec794846
commit 90c0dd6812
3 changed files with 138 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/app/contacts/[contactId]/page.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client";
import Form from "next/form";
import { ContactRecord } from "@/app/data";
export default function Contact() {
const contact = {
first: "Your",
last: "Name",
avatar: "https://placecats.com/200/200",
twitter: "your_handle",
notes: "Some notes",
favorite: true,
};
return (
<div id="contact">
<div>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
alt={`${contact.first} ${contact.last} avatar`}
key={contact.avatar}
src={contact.avatar}
/>
</div>
<div>
<h1>
{contact.first || contact.last ? (
<>
{contact.first} {contact.last}
</>
) : (
<i>No Name</i>
)}
<Favorite contact={contact}/>
</h1>
{contact.twitter ? (
<p>
<a
href={`https://twitter.com/${contact.twitter}`}
>
{contact.twitter}
</a>
</p>
) : null}
{contact.notes ? <p>{contact.notes}</p> : null}
<div>
<Form action="edit">
<button type="submit">Edit</button>
</Form>
<Form
action="destroy"
formMethod="post"
onSubmit={(event) => {
const response = confirm(
"Please confirm you want to delete this record."
);
if (!response) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
</div>
</div>
</div>
);
}
function Favorite({
contact,
}: {
contact: Pick<ContactRecord, "favorite">;
}) {
const favorite = contact.favorite;
return (
<Form action="." formMethod="post">
<button
aria-label={
favorite
? "Remove from favorites"
: "Add to favorites"
}
name="favorite"
value={favorite ? "false" : "true"}
>
{favorite ? "★" : "☆"}
</button>
</Form>
);
}

36
src/app/layout.tsx
View File

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
import React from "react";
import "./globals.css";
import Form from "next/form";
import Link from "next/link";
export const metadata: Metadata = {
title: "Next.js Address Book",
@@ -16,7 +18,41 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<div id="sidebar">
<h1>React Router Contacts</h1>
<div>
<Form id="search-form" role="search" action="." formMethod="get">
<input
aria-label="Search contacts"
id="q"
name="q"
placeholder="Search"
type="search"
/>
<div
aria-hidden
hidden={true}
id="search-spinner"
/>
</Form>
<Form action="." formMethod="post">
<button type="submit">New</button>
</Form>
</div>
<nav>
<ul>
<li>
<Link href={`/contacts/1`}>Your Name</Link>
</li>
<li>
<Link href={`/contacts/2`}>Your Friend</Link>
</li>
</ul>
</nav>
</div>
<div id={'detail'}>
{children}
</div>
</body>
</html>
);

35
src/app/page.tsx
View File

@@ -3,39 +3,6 @@ import React from "react";
export default function Home() {
return (
<>
<div id="sidebar">
<h1>React Router Contacts</h1>
<div>
<Form id="search-form" role="search" action='.' formMethod='get'>
<input
aria-label="Search contacts"
id="q"
name="q"
placeholder="Search"
type="search"
/>
<div
aria-hidden
hidden={true}
id="search-spinner"
/>
</Form>
<Form action='.' formMethod="post">
<button type="submit">New</button>
</Form>
</div>
<nav>
<ul>
<li>
<a href={`/contacts/1`}>Your Name</a>
</li>
<li>
<a href={`/contacts/2`}>Your Friend</a>
</li>
</ul>
</nav>
</div>
</>
<div></div>
);
}