Parity with starting state of RRv7 Tutorial Address Book

2025-04-01 10:57:36 +02:00
parent cf2cd294ee
commit d2ec794846
10 changed files with 899 additions and 298 deletions
--- a/src/app/data.ts
+++ b/src/app/data.ts
@@ -0,0 +1,320 @@
+////////////////////////////////////////////////////////////////////////////////
+// 🛑 Nothing in here has anything to do with React Router, it's just a fake database
+////////////////////////////////////////////////////////////////////////////////
+// noinspection UnnecessaryLocalVariableJS,JSUnusedGlobalSymbols
+
+import { matchSorter } from "match-sorter";
+// @ts-expect-error - no types, but it's a tiny function
+import sortBy from "sort-by";
+import invariant from "tiny-invariant";
+
+type ContactMutation = {
+  id?: string;
+  first?: string;
+  last?: string;
+  avatar?: string;
+  twitter?: string;
+  notes?: string;
+  favorite?: boolean;
+};
+
+export type ContactRecord = ContactMutation & {
+  id: string;
+  createdAt: string;
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// This is just a fake DB table. In a real app you'd be talking to a real db or
+// fetching from an existing API.
+const fakeContacts = {
+  records: {} as Record<string, ContactRecord>,
+
+  async getAll(): Promise<ContactRecord[]> {
+    return Object.keys(fakeContacts.records)
+      .map((key) => fakeContacts.records[key])
+      .sort(sortBy("-createdAt", "last"));
+  },
+
+  async get(id: string): Promise<ContactRecord | null> {
+    return fakeContacts.records[id] || null;
+  },
+
+  async create(values: ContactMutation): Promise<ContactRecord> {
+    const id = values.id || Math.random().toString(36).substring(2, 9);
+    const createdAt = new Date().toISOString();
+    const newContact = { id, createdAt, ...values };
+    fakeContacts.records[id] = newContact;
+    return newContact;
+  },
+
+  async set(id: string, values: ContactMutation): Promise<ContactRecord> {
+    const contact = await fakeContacts.get(id);
+    invariant(contact, `No contact found for ${id}`);
+    const updatedContact = { ...contact, ...values };
+    fakeContacts.records[id] = updatedContact;
+    return updatedContact;
+  },
+
+  destroy(id: string): null {
+    delete fakeContacts.records[id];
+    return null;
+  },
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// Handful of helper functions to be called from route loaders and actions
+export async function getContacts(query?: string | null) {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  let contacts = await fakeContacts.getAll();
+  if (query) {
+    contacts = matchSorter(contacts, query, {
+      keys: ["first", "last"],
+    });
+  }
+  return contacts.sort(sortBy("last", "createdAt"));
+}
+
+export async function createEmptyContact() {
+  const contact = await fakeContacts.create({});
+  return contact;
+}
+
+export async function getContact(id: string) {
+  return fakeContacts.get(id);
+}
+
+export async function updateContact(id: string, updates: ContactMutation) {
+  const contact = await fakeContacts.get(id);
+  if (!contact) {
+    throw new Error(`No contact found for ${id}`);
+  }
+  await fakeContacts.set(id, { ...contact, ...updates });
+  return contact;
+}
+
+export async function deleteContact(id: string) {
+  fakeContacts.destroy(id);
+}
+
+[
+  {
+    avatar:
+      "https://sessionize.com/image/124e-400o400o2-wHVdAuNaxi8KJrgtN3ZKci.jpg",
+    first: "Shruti",
+    last: "Kapoor",
+    twitter: "@shrutikapoor08",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/1940-400o400o2-Enh9dnYmrLYhJSTTPSw3MH.jpg",
+    first: "Glenn",
+    last: "Reyes",
+    twitter: "@glnnrys",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
+    first: "Ryan",
+    last: "Florence",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/d14d-400o400o2-pyB229HyFPCnUcZhHf3kWS.png",
+    first: "Oscar",
+    last: "Newman",
+    twitter: "@__oscarnewman",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fd45-400o400o2-fw91uCdGU9hFP334dnyVCr.jpg",
+    first: "Michael",
+    last: "Jackson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/b07e-400o400o2-KgNRF3S9sD5ZR4UsG7hG4g.jpg",
+    first: "Christopher",
+    last: "Chedeau",
+    twitter: "@Vjeux",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/262f-400o400o2-UBPQueK3fayaCmsyUc1Ljf.jpg",
+    first: "Cameron",
+    last: "Matheson",
+    twitter: "@cmatheson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/820b-400o400o2-Ja1KDrBAu5NzYTPLSC3GW8.jpg",
+    first: "Brooks",
+    last: "Lybrand",
+    twitter: "@BrooksLybrand",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/df38-400o400o2-JwbChVUj6V7DwZMc9vJEHc.jpg",
+    first: "Alex",
+    last: "Anderson",
+    twitter: "@ralex1993",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/5578-400o400o2-BMT43t5kd2U1XstaNnM6Ax.jpg",
+    first: "Kent C.",
+    last: "Dodds",
+    twitter: "@kentcdodds",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c9d5-400o400o2-Sri5qnQmscaJXVB8m3VBgf.jpg",
+    first: "Nevi",
+    last: "Shah",
+    twitter: "@nevikashah",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/2694-400o400o2-MYYTsnszbLKTzyqJV17w2q.png",
+    first: "Andrew",
+    last: "Petersen",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/907a-400o400o2-9TM2CCmvrw6ttmJiTw4Lz8.jpg",
+    first: "Scott",
+    last: "Smerchek",
+    twitter: "@smerchek",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/08be-400o400o2-WtYGFFR1ZUJHL9tKyVBNPV.jpg",
+    first: "Giovanni",
+    last: "Benussi",
+    twitter: "@giovannibenussi",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/f814-400o400o2-n2ua5nM9qwZA2hiGdr1T7N.jpg",
+    first: "Igor",
+    last: "Minar",
+    twitter: "@IgorMinar",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fb82-400o400o2-LbvwhTVMrYLDdN3z4iEFMp.jpeg",
+    first: "Brandon",
+    last: "Kish",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fcda-400o400o2-XiYRtKK5Dvng5AeyC8PiUA.png",
+    first: "Arisa",
+    last: "Fukuzaki",
+    twitter: "@arisa_dev",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c8c3-400o400o2-PR5UsgApAVEADZRixV4H8e.jpeg",
+    first: "Alexandra",
+    last: "Spalato",
+    twitter: "@alexadark",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/7594-400o400o2-hWtdCjbdFdLgE2vEXBJtyo.jpg",
+    first: "Cat",
+    last: "Johnson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/5636-400o400o2-TWgi8vELMFoB3hB9uPw62d.jpg",
+    first: "Ashley",
+    last: "Narcisse",
+    twitter: "@_darkfadr",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6aeb-400o400o2-Q5tAiuzKGgzSje9ZsK3Yu5.JPG",
+    first: "Edmund",
+    last: "Hung",
+    twitter: "@_edmundhung",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/30f1-400o400o2-wJBdJ6sFayjKmJycYKoHSe.jpg",
+    first: "Clifford",
+    last: "Fajardo",
+    twitter: "@cliffordfajard0",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6faa-400o400o2-amseBRDkdg7wSK5tjsFDiG.jpg",
+    first: "Erick",
+    last: "Tamayo",
+    twitter: "@ericktamayo",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/feba-400o400o2-R4GE7eqegJNFf3cQ567obs.jpg",
+    first: "Paul",
+    last: "Bratslavsky",
+    twitter: "@codingthirty",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c315-400o400o2-spjM5A6VVfVNnQsuwvX3DY.jpg",
+    first: "Pedro",
+    last: "Cattori",
+    twitter: "@pcattori",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/eec1-400o400o2-HkvWKLFqecmFxLwqR9KMRw.jpg",
+    first: "Andre",
+    last: "Landgraf",
+    twitter: "@AndreLandgraf94",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c73a-400o400o2-4MTaTq6ftC15hqwtqUJmTC.jpg",
+    first: "Monica",
+    last: "Powell",
+    twitter: "@indigitalcolor",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/cef7-400o400o2-KBZUydbjfkfGACQmjbHEvX.jpeg",
+    first: "Brian",
+    last: "Lee",
+    twitter: "@brian_dlee",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/f83b-400o400o2-Pyw3chmeHMxGsNoj3nQmWU.jpg",
+    first: "Sean",
+    last: "McQuaid",
+    twitter: "@SeanMcQuaidCode",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/a9fc-400o400o2-JHBnWZRoxp7QX74Hdac7AZ.jpg",
+    first: "Shane",
+    last: "Walker",
+    twitter: "@swalker326",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6644-400o400o2-aHnGHb5Pdu3D32MbfrnQbj.jpg",
+    first: "Jon",
+    last: "Jensen",
+    twitter: "@jenseng",
+  },
+].forEach((contact) => {
+  fakeContacts.create({
+    ...contact,
+    id: `${contact.first
+      .toLowerCase()
+      .split(" ")
+      .join("_")}-${contact.last.toLocaleLowerCase()}`,
+  });
+});
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -0,0 +1,26 @@
+'use client'; // Error boundaries must be Client Components
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main id="error-page">
+      <h1>Error!</h1>
+      <p>{error.message}</p>
+      {error.stack && (
+        <pre>
+          <code>{error.stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,11 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import React from "react";
+
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Next.js Address Book",
+  description: "From the RRv7 tutorial",
 };

 export default function RootLayout({
@@ -24,7 +15,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body>
        {children}
      </body>
    </html>
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <main id="error-page">
+      <h1>404</h1>
+      <p>The requested page could not be found.</p>
+    </main>
+  );
+}
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,168 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 158px;
-}
-
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,95 +1,41 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Form from "next/form";
+import React from "react";

 export default function Home() {
  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>src/app/page.tsx</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
+    <>
+      <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"
            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
+            <div
+              aria-hidden
+              hidden={true}
+              id="search-spinner"
+            />
+          </Form>
+          <Form action='.' formMethod="post">
+            <button type="submit">New</button>
+          </Form>
        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+        <nav>
+          <ul>
+            <li>
+              <a href={`/contacts/1`}>Your Name</a>
+            </li>
+            <li>
+              <a href={`/contacts/2`}>Your Friend</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </>
  );
 }