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

Complete "Loading Data"

Browse Source
This commit is contained in:
Federico Pasqua
2025-04-01 11:32:54 +02:00
parent 90c0dd6812
commit 4330157491
2 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/layout.tsx
View File

@@ -1,9 +1,10 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import React from "react"; import React, { Suspense } from "react";
import "./globals.css"; import "./globals.css";
import Form from "next/form"; import Form from "next/form";
import Link from "next/link"; import ContactList from "@/app/sidebar-contacts";
import { getContacts } from "@/app/data";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Next.js Address Book", title: "Next.js Address Book",
@@ -15,6 +16,8 @@ export default function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const contacts = getContacts();
return ( return (
<html lang="en"> <html lang="en">
<body> <body>
@@ -40,14 +43,9 @@ export default function RootLayout({
</Form> </Form>
</div> </div>
<nav> <nav>
<ul> <Suspense fallback={<div>Loading...</div>}>
<li> <ContactList contacts={contacts}/>
<Link href={`/contacts/1`}>Your Name</Link> </Suspense>
</li>
<li>
<Link href={`/contacts/2`}>Your Friend</Link>
</li>
</ul>
</nav> </nav>
</div> </div>
<div id={'detail'}> <div id={'detail'}>

27
src/app/sidebar-contacts.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { ContactRecord } from "@/app/data";
import React, { use } from "react";
import Link from "next/link";
export default function ContactList({ contacts }: { contacts: Promise<ContactRecord[]> }) {
const allContacts = use(contacts);
return (
<ul>
{allContacts.map((c) => (
<li key={c.id}>
<Link href={`/contacts/${c.id}`}>
{c.first || c.last ? (
<>
{c.first} {c.last}
</>
) : (
<i>No Name</i>
)}
{c.favorite ? (
<span>★</span>
) : null}
</Link>
</li>
))}
</ul>
);
}