From af080480e4c7876ded01fbe3b135595a1f79198b Mon Sep 17 00:00:00 2001
From: "Federico Pasqua (eisterman)" <federico.pasqua.96@gmail.com>
Date: Sun, 30 Mar 2025 21:25:32 +0200
Subject: [PATCH] Complete "Loading Data"

---
 src/routes/__root.tsx | 53 +++++++++++++++++++++++++++++++++----------
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index f657013..0a4ffeb 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,8 +1,22 @@
 import { Outlet, createRootRoute, Link } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+import { getContacts } from "@/data";
+
+async function fetchContacts() {
+  const contacts = await getContacts();
+  return { contacts };
+}
 
 export const Route = createRootRoute({
-  component: () => (
+  loader: fetchContacts,
+  component: RootLayout,
+  notFoundComponent: NotFoundComponent,
+});
+
+function RootLayout() {
+  const { contacts } = Route.useLoaderData();
+
+  return (
     <>
       <div id="sidebar">
         <h1>React Router Contacts</h1>
@@ -22,14 +36,30 @@ export const Route = createRootRoute({
           </form>
         </div>
         <nav>
-          <ul>
-            <li>
-              <Link to="/contacts/$contractId" params={{ contractId: '1' }}>Your Name</Link>
-            </li>
-            <li>
-              <Link to="/contacts/$contractId" params={{ contractId: '2' }}>Your Friend</Link>
-            </li>
-          </ul>
+          {contacts.length ? (
+            <ul>
+              {contacts.map((contact) => (
+                <li key={contact.id}>
+                  <Link to="/contacts/$contractId" params={{ contractId: contact.id }}>
+                    {contact.first || contact.last ? (
+                      <>
+                        {contact.first} {contact.last}
+                      </>
+                    ) : (
+                      <i>No Name</i>
+                    )}
+                    {contact.favorite ? (
+                      <span>★</span>
+                    ) : null}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p>
+              <i>No contacts</i>
+            </p>
+          )}
         </nav>
       </div>
       <div id={'detail'}>
@@ -37,9 +67,8 @@ export const Route = createRootRoute({
       </div>
       <TanStackRouterDevtools/>
     </>
-  ),
-  notFoundComponent: NotFoundComponent,
-});
+  );
+}
 
 function NotFoundComponent() {
   return (