From 77582f7c96c1ddb314fe253ac2e289b2ee5b8ce6 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 00:31:17 -0400
Subject: [PATCH 1/3] Add star wars

---
 app/layout.tsx                        |  3 ++
 app/star-wars/layout.tsx              | 15 +++++++
 app/star-wars/loading.tsx             |  7 ++++
 app/star-wars/not-found.tsx           | 21 ++++++++++
 app/star-wars/page.tsx                |  0
 app/star-wars/people/[id]/loading.tsx |  7 ++++
 app/star-wars/people/[id]/page.tsx    | 45 ++++++++++++++++++++
 app/star-wars/people/page.tsx         | 60 +++++++++++++++++++++++++++
 8 files changed, 158 insertions(+)
 create mode 100644 app/star-wars/layout.tsx
 create mode 100644 app/star-wars/loading.tsx
 create mode 100644 app/star-wars/not-found.tsx
 create mode 100644 app/star-wars/page.tsx
 create mode 100644 app/star-wars/people/[id]/loading.tsx
 create mode 100644 app/star-wars/people/[id]/page.tsx
 create mode 100644 app/star-wars/people/page.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index c225e25..38a8237 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -39,6 +39,9 @@ export default function RootLayout({
                 <li>
                   <Link href="/">Home</Link>
                 </li>
+                <li>
+                  <Link href="/star-wars/people">Star Wars</Link>
+                </li>
                 <li>
                   <Link href="/danger-zone">Error</Link>
                 </li>
diff --git a/app/star-wars/layout.tsx b/app/star-wars/layout.tsx
new file mode 100644
index 0000000..5e8efdc
--- /dev/null
+++ b/app/star-wars/layout.tsx
@@ -0,0 +1,15 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="outline-2 outline-sky-500 outline-dotted rounded-lg p-4 -mx-4">
+      <div className="p-4 -m-4 text-white sm:flex sm:items-center sm:justify-between mb-8">
+        <h2 className="text-base font-semibold leading-6 text-sky-500">
+          Star Wars
+        </h2>
+        <div className="mt-3 flex sm:ml-4 sm:mt-0">
+          <span className="text-sm text-gray-500 italic">MtFBWY!</span>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/app/star-wars/loading.tsx b/app/star-wars/loading.tsx
new file mode 100644
index 0000000..eb55c4d
--- /dev/null
+++ b/app/star-wars/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="w-80 h-80 font-black text-xl mx-auto animate-spin shadow-md rounded-full flex justify-center items-center content-center">
+      Loading
+    </div>
+  );
+}
diff --git a/app/star-wars/not-found.tsx b/app/star-wars/not-found.tsx
new file mode 100644
index 0000000..5c8afb6
--- /dev/null
+++ b/app/star-wars/not-found.tsx
@@ -0,0 +1,21 @@
+export const metadata = {
+  title: `Star War Not Found`,
+};
+
+export default function NotFound() {
+  return (
+    <>
+      <div className="border-b border-gray-200 pb-5 sm:flex sm:items-center sm:justify-between">
+        <h2 className="text-base font-semibold leading-6 text-gray-900">
+          <span className="font-mono">Star War Not Found</span>
+        </h2>
+        <div className="mt-3 flex sm:ml-4 sm:mt-0">
+          <span className="text-sm text-gray-500 italic">
+            You have failed me for the last time!
+          </span>
+        </div>
+      </div>
+      <div className="h-8 rounded-lg shadow bg-sky-600" />
+    </>
+  );
+}
diff --git a/app/star-wars/page.tsx b/app/star-wars/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/star-wars/people/[id]/loading.tsx b/app/star-wars/people/[id]/loading.tsx
new file mode 100644
index 0000000..3eb45bb
--- /dev/null
+++ b/app/star-wars/people/[id]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="w-60 h-60 font-black text-xl mx-auto animate-ping shadow-md rounded-full flex justify-center items-center content-center">
+      Loading
+    </div>
+  );
+}
diff --git a/app/star-wars/people/[id]/page.tsx b/app/star-wars/people/[id]/page.tsx
new file mode 100644
index 0000000..19c36d6
--- /dev/null
+++ b/app/star-wars/people/[id]/page.tsx
@@ -0,0 +1,45 @@
+import { type Person, sleep } from '../page';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+type Props = {
+  params: { id: string };
+};
+
+async function getPerson(id: string): Promise<Person> {
+  await sleep();
+  const res = await fetch(`https://swapi.dev/api/people/${id}`);
+
+  const json = await res.json();
+  return json;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const person = await getPerson(params.id);
+
+  return {
+    title: person.name,
+  };
+}
+
+export default async function Page({ params }: Props) {
+  const person = await getPerson(params.id);
+
+  if (!person.name) {
+    notFound();
+  }
+
+  return (
+    <div className="prose">
+      <h1>{person.name}</h1>
+      <dl>
+        <dt>Height</dt>
+        <dd>{person.height}</dd>
+        <dt>Mass</dt>
+        <dd>{person.mass}</dd>
+        <dt>Hair Color</dt>
+        <dd>{person.hair_color}</dd>
+      </dl>
+    </div>
+  );
+}
diff --git a/app/star-wars/people/page.tsx b/app/star-wars/people/page.tsx
new file mode 100644
index 0000000..10a51eb
--- /dev/null
+++ b/app/star-wars/people/page.tsx
@@ -0,0 +1,60 @@
+import Link from 'next/link';
+
+async function getPeople(): Promise<Person[]> {
+  await sleep();
+  const res = await fetch('https://swapi.dev/api/people/');
+  const json = await res.json();
+  return json.results;
+}
+
+export const metadata = {
+  title: 'Star Wars People',
+};
+
+export function sleep(ms = 2000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export type Person = {
+  name: string;
+  height: string;
+  mass: string;
+  hair_color: string;
+  skin_color: string;
+  eye_color: string;
+  birth_year: string;
+  gender: string;
+  homeworld: string;
+  films: string[];
+  species: string[];
+  vehicles: string[];
+  starships: string[];
+  created: string;
+  edited: string;
+  url: string;
+};
+
+export default async function Page() {
+  const people = await getPeople();
+
+  return (
+    <div className="prose">
+      <h1>Star Wars People</h1>
+      <ul>
+        {people.map((person) => (
+          <li key={person.name}>
+            <Link
+              href={`star-wars/people/${person.url
+                .replace('https://swapi.dev/api/people/', '')
+                .replace('/', '')}`}
+            >
+              {person.name}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

From 34e80bc64d25699b5c4169ba75bceb40d3e635f5 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 08:23:48 -0400
Subject: [PATCH 2/3] remove empty page

---
 app/star-wars/page.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 app/star-wars/page.tsx

diff --git a/app/star-wars/page.tsx b/app/star-wars/page.tsx
deleted file mode 100644
index e69de29..0000000

From 91777978c57d044af29096d7e198580499680c6e Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 2 Jun 2023 08:38:42 -0400
Subject: [PATCH 3/3] move exports out of page

---
 app/star-wars/people/[id]/page.tsx |  3 ++-
 app/star-wars/people/page.tsx      | 27 ++-------------------------
 app/star-wars/types.tsx            | 18 ++++++++++++++++++
 util/sleep.tsx                     |  5 +++++
 4 files changed, 27 insertions(+), 26 deletions(-)
 create mode 100644 app/star-wars/types.tsx
 create mode 100644 util/sleep.tsx

diff --git a/app/star-wars/people/[id]/page.tsx b/app/star-wars/people/[id]/page.tsx
index 19c36d6..2c2059e 100644
--- a/app/star-wars/people/[id]/page.tsx
+++ b/app/star-wars/people/[id]/page.tsx
@@ -1,6 +1,7 @@
-import { type Person, sleep } from '../page';
+import { type Person } from '../../types';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import sleep from '@/util/sleep';
 
 type Props = {
   params: { id: string };
diff --git a/app/star-wars/people/page.tsx b/app/star-wars/people/page.tsx
index 10a51eb..e532322 100644
--- a/app/star-wars/people/page.tsx
+++ b/app/star-wars/people/page.tsx
@@ -1,4 +1,6 @@
 import Link from 'next/link';
+import sleep from '@/util/sleep';
+import { type Person } from '../types';
 
 async function getPeople(): Promise<Person[]> {
   await sleep();
@@ -11,31 +13,6 @@ export const metadata = {
   title: 'Star Wars People',
 };
 
-export function sleep(ms = 2000) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}
-
-export type Person = {
-  name: string;
-  height: string;
-  mass: string;
-  hair_color: string;
-  skin_color: string;
-  eye_color: string;
-  birth_year: string;
-  gender: string;
-  homeworld: string;
-  films: string[];
-  species: string[];
-  vehicles: string[];
-  starships: string[];
-  created: string;
-  edited: string;
-  url: string;
-};
-
 export default async function Page() {
   const people = await getPeople();
 
diff --git a/app/star-wars/types.tsx b/app/star-wars/types.tsx
new file mode 100644
index 0000000..8fa55e5
--- /dev/null
+++ b/app/star-wars/types.tsx
@@ -0,0 +1,18 @@
+export type Person = {
+  name: string;
+  height: string;
+  mass: string;
+  hair_color: string;
+  skin_color: string;
+  eye_color: string;
+  birth_year: string;
+  gender: string;
+  homeworld: string;
+  films: string[];
+  species: string[];
+  vehicles: string[];
+  starships: string[];
+  created: string;
+  edited: string;
+  url: string;
+};
diff --git a/util/sleep.tsx b/util/sleep.tsx
new file mode 100644
index 0000000..c9c34b0
--- /dev/null
+++ b/util/sleep.tsx
@@ -0,0 +1,5 @@
+export default function sleep(ms = 2000) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}