refactor: update error handling to use data responses for not found a…

…nd unauthorized cases

app/routes/$handle+/_index/route.tsx

@@ -1,6 +1,7 @@
 import { MoreVerticalIcon, PlusIcon } from 'lucide-react'
 import React from 'react'
 import {
+  data,
   Form,
   Link,
   redirect,
@@ -34,7 +35,7 @@ export const clientLoader = async ({
   const { handle } = zx.parseParams(params, { handle: z.string() })
 
   const isExist = await isAccountExistsByHandle(handle)
-  if (!isExist) throw new Error('Not found')
+  if (!isExist) throw data(null, { status: 404 })
 
   const user = await isAuthenticated(request)
   const posts = await listUserPosts(handle)

app/routes/$handle+/posts.$id._index/route.tsx

@@ -1,6 +1,6 @@
 import { ArrowLeftIcon, PencilIcon } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
-import { Link } from 'react-router'
+import { data, Link } from 'react-router'
 import { $path } from 'remix-routes'
 import { z } from 'zod'
 import { zx } from 'zodix'
@@ -21,7 +21,7 @@ export const clientLoader = async ({
   })
 
   const post = await getUserPostById(handle, id)
-  if (!post) throw new Error('Not found')
+  if (!post) throw data(null, { status: 404 })
 
   const user = await isAuthenticated(request)
 

app/routes/$handle+/posts.$id.delete/route.tsx

@@ -1,4 +1,4 @@
-import { redirect, useFetcher } from 'react-router'
+import { data, redirect, useFetcher } from 'react-router'
 import { $path } from 'remix-routes'
 import { z } from 'zod'
 import { zx } from 'zodix'
@@ -29,7 +29,7 @@ export const clientAction = async ({
 
   const user = await requireUser(request, { failureRedirect: $path('/') })
   if (user.handle !== handle) {
-    throw new Response('Unauthorized', { status: 401 })
+    throw data(null, { status: 401 })
   }
   await deleteUserPost(handle, id)
   return redirect($path('/:handle', { handle }))

app/routes/$handle+/posts.$id.edit/route.tsx

@@ -6,7 +6,7 @@ import {
 } from '@conform-to/react'
 import { parseWithZod } from '@conform-to/zod'
 import { ArrowLeftIcon } from 'lucide-react'
-import { Form, Link, redirect } from 'react-router'
+import { data, Form, Link, redirect } from 'react-router'
 import { $path } from 'remix-routes'
 import { z } from 'zod'
 import { AppHeadingSection } from '~/components/AppHeadingSection'
@@ -36,10 +36,10 @@ export const clientLoader = async ({
 }: Route.ClientLoaderArgs) => {
   // 本人の投稿以外は編集できない / 存在確認
   const user = await requireUser(request, { failureRedirect: $path('/') })
-  if (handle !== user.handle) throw new Response('Forbidden', { status: 403 })
+  if (handle !== user.handle) throw data(null, { status: 403 })
 
   const post = await getUserPostById(handle, id)
-  if (!post) throw new Response('Not found', { status: 404 })
+  if (!post) throw data(null, { status: 404 })
   return { handle, id, post, user }
 }
 
@@ -49,7 +49,7 @@ export const clientAction = async ({
 }: Route.ClientActionArgs) => {
   // 本人の投稿以外は編集できない / 存在確認
   const user = await requireUser(request, { failureRedirect: $path('/') })
-  if (handle !== user.handle) throw { message: 'Forbidden', status: 403 }
+  if (handle !== user.handle) throw data(null, { status: 403 })
 
   const submission = parseWithZod(await request.formData(), { schema })
   if (submission.status !== 'success') {