04/03: add location database field, render in ui

kettanaito · kettanaito · commit a7dbf40afc38 · 2026-03-23T18:17:19.000+01:00
diff --git a/exercises/03.guides/04.problem.api-mocking/app/routes/users+/$username_+/__note-editor.server.tsx b/exercises/03.guides/04.problem.api-mocking/app/routes/users+/$username_+/__note-editor.server.tsx
@@ -93,6 +93,7 @@ export async function action({ request }: ActionFunctionArgs) {
 		id: noteId,
 		title,
 		content,
+		location,
 		imageUpdates = [],
 		newImages = [],
 	} = submission.value
@@ -105,11 +106,13 @@ export async function action({ request }: ActionFunctionArgs) {
 			ownerId: userId,
 			title,
 			content,
+			location,
 			images: { create: newImages },
 		},
 		update: {
 			title,
 			content,
+			location,
 			images: {
 				deleteMany: { id: { notIn: imageUpdates.map((i) => i.id) } },
 				updateMany: imageUpdates.map((updates) => ({
diff --git a/exercises/03.guides/04.problem.api-mocking/app/routes/users+/$username_+/notes.$noteId.tsx b/exercises/03.guides/04.problem.api-mocking/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -28,6 +28,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 			id: true,
 			title: true,
 			content: true,
+			location: true,
 			ownerId: true,
 			updatedAt: true,
 			images: {
@@ -120,6 +121,17 @@ export default function NoteRoute({
 			<h2 id="note-title" className="text-h2 mb-2 pt-12 lg:mb-6">
 				{loaderData.note.title}
 			</h2>
+			{loaderData.note.location ? (
+				<Icon name="globe" className="text-foreground/60">
+					<p
+						role="note"
+						aria-label="Location"
+						className="text-foreground/60 text-sm font-medium"
+					>
+						{loaderData.note.location}
+					</p>
+				</Icon>
+			) : null}
 			<div className={`${displayBar ? 'pb-24' : 'pb-12'} overflow-y-auto`}>
 				<ul className="flex flex-wrap gap-5 py-5">
 					{loaderData.note.images.map((image) => (
diff --git a/exercises/03.guides/04.problem.api-mocking/other/svg-icons/globe.svg b/exercises/03.guides/04.problem.api-mocking/other/svg-icons/globe.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49996 1.80002C4.35194 1.80002 1.79996 4.352 1.79996 7.50002C1.79996 10.648 4.35194 13.2 7.49996 13.2C10.648 13.2 13.2 10.648 13.2 7.50002C13.2 4.352 10.648 1.80002 7.49996 1.80002ZM0.899963 7.50002C0.899963 3.85494 3.85488 0.900024 7.49996 0.900024C11.145 0.900024 14.1 3.85494 14.1 7.50002C14.1 11.1451 11.145 14.1 7.49996 14.1C3.85488 14.1 0.899963 11.1451 0.899963 7.50002Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M13.4999 7.89998H1.49994V7.09998H13.4999V7.89998Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M7.09991 13.5V1.5H7.89991V13.5H7.09991zM10.375 7.49998C10.375 5.32724 9.59364 3.17778 8.06183 1.75656L8.53793 1.24341C10.2396 2.82218 11.075 5.17273 11.075 7.49998 11.075 9.82724 10.2396 12.1778 8.53793 13.7566L8.06183 13.2434C9.59364 11.8222 10.375 9.67273 10.375 7.49998zM3.99969 7.5C3.99969 5.17611 4.80786 2.82678 6.45768 1.24719L6.94177 1.75281C5.4582 3.17323 4.69969 5.32389 4.69969 7.5 4.6997 9.67611 5.45822 11.8268 6.94179 13.2472L6.45769 13.7528C4.80788 12.1732 3.9997 9.8239 3.99969 7.5z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M7.49996 3.95801C9.66928 3.95801 11.8753 4.35915 13.3706 5.19448 13.5394 5.28875 13.5998 5.50197 13.5055 5.67073 13.4113 5.83948 13.198 5.89987 13.0293 5.8056 11.6794 5.05155 9.60799 4.65801 7.49996 4.65801 5.39192 4.65801 3.32052 5.05155 1.97064 5.8056 1.80188 5.89987 1.58866 5.83948 1.49439 5.67073 1.40013 5.50197 1.46051 5.28875 1.62927 5.19448 3.12466 4.35915 5.33063 3.95801 7.49996 3.95801zM7.49996 10.85C9.66928 10.85 11.8753 10.4488 13.3706 9.6135 13.5394 9.51924 13.5998 9.30601 13.5055 9.13726 13.4113 8.9685 13.198 8.90812 13.0293 9.00238 11.6794 9.75643 9.60799 10.15 7.49996 10.15 5.39192 10.15 3.32052 9.75643 1.97064 9.00239 1.80188 8.90812 1.58866 8.9685 1.49439 9.13726 1.40013 9.30601 1.46051 9.51924 1.62927 9.6135 3.12466 10.4488 5.33063 10.85 7.49996 10.85z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
diff --git a/exercises/03.guides/04.problem.api-mocking/prisma/schema.prisma b/exercises/03.guides/04.problem.api-mocking/prisma/schema.prisma
@@ -30,9 +30,10 @@ model User {
 }
 
 model Note {
-  id      String @id @default(cuid())
-  title   String
-  content String
+  id        String @id @default(cuid())
+  title     String
+  content   String
+  location  String?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
diff --git a/exercises/03.guides/04.solution.api-mocking/app/routes/users+/$username_+/__note-editor.server.tsx b/exercises/03.guides/04.solution.api-mocking/app/routes/users+/$username_+/__note-editor.server.tsx
@@ -93,6 +93,7 @@ export async function action({ request }: ActionFunctionArgs) {
 		id: noteId,
 		title,
 		content,
+		location,
 		imageUpdates = [],
 		newImages = [],
 	} = submission.value
@@ -105,11 +106,13 @@ export async function action({ request }: ActionFunctionArgs) {
 			ownerId: userId,
 			title,
 			content,
+			location,
 			images: { create: newImages },
 		},
 		update: {
 			title,
 			content,
+			location,
 			images: {
 				deleteMany: { id: { notIn: imageUpdates.map((i) => i.id) } },
 				updateMany: imageUpdates.map((updates) => ({
diff --git a/exercises/03.guides/04.solution.api-mocking/app/routes/users+/$username_+/notes.$noteId.tsx b/exercises/03.guides/04.solution.api-mocking/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -28,6 +28,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 			id: true,
 			title: true,
 			content: true,
+			location: true,
 			ownerId: true,
 			updatedAt: true,
 			images: {
@@ -120,6 +121,17 @@ export default function NoteRoute({
 			<h2 id="note-title" className="text-h2 mb-2 pt-12 lg:mb-6">
 				{loaderData.note.title}
 			</h2>
+			{loaderData.note.location ? (
+				<Icon name="globe" className="text-foreground/60">
+					<p
+						role="note"
+						aria-label="Location"
+						className="text-foreground/60 text-sm font-medium"
+					>
+						{loaderData.note.location}
+					</p>
+				</Icon>
+			) : null}
 			<div className={`${displayBar ? 'pb-24' : 'pb-12'} overflow-y-auto`}>
 				<ul className="flex flex-wrap gap-5 py-5">
 					{loaderData.note.images.map((image) => (
diff --git a/exercises/03.guides/04.solution.api-mocking/other/svg-icons/globe.svg b/exercises/03.guides/04.solution.api-mocking/other/svg-icons/globe.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49996 1.80002C4.35194 1.80002 1.79996 4.352 1.79996 7.50002C1.79996 10.648 4.35194 13.2 7.49996 13.2C10.648 13.2 13.2 10.648 13.2 7.50002C13.2 4.352 10.648 1.80002 7.49996 1.80002ZM0.899963 7.50002C0.899963 3.85494 3.85488 0.900024 7.49996 0.900024C11.145 0.900024 14.1 3.85494 14.1 7.50002C14.1 11.1451 11.145 14.1 7.49996 14.1C3.85488 14.1 0.899963 11.1451 0.899963 7.50002Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M13.4999 7.89998H1.49994V7.09998H13.4999V7.89998Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M7.09991 13.5V1.5H7.89991V13.5H7.09991zM10.375 7.49998C10.375 5.32724 9.59364 3.17778 8.06183 1.75656L8.53793 1.24341C10.2396 2.82218 11.075 5.17273 11.075 7.49998 11.075 9.82724 10.2396 12.1778 8.53793 13.7566L8.06183 13.2434C9.59364 11.8222 10.375 9.67273 10.375 7.49998zM3.99969 7.5C3.99969 5.17611 4.80786 2.82678 6.45768 1.24719L6.94177 1.75281C5.4582 3.17323 4.69969 5.32389 4.69969 7.5 4.6997 9.67611 5.45822 11.8268 6.94179 13.2472L6.45769 13.7528C4.80788 12.1732 3.9997 9.8239 3.99969 7.5z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M7.49996 3.95801C9.66928 3.95801 11.8753 4.35915 13.3706 5.19448 13.5394 5.28875 13.5998 5.50197 13.5055 5.67073 13.4113 5.83948 13.198 5.89987 13.0293 5.8056 11.6794 5.05155 9.60799 4.65801 7.49996 4.65801 5.39192 4.65801 3.32052 5.05155 1.97064 5.8056 1.80188 5.89987 1.58866 5.83948 1.49439 5.67073 1.40013 5.50197 1.46051 5.28875 1.62927 5.19448 3.12466 4.35915 5.33063 3.95801 7.49996 3.95801zM7.49996 10.85C9.66928 10.85 11.8753 10.4488 13.3706 9.6135 13.5394 9.51924 13.5998 9.30601 13.5055 9.13726 13.4113 8.9685 13.198 8.90812 13.0293 9.00238 11.6794 9.75643 9.60799 10.15 7.49996 10.15 5.39192 10.15 3.32052 9.75643 1.97064 9.00239 1.80188 8.90812 1.58866 8.9685 1.49439 9.13726 1.40013 9.30601 1.46051 9.51924 1.62927 9.6135 3.12466 10.4488 5.33063 10.85 7.49996 10.85z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
diff --git a/exercises/03.guides/04.solution.api-mocking/prisma/migrations/20260323171028_add_note_location/migration.sql b/exercises/03.guides/04.solution.api-mocking/prisma/migrations/20260323171028_add_note_location/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Note" ADD COLUMN "location" TEXT;
diff --git a/exercises/03.guides/04.solution.api-mocking/prisma/migrations/migration_lock.toml b/exercises/03.guides/04.solution.api-mocking/prisma/migrations/migration_lock.toml
@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (e.g., Git)
-provider = "sqlite"
+provider = "sqlite"
diff --git a/exercises/03.guides/04.solution.api-mocking/prisma/schema.prisma b/exercises/03.guides/04.solution.api-mocking/prisma/schema.prisma
@@ -30,9 +30,10 @@ model User {
 }
 
 model Note {
-  id      String @id @default(cuid())
-  title   String
-  content String
+  id        String @id @default(cuid())
+  title     String
+  content   String
+  location  String?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
diff --git a/exercises/03.guides/04.solution.api-mocking/tests/e2e/notes-create.test.ts b/exercises/03.guides/04.solution.api-mocking/tests/e2e/notes-create.test.ts
@@ -47,4 +47,7 @@ test('displays location suggestions when creating a new note', async ({
 
 	await page.getByRole('button', { name: 'Submit' }).click()
 	await expect(page.getByRole('heading', { name: 'My note' })).toBeVisible()
+	await expect(page.getByRole('note', { name: 'Location' })).toHaveText(
+		'San Francisco',
+	)
 })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+-- AlterTable`
	`2`	`+ALTER TABLE "Note" ADD COLUMN "location" TEXT;`