add search

kentcdodds · kentcdodds · commit 336da2ec74d3 · 2025-03-06T17:47:18.000-07:00
diff --git a/exercises/01.create-router/01.problem.create-router/package.json b/exercises/01.create-router/01.problem.create-router/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/01.create-router/01.solution.create-router/package.json b/exercises/01.create-router/01.solution.create-router/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/01.create-router/02.problem.router-elements/package.json b/exercises/01.create-router/02.problem.router-elements/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/01.create-router/02.solution.router-elements/package.json b/exercises/01.create-router/02.solution.router-elements/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/02.linking/01.problem.achors/package.json b/exercises/02.linking/01.problem.achors/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/02.linking/01.solution.achors/package.json b/exercises/02.linking/01.solution.achors/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/02.linking/02.problem.links/package.json b/exercises/02.linking/02.problem.links/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/02.linking/02.solution.links/package.json b/exercises/02.linking/02.solution.links/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/02.linking/03.problem.custom-link/package.json b/exercises/02.linking/03.problem.custom-link/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/02.linking/03.solution.custom-link/package.json b/exercises/02.linking/03.solution.custom-link/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/01.problem.nested-routes/package.json b/exercises/03.nested-routes/01.problem.nested-routes/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/01.solution.nested-routes/package.json b/exercises/03.nested-routes/01.solution.nested-routes/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/02.problem.nested-path/package.json b/exercises/03.nested-routes/02.problem.nested-path/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/02.solution.nested-path/package.json b/exercises/03.nested-routes/02.solution.nested-path/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/03.problem.nested-layout/package.json b/exercises/03.nested-routes/03.problem.nested-layout/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/03.solution.nested-layout/package.json b/exercises/03.nested-routes/03.solution.nested-layout/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/03.solution.nested-layout/src/routes/app/layout.tsx b/exercises/03.nested-routes/03.solution.nested-layout/src/routes/app/layout.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen min-h-[700px] flex-col">
+		<div className="bg-background flex h-screen min-h-[800px] flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link
diff --git a/exercises/03.nested-routes/04.problem.unnested-route/package.json b/exercises/03.nested-routes/04.problem.unnested-route/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/04.problem.unnested-route/src/routes/app/layout.tsx b/exercises/03.nested-routes/04.problem.unnested-route/src/routes/app/layout.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen min-h-[700px] flex-col">
+		<div className="bg-background flex h-screen min-h-[800px] flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link
diff --git a/exercises/03.nested-routes/04.solution.unnested-route/package.json b/exercises/03.nested-routes/04.solution.unnested-route/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/03.nested-routes/04.solution.unnested-route/src/routes/app/layout.tsx b/exercises/03.nested-routes/04.solution.unnested-route/src/routes/app/layout.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen min-h-[700px] flex-col">
+		<div className="bg-background flex h-screen min-h-[800px] flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link
diff --git a/exercises/04.route-paths/01.problem.dynamic-segments/package.json b/exercises/04.route-paths/01.problem.dynamic-segments/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/04.route-paths/01.problem.dynamic-segments/src/routes/app/layout.tsx b/exercises/04.route-paths/01.problem.dynamic-segments/src/routes/app/layout.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen min-h-[700px] flex-col">
+		<div className="bg-background flex h-screen min-h-[800px] flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link
diff --git a/exercises/04.route-paths/01.solution.dynamic-segments/package.json b/exercises/04.route-paths/01.solution.dynamic-segments/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/04.route-paths/01.solution.dynamic-segments/src/routes/app/layout.tsx b/exercises/04.route-paths/01.solution.dynamic-segments/src/routes/app/layout.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen min-h-[700px] flex-col">
+		<div className="bg-background flex h-screen min-h-[800px] flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link
diff --git a/exercises/99.final/01.solution.final/package.json b/exercises/99.final/01.solution.final/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cron-parser": "^5.0.4",
+    "match-sorter": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.2.0",
diff --git a/exercises/99.final/01.solution.final/src/components/icons.tsx b/exercises/99.final/01.solution.final/src/components/icons.tsx
@@ -189,3 +189,17 @@ export function ExclamationCircleIcon({ title, ...props }: IconProps) {
 		</svg>
 	)
 }
+
+export function SearchIcon({ title, ...props }: IconProps) {
+	return (
+		<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+			{title ? <title>{title}</title> : null}
+			<path
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth={2}
+				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+			/>
+		</svg>
+	)
+}
diff --git a/exercises/99.final/01.solution.final/src/routes/app/layout.tsx b/exercises/99.final/01.solution.final/src/routes/app/layout.tsx
@@ -3,7 +3,7 @@ import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
-		<div className="bg-background flex h-screen min-h-[700px] flex-col">
+		<div className="bg-background flex h-screen min-h-[800px] flex-col">
 			<header className="bg-background-alt px-4 py-3">
 				<div className="container mx-auto flex max-w-6xl items-center justify-between">
 					<Link
diff --git a/exercises/99.final/01.solution.final/src/routes/app/recipients/$id.tsx b/exercises/99.final/01.solution.final/src/routes/app/recipients/$id.tsx
@@ -1,4 +1,5 @@
-import { useParams, useRouteError } from 'react-router'
+import { matchSorter } from 'match-sorter'
+import { useParams, useRouteError, useSearchParams } from 'react-router'
 import { Button, ButtonLink } from '#src/components/button.tsx'
 import { Icon } from '#src/components/icon.tsx'
 import { recipients } from '#src/data.ts'
@@ -15,10 +16,26 @@ const DAY_NAMES = [
 
 export function RecipientRoute() {
 	const { id } = useParams()
+	const [searchParams, setSearchParams] = useSearchParams()
+	const searchQuery = searchParams.get('q') ?? ''
 	const recipient = recipients.find((r) => r.id === id)
 
 	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
 
+	const filteredMessages = searchQuery
+		? matchSorter(recipient.messages, searchQuery, {
+				keys: ['content'],
+			})
+		: recipient.messages
+
+	function handleSearch(value: string) {
+		if (value) {
+			setSearchParams({ q: value })
+		} else {
+			setSearchParams({})
+		}
+	}
+
 	return (
 		<div className="flex min-h-0 flex-grow flex-col">
 			{/* Left sidebar (header on mobile) */}
@@ -31,26 +48,57 @@ export function RecipientRoute() {
 					</ButtonLink>
 				</div>
 
-				<div className="mt-4 flex justify-between gap-4">
-					<div className="flex items-center gap-2">
-						<Icon name="Phone">
-							<span className="font-mono">
-								{recipient.countryCode} {recipient.phone}
-							</span>
-						</Icon>
-					</div>
+				<div className="mt-4 flex flex-col gap-4">
+					<div className="flex justify-between gap-4">
+						<div className="flex items-center gap-2">
+							<Icon name="Phone">
+								<span className="font-mono">
+									{recipient.countryCode} {recipient.phone}
+								</span>
+							</Icon>
+						</div>
 
-					<div className="flex items-center gap-2">
-						<Icon name="Clock">
-							<span>
-								{recipient.schedule ? (
-									`Every ${DAY_NAMES[recipient.nextScheduledAt?.getDay() ?? 0]} at ${recipient.nextScheduledAt?.getHours()}:${recipient.nextScheduledAt?.getMinutes()?.toString().padStart(2, '0')}`
-								) : (
-									<span className="text-foreground-alt">Schedule paused</span>
-								)}
-							</span>
-						</Icon>
+						<div className="flex items-center gap-2">
+							<Icon name="Clock">
+								<span>
+									{recipient.schedule ? (
+										`Every ${DAY_NAMES[recipient.nextScheduledAt?.getDay() ?? 0]} at ${recipient.nextScheduledAt?.getHours()}:${recipient.nextScheduledAt?.getMinutes()?.toString().padStart(2, '0')}`
+									) : (
+										<span className="text-foreground-alt">Schedule paused</span>
+									)}
+								</span>
+							</Icon>
+						</div>
 					</div>
+
+					<form
+						onSubmit={(e) => {
+							e.preventDefault()
+							const formData = new FormData(e.currentTarget)
+							const query = formData.get('q')
+							handleSearch(query?.toString() ?? '')
+						}}
+						className="flex items-center gap-2"
+					>
+						<div className="relative flex-1">
+							<input
+								type="search"
+								name="q"
+								placeholder="Search messages..."
+								className="text-foreground-alt placeholder:text-foreground-alt/60 h-10 w-full rounded-lg py-2 pr-12 pl-4"
+								value={searchQuery}
+								onChange={(e) => handleSearch(e.currentTarget.value)}
+							/>
+							<Button
+								type="submit"
+								icon
+								variant="borderless"
+								className="absolute top-1/2 right-2 -translate-y-1/2"
+							>
+								<Icon name="Search" title="Search messages" />
+							</Button>
+						</div>
+					</form>
 				</div>
 			</div>
 
@@ -62,7 +110,7 @@ export function RecipientRoute() {
 						node?.scrollTo({ top: node.scrollHeight, behavior: 'auto' })
 					}}
 				>
-					{recipient.messages.map((message) => {
+					{filteredMessages.map((message) => {
 						const status = message.sentAt ? 'sent' : 'scheduled'
 						const nextScheduledTime =
 							status === 'scheduled' ? message.scheduledAt : null
diff --git a/exercises/99.final/01.solution.final/tests/router.test.ts b/exercises/99.final/01.solution.final/tests/router.test.ts
@@ -72,3 +72,21 @@ test('404 error boundary should be shown for non-existent recipient', async ({
 	const errorMessage = page.getByText(/recipient.*not found/i)
 	await expect(errorMessage).toBeVisible({ timeout: 500 })
 })
+
+test('should show search results when a search query is provided', async ({
+	page,
+}) => {
+	await page.goto('/recipients')
+
+	const summary = page.getByText(/select recipient/i)
+	await summary.click()
+
+	const bethanyLink = page.getByRole('link', { name: /bethany/i })
+	await bethanyLink.click()
+
+	const searchInput = page.getByRole('searchbox', { name: /Search/i })
+	await searchInput.fill('love')
+
+	// Verify the URL has been updated with the search parameter
+	await expect(page).toHaveURL(/[/]recipients[/].*[?]q=love/)
+})
diff --git a/package-lock.json b/package-lock.json
