From 68702595c51928f350f652ed33065ebe6e06a4a7 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Wed, 31 Jul 2024 17:43:46 -0500
Subject: [PATCH] Added Recipe errorComponent.

---
 src/routes/recipes_/$username.$slug.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/routes/recipes_/$username.$slug.tsx b/src/routes/recipes_/$username.$slug.tsx
index bcc6197..b87c474 100644
--- a/src/routes/recipes_/$username.$slug.tsx
+++ b/src/routes/recipes_/$username.$slug.tsx
@@ -1,8 +1,10 @@
 import {
     createFileRoute,
+    ErrorComponent,
     useLoaderData,
     useParams
 } from '@tanstack/react-router'
+import { ApiError } from '../../api/ApiError'
 import getRecipe from '../../api/getRecipe'
 import Recipe from '../../pages/recipe/Recipe'
 
@@ -24,6 +26,16 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
         })
         return <Recipe {...{ recipe }} />
     },
+    errorComponent({ error }) {
+        if (error instanceof ApiError) {
+            return (
+                <p>
+                    {error.status}: {error.message}
+                </p>
+            )
+        }
+        return <ErrorComponent error={error} />
+    },
     notFoundComponent() {
         const { username, slug } = useParams({
             from: '/recipes/$username/$slug'