From 4330157491de566996ec48d9f50ac29a32521a69 Mon Sep 17 00:00:00 2001 From: "Federico Pasqua (eisterman)" Date: Tue, 1 Apr 2025 11:32:54 +0200 Subject: [PATCH] Complete "Loading Data" --- src/app/layout.tsx | 18 ++++++++---------- src/app/sidebar-contacts.tsx | 27 +++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 src/app/sidebar-contacts.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 339c415..5e7a68a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,10 @@ import type { Metadata } from "next"; -import React from "react"; +import React, { Suspense } from "react"; import "./globals.css"; 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 = { title: "Next.js Address Book", @@ -15,6 +16,8 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const contacts = getContacts(); + return ( @@ -40,14 +43,9 @@ export default function RootLayout({
diff --git a/src/app/sidebar-contacts.tsx b/src/app/sidebar-contacts.tsx new file mode 100644 index 0000000..eb0cebe --- /dev/null +++ b/src/app/sidebar-contacts.tsx @@ -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 }) { + const allContacts = use(contacts); + return ( +
    + {allContacts.map((c) => ( +
  • + + {c.first || c.last ? ( + <> + {c.first} {c.last} + + ) : ( + No Name + )} + {c.favorite ? ( + ★ + ) : null} + +
    • + ))} +
+ ); +} \ No newline at end of file