From 5045909e6fc2cb9cbb35bf001c53ca76396608f1 Mon Sep 17 00:00:00 2001
From: coji <coji@techtalk.jp>
Date: Mon, 2 Dec 2024 09:06:56 +0900
Subject: [PATCH] refactor: update error handling to use data responses for not
 found and unauthorized cases

---
 app/routes/$handle+/_index/route.tsx           | 3 ++-
 app/routes/$handle+/posts.$id._index/route.tsx | 4 ++--
 app/routes/$handle+/posts.$id.delete/route.tsx | 4 ++--
 app/routes/$handle+/posts.$id.edit/route.tsx   | 8 ++++----
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/routes/$handle+/_index/route.tsx b/app/routes/$handle+/_index/route.tsx
index 2836a18..391b8ac 100644
--- a/app/routes/$handle+/_index/route.tsx
+++ b/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)
diff --git a/app/routes/$handle+/posts.$id._index/route.tsx b/app/routes/$handle+/posts.$id._index/route.tsx
index 0eafa40..19f9c2e 100644
--- a/app/routes/$handle+/posts.$id._index/route.tsx
+++ b/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)
 
diff --git a/app/routes/$handle+/posts.$id.delete/route.tsx b/app/routes/$handle+/posts.$id.delete/route.tsx
index 92b7588..7109a62 100644
--- a/app/routes/$handle+/posts.$id.delete/route.tsx
+++ b/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 }))
diff --git a/app/routes/$handle+/posts.$id.edit/route.tsx b/app/routes/$handle+/posts.$id.edit/route.tsx
index 777a10e..5336290 100644
--- a/app/routes/$handle+/posts.$id.edit/route.tsx
+++ b/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') {