feat: add error handing and replace api

app/api/reviews/route.ts

@@ -2,7 +2,7 @@
 
 import { logger } from '@/lib/shared'
 
-import type { Review } from './review'
+import type { Review } from './type'
 
 export async function GET(request: Request) {
   logger.trace(

app/api/todo/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server'
 
 // import cors from '@/lib/cros'
-import type { TODO } from './todo'
+import type { TODO } from './type'
 
 // temporary way, will share it in all request
 const todos: TODO[] = [

app/error.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+
+import { Button } from '@/components/ui/button'
+
+export default function Error({ error, reset }: any) {
+  React.useEffect(() => {
+    console.log('logging error:', error)
+  }, [error])
+
+  return (
+    <div>
+      <div className="space-y-4">
+        <h2 className="text-lg font-bold">Error</h2>
+        <p className="text-sm text-red-900">{error?.message}</p>
+        <div>
+          <Button onClick={() => reset()}>Try Again</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/loading-and-streaming/_components/prompt-activity.tsx

@@ -1,41 +1,40 @@
 import { logger } from '@/lib/shared'
 import { sleep } from '@/lib/utils'
 
-interface Activity {
-  activity: string
-  type: string
-  participants: number
-  price: number
-  link: string
-  key: string
-  accessibility: number
+interface Joke {
+  categories: []
+  created_at: string
+  icon_url: string
+  id: string
+  updated_at: string
+  url: string
+  value: string
 }
-async function getActivity(): Promise<Activity> {
-  logger.info('getActivity start')
-  const res = await fetch('https://www.boredapi.com/api/activity', {
+async function getRandomJoke(): Promise<Joke> {
+  logger.info('getRandomJoke start')
+  const res = await fetch('https://api.chucknorris.io/jokes/random', {
     cache: 'no-store',
   })
   await sleep(1500)
-  logger.info(res, 'getActivity done')
+  logger.info(res, 'getRandomJoke done')
 
   if (!res.ok) {
     // This will activate the closest `error.js` Error Boundary
-    const e = new Error('Failed to getActivity')
+    const e = new Error('Failed to getRandomJoke')
     logger.error(e)
     throw e
   }
 
   return res.json()
 }
 export const PromptActivity = async () => {
-  const data = await getActivity()
+  const data = await getRandomJoke()
   return (
     <div>
-      <h2>Activity: </h2>
-      <h4>desc: {data.activity}</h4>
-      <p>price: {data.price}</p>
-      <p>participants {data.participants}</p>
-      <p>accessibility {data.accessibility}</p>
+      <h2>Random Joke: </h2>
+      <h4>url: {data.url}</h4>
+      <p>updated_at: {data.updated_at}</p>
+      <p>{data.value}</p>
     </div>
   )
 }

app/todo/_components/data.ts

@@ -1,6 +1,6 @@
 import 'server-only'
 
-import type { TODO } from '../../api/todo/todo'
+import type { TODO } from '../../api/todo/type'
 
 export const todos: TODO[] = [
   {

app/todo/_components/todo-rcc-demo.tsx

@@ -2,7 +2,7 @@
 
 import { logger } from '@/lib/shared'
 
-import type { TODO } from '../../api/todo/todo'
+import type { TODO } from '../../api/todo/type'
 import { AddTodo } from './add-todo'
 import Todo from './todo'
 

app/todo/_components/todo-rsc-demo.tsx

@@ -10,9 +10,9 @@ export async function TodoRscDemo() {
       <h2 className="my-2 text-2xl">Todo demo with RSC</h2>
       <p className="mb-2">
         This is all server components, add new todo will call AddTodo action and
-        use
+        &nbsp;
         {/* eslint-disable-next-line react/no-unescaped-entities */}
-        <code>revalidatePath('/todo')</code>to refresh rsc
+        use <code>revalidatePath('/todo')</code> to refresh rsc
       </p>
       <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
         {todos.map((todo) => (

app/todo/_components/todo.tsx

@@ -5,7 +5,7 @@ import { useState, useTransition } from 'react'
 
 import { Checkbox } from '@/components/ui/checkbox'
 
-import type { TODO } from '../../api/todo/todo'
+import type { TODO } from '../../api/todo/type'
 
 export default function Todo(todo: TODO) {
   const router = useRouter()