#24

frontend/src/pages/posts/PostDetailPage.tsx

@@ -14,6 +14,7 @@ import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 import { cn } from '@/lib/utils'
 import NotFound from '@/pages/NotFound'
+import ServiceUnavailable from '@/pages/ServiceUnavailable'
 
 import type { Post, User } from '@/types'
 
@@ -25,7 +26,7 @@ export default ({ user }: Props) => {
 
   const [post, setPost] = useState<Post | null> (null)
   const [editing, setEditing] = useState (true)
-  const [found, setFound] = useState (true)
+  const [status, setStatus] = useState (200)
 
   const changeViewedFlg = async () => {
     const url = `${ API_BASE_URL }/posts/${ id }/viewed`
@@ -59,8 +60,8 @@ export default ({ user }: Props) => {
       }
       catch (err)
       {
-	if (err.status === 404)
-	  setFound (false)
+	if (axios.isAxiosError (err))
+	  setStatus (err.status ?? 200)
       }
     }) ()
   }, [id])
@@ -74,8 +75,13 @@ export default ({ user }: Props) => {
       setEditing (true)
   }, [editing])
 
-  if (!(found))
+  switch (status)
+  {
+  case 404:
     return <NotFound />
+  case 503:
+    return <ServiceUnavailable />
+  }
 
   const url = post ? new URL (post.url) : null
   const nicoFlg = url?.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp'
@@ -88,8 +94,8 @@ export default ({ user }: Props) => {
   return (
       <>
 	<Helmet>
-	  {(post?.thumbnail || post?.thumbnailBase) &&
-	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />}
+	  {(post?.thumbnail || post?.thumbnailBase) && (
+	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
 	<TagDetailSidebar post={post} />