#155

frontend/src/pages/posts/PostDetailPage.tsx

@@ -13,6 +13,7 @@ import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
+import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
@@ -26,7 +27,7 @@ import type { NiconicoViewerHandle, Post, User } from '@/types'
 type Props = { user: User | null }
 
 
-export default (({ user }: Props) => {
+const PostDetailPage: FC<Props> = ({ user }) => {
   const { id } = useParams ()
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
@@ -44,16 +45,16 @@ export default (({ user }: Props) => {
 
   const changeViewedFlg = useMutation ({
       mutationFn: async () => {
-	const cur = qc.getQueryData<any> (postKey)
+	const cur = qc.getQueryData<Post> (postKey)
 	const next = !(cur?.viewed)
 	await toggleViewedFlg (postId, next)
 	return next
       },
       onMutate: async () => {
 	await qc.cancelQueries ({ queryKey: postKey })
-	const prev = qc.getQueryData<any> (postKey)
+	const prev = qc.getQueryData<Post> (postKey)
 	qc.setQueryData (postKey,
-			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
+			 (cur: Post | undefined) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
@@ -69,7 +70,7 @@ export default (({ user }: Props) => {
     if (!(errorFlg))
       return
 
-    const code = (error as any)?.response.status ?? (error as any)?.status
+    const code = isApiError (error) ? error.response?.status : undefined
     if (code)
       setStatus (code)
   }, [errorFlg, error])
@@ -169,9 +170,9 @@ export default (({ user }: Props) => {
 		      <Tab name="編輯">
 			<PostEditForm
 			    post={post}
-			    onSave={newPost => {
+			 onSave={newPost => {
 			      qc.setQueryData (postsKeys.show (postId),
-					       (prev: any) => newPost ?? prev)
+					       (prev: Post | undefined) => newPost ?? prev)
 			      qc.invalidateQueries ({ queryKey: postsKeys.root })
 			      qc.invalidateQueries ({ queryKey: tagsKeys.root })
 			    }}/>
@@ -185,4 +186,6 @@ export default (({ user }: Props) => {
 	  {post && <TagDetailSidebar post={post} sp/>}
 	</div>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default PostDetailPage

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -35,7 +35,7 @@ const renderDiff = (diff: { current: string | null; prev: string | null }) => (
     </>)
 
 
-export default (() => {
+const PostHistoryPage: FC = () => {
   const dialogue = useDialogue ()
 
   const location = useLocation ()
@@ -48,11 +48,11 @@ export default (() => {
   // 投稿列の結合で使用
   let rowsCnt: number
 
-  const { data: tag } =
-      tagId
-      ? useQuery ({ queryKey: tagsKeys.show (tagId),
-		    queryFn: () => fetchTag (tagId) })
-      : { data: null }
+  const tagQueryId = tagId ?? ''
+  const { data: tag } = useQuery ({
+      enabled:  Boolean (tagId),
+      queryKey: tagsKeys.show (tagQueryId),
+      queryFn:  () => fetchTag (tagQueryId) })
 
   const { data, isLoading: loading } = useQuery ({
       queryKey: postsKeys.changes ({ ...(id && { post: id }),
@@ -290,4 +290,6 @@ export default (() => {
 	      <Pagination page={page} totalPages={totalPages}/>
 	    </>)}
       </MainArea>)
-}) satisfies FC
+}
+
+export default PostHistoryPage

frontend/src/pages/posts/PostListPage.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
@@ -20,7 +20,7 @@ import type { FC } from 'react'
 import type { WikiPage } from '@/types'
 
 
-export default (() => {
+const PostListPage: FC = () => {
   const containerRef = useRef<HTMLDivElement | null> (null)
 
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
@@ -30,7 +30,7 @@ export default (() => {
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
   const match = anyFlg ? 'any' : 'all'
-  const tags = tagsQuery.split (' ').filter (e => e !== '')
+  const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
   const tagsKey = tags.join (' ')
   const page = Number (query.get ('page') ?? 1)
   const limit = Number (query.get ('limit') ?? 20)
@@ -66,7 +66,7 @@ export default (() => {
 	;
       }
     }) ()
-  }, [location.search])
+  }, [location.search, tags])
 
   return (
       <div
@@ -76,7 +76,7 @@ export default (() => {
 	  <title>
 	    {tags.length
 	     ? `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
-	     : `${ SITE_TITLE }　〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
+	     : `${ SITE_TITLE }\u3000〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
 	  </title>
 	</Helmet>
 
@@ -112,4 +112,6 @@ export default (() => {
 	  </TabGroup>
 	</MainArea>
       </div>)
-}) satisfies FC
+}
+
+export default PostListPage

frontend/src/pages/posts/PostNewPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
@@ -21,9 +21,8 @@ import type { User } from '@/types'
 type Props = { user: User | null }
 
 
-export default (({ user }: Props) => {
-  if (!(['admin', 'member'].some (r => user?.role === r)))
-    return <Forbidden/>
+const PostNewPage: FC<Props> = ({ user }) => {
+  const editable = ['admin', 'member'].some (r => user?.role === r)
 
   const navigate = useNavigate ()
 
@@ -41,6 +40,7 @@ export default (({ user }: Props) => {
   const [url, setURL] = useState ('')
 
   const previousURLRef = useRef ('')
+  const thumbnailPreviewRef = useRef ('')
 
   const handleSubmit = async () => {
     const formData = new FormData
@@ -67,16 +67,6 @@ export default (({ user }: Props) => {
     }
   }
 
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [titleAutoFlg])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [thumbnailAutoFlg])
-
   const handleURLBlur = () => {
     if (!(url) || url === previousURLRef.current)
       return
@@ -88,20 +78,20 @@ export default (({ user }: Props) => {
     previousURLRef.current = url
   }
 
-  const fetchTitle = async () => {
+  const fetchTitle = useCallback (async () => {
     setTitle ('')
     setTitleLoading (true)
     const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
     setTitle (data.title || '')
     setTitleLoading (false)
-  }
+  }, [url])
 
-  const fetchThumbnail = async () => {
+  const fetchThumbnail = useCallback (async () => {
     setThumbnailPreview ('')
     setThumbnailFile (null)
     setThumbnailLoading (true)
-    if (thumbnailPreview)
-      URL.revokeObjectURL (thumbnailPreview)
+    if (thumbnailPreviewRef.current)
+      URL.revokeObjectURL (thumbnailPreviewRef.current)
     const data = await apiGet<Blob> ('/preview/thumbnail',
 				     { params: { url }, responseType: 'blob' })
     const imageURL = URL.createObjectURL (data)
@@ -110,7 +100,24 @@ export default (({ user }: Props) => {
 				'thumbnail.png',
 				{ type: data.type || 'image/png' }))
     setThumbnailLoading (false)
-  }
+  }, [url])
+
+  useEffect (() => {
+    thumbnailPreviewRef.current = thumbnailPreview
+  }, [thumbnailPreview])
+
+  useEffect (() => {
+    if (titleAutoFlg && url)
+      fetchTitle ()
+  }, [fetchTitle, titleAutoFlg, url])
+
+  useEffect (() => {
+    if (thumbnailAutoFlg && url)
+      fetchThumbnail ()
+  }, [fetchThumbnail, thumbnailAutoFlg, url])
+
+  if (!(editable))
+    return <Forbidden/>
 
   return (
       <MainArea>
@@ -207,4 +214,6 @@ export default (({ user }: Props) => {
 	  </Button>
 	</Form>
       </MainArea>)
-}) satisfies FC<Props>
+}
+
+export default PostNewPage

frontend/src/pages/posts/PostSearchPage.tsx

@@ -32,7 +32,7 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
 }
 
 
-export default (() => {
+const PostSearchPage: FC = () => {
   const location = useLocation ()
 
   const navigate = useNavigate ()
@@ -96,7 +96,8 @@ export default (() => {
     setUpdatedTo (qUpdatedTo)
 
     document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-  }, [location.search])
+  }, [location.search, qCreatedFrom, qCreatedTo, qMatch, qOriginalCreatedFrom,
+      qOriginalCreatedTo, qTags, qTitle, qUpdatedFrom, qUpdatedTo, qURL])
 
   const search = async () => {
     const qs = new URLSearchParams ()
@@ -336,4 +337,6 @@ export default (() => {
 	      <Pagination page={page} totalPages={totalPages}/>
 	    </div>) : '結果ないよ（笑）')}
       </MainArea>)
-}) satisfies FC
+}
+
+export default PostSearchPage