finish all material (still have tests to handle though)

Author: kentcdodds

exercises/04.route-paths/01.problem.dynamic-segments/src/routes/app/recipients/$id.edit.tsx

@@ -9,7 +9,17 @@ export function RecipientEditRoute() {
 	const id = 'TODO'
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient not found with ID "${id}"`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="w-full overflow-y-auto p-6">

exercises/04.route-paths/01.problem.dynamic-segments/src/routes/app/recipients/$id.tsx

@@ -18,7 +18,17 @@ export function RecipientRoute() {
 	const id = 'TODO'
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="flex min-h-0 flex-grow flex-col">

exercises/04.route-paths/01.solution.dynamic-segments/src/routes/app/recipients/$id.edit.tsx

@@ -8,7 +8,17 @@ export function RecipientEditRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient not found with ID "${id}"`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="w-full overflow-y-auto p-6">

exercises/04.route-paths/01.solution.dynamic-segments/src/routes/app/recipients/$id.tsx

@@ -17,7 +17,17 @@ export function RecipientRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="flex min-h-0 flex-grow flex-col">

exercises/05.advanced-links/01.problem.relative-links/src/routes/app/recipients/$id.edit.tsx

@@ -8,7 +8,17 @@ export function RecipientEditRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient not found with ID "${id}"`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="w-full overflow-y-auto p-6">

exercises/05.advanced-links/01.problem.relative-links/src/routes/app/recipients/$id.tsx

@@ -17,7 +17,17 @@ export function RecipientRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="flex min-h-0 flex-grow flex-col">

exercises/05.advanced-links/01.solution.relative-links/src/routes/app/recipients/$id.edit.tsx

@@ -8,7 +8,17 @@ export function RecipientEditRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient not found with ID "${id}"`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="w-full overflow-y-auto p-6">

exercises/05.advanced-links/01.solution.relative-links/src/routes/app/recipients/$id.tsx

@@ -17,7 +17,17 @@ export function RecipientRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="flex min-h-0 flex-grow flex-col">

exercises/05.advanced-links/02.problem.nav-link-class-name/src/routes/app/recipients/$id.edit.tsx

@@ -8,7 +8,17 @@ export function RecipientEditRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient not found with ID "${id}"`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="w-full overflow-y-auto p-6">

exercises/05.advanced-links/02.problem.nav-link-class-name/src/routes/app/recipients/$id.tsx

@@ -17,7 +17,17 @@ export function RecipientRoute() {
 	const { id } = useParams()
 	const recipient = recipients.find((r) => r.id === id)
 
-	if (!recipient) throw new Error(`Recipient with ID of "${id}" not found`)
+	if (!recipient) {
+		return (
+			<div className="container mx-auto mt-4 flex flex-col gap-8 px-8">
+				<div className="bg-danger-background rounded-sm p-4">
+					<p className="text-danger-foreground">
+						Recipient with ID of "{id}" not found
+					</p>
+				</div>
+			</div>
+		)
+	}
 
 	return (
 		<div className="flex min-h-0 flex-grow flex-col">