legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement custom error handling in Await components for carousel and category sections

Browse Source
This commit is contained in:
Ardeman 2025-03-20 16:25:34 +08:00
parent 2f8b5dbe0f
commit 06672714b7
4 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/error/await.tsx Normal file
View File

@ -0,0 +1,10 @@
import { useAsyncError } from 'react-router'
export const ErrorAwait = () => {
const error = useAsyncError()
return (
<p>
{error instanceof Error ? error.message : 'An unexpected error occurred.'}
</p>
)
}

3
app/components/ui/carousel-hero.tsx
View File

@ -3,6 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from 'react'
import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'
import { ErrorAwait } from '~/components/error/await'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
@ -76,7 +77,7 @@ export const CarouselHero = (properties: TNews) => {
<Suspense fallback={<div>Loading...</div>}>
<Await
resolve={items}
errorElement={<div>Oops!</div>}
errorElement={<ErrorAwait />}
>
{(value) =>
value.data.map(

3
app/components/ui/carousel-section.tsx
View File

@ -3,6 +3,7 @@ import { Suspense, useCallback, useEffect, useState } from 'react'
import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'
import { ErrorAwait } from '~/components/error/await'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_news'
@ -82,7 +83,7 @@ export const CarouselSection = (properties: TNews) => {
<Suspense fallback={<div>Loading...</div>}>
<Await
resolve={items}
errorElement={<div>Oops!</div>}
errorElement={<ErrorAwait />}
>
{(value) =>
value.data.map(

3
app/components/ui/category-section.tsx
View File

@ -3,6 +3,7 @@ import { Await, useRouteLoaderData } from 'react-router'
import { stripHtml } from 'string-strip-html'
import { twMerge } from 'tailwind-merge'
import { ErrorAwait } from '~/components/error/await'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { Button } from '~/components/ui/button'
@ -45,7 +46,7 @@ export const CategorySection = (properties: TNews) => {
<Suspense fallback={<div>Loading...</div>}>
<Await
resolve={items}
errorElement={<div>Oops!</div>}
errorElement={<ErrorAwait />}
>
{(value) =>
value.data.map(