#49

2025-07-13 02:46:13 +09:00
parent fdf242c060
commit 0c46cf28db
29 changed files with 509 additions and 456 deletions
@@ -1,8 +1,8 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'

 import TagDetailSidebar from '@/components/TagDetailSidebar'
 import NicoViewer from '@/components/NicoViewer'
@@ -14,7 +14,7 @@ import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
 import { cn } from '@/lib/utils'

-import type { Post, Tag, User } from '@/types'
+import type { Post, User } from '@/types'

 type Props = { user: User | null }

@@ -22,40 +22,44 @@ type Props = { user: User | null }
 export default ({ user }: Props) => {
  const { id } = useParams ()

-  const location = useLocation ()
-
  const [post, setPost] = useState<Post | null> (null)
  const [editing, setEditing] = useState (true)

-  const changeViewedFlg = () => {
-    if (post?.viewed)
-      {
-        void (axios.delete (
-                  `${ API_BASE_URL }/posts/${ id }/viewed`,
-                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-              .then (() => setPost (post => ({ ...post, viewed: false })))
-              .catch (() => toast ({ title:        '失敗……',
-                                     description:  '通信に失敗しました……' })))
-      }
-    else
-      {
-        void (axios.post (
-                  `${ API_BASE_URL }/posts/${ id }/viewed`,
-                  { },
-                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-              .then (() => setPost (post => ({ ...post, viewed: true })))
-              .catch (() => toast ({ title:        '失敗……',
-                                     description:  '通信に失敗しました……' })))
-      }
+  const changeViewedFlg = async () => {
+    const url = `${ API_BASE_URL }/posts/${ id }/viewed`
+    const opt = { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }
+    try
+    {
+      if (post!.viewed)
+	await axios.delete (url, opt)
+      else
+	await axios.post (url, { }, opt)
+
+      // 通信に成功したら “閲覧済” をトグル
+      setPost (post => ({ ...post!, viewed: !(post!.viewed) }))
+    }
+    catch
+    {
+      toast ({ title: '失敗……', description: '通信に失敗しました……' })
+    }
  }

  useEffect (() => {
    if (!(id))
      return
-    void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
-              'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-          .then (res => setPost (toCamel (res.data, { deep: true })))
-          .catch (err => console.error ('うんち!', err)))
+
+    void (async () => {
+      try
+      {
+	const res = await axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
+	    'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } })
+	setPost (toCamel (res.data as any, { deep: true }) as Post)
+      }
+      catch (err)
+      {
+	console.error ('うんち!', err)
+      }
+    }) ()
  }, [id])

  useEffect (() => {
@@ -69,47 +73,46 @@ export default ({ user }: Props) => {

  const url = post ? new URL (post.url) : null
  const nicoFlg = url?.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp'
-  const videoId = (nicoFlg
-                   ? url.pathname.match (/(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/)[0]
-                   : '')
+  const match = nicoFlg ? url.pathname.match (/(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/) : null
+  const videoId = match?.[0] ?? ''
  const viewedClass = (post?.viewed
-                       ? 'bg-blue-600 hover:bg-blue-700'
-                       : 'bg-gray-500 hover:bg-gray-600')
+		       ? 'bg-blue-600 hover:bg-blue-700'
+		       : 'bg-gray-500 hover:bg-gray-600')

  return (
      <>
-        <Helmet>
-          {(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} />
-        <MainArea>
-          {post
-           ? (
-              <>
-                {nicoFlg
-                 ? (
-                    <NicoViewer id={videoId}
-                                width="640"
-                                height="360" />)
-                 : <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />}
-                <Button onClick={changeViewedFlg}
-                        className={cn ('text-white', viewedClass)}>
-                  {post.viewed ? '閲覧済' : '未閲覧'}
-                </Button>
-                <TabGroup>
-                  {(['admin', 'member'].some (r => r === user?.role) && editing) && (
-                      <Tab name="編輯">
-                        <PostEditForm post={post}
-                                      onSave={newPost => {
-                                        setPost (newPost)
-                                        toast ({ description: '更新しました．' })
-                                      }} />
-                      </Tab>)}
-                </TabGroup>
-              </>)
-           : 'Loading...'}
-        </MainArea>
+	<Helmet>
+	  {(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} />
+	<MainArea>
+	  {post
+	   ? (
+	      <>
+		{nicoFlg
+		 ? (
+		    <NicoViewer id={videoId}
+				width={640}
+				height={360} />)
+		 : <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />}
+		<Button onClick={changeViewedFlg}
+			className={cn ('text-white', viewedClass)}>
+		  {post.viewed ? '閲覧済' : '未閲覧'}
+		</Button>
+		<TabGroup>
+		  {(['admin', 'member'].some (r => r === user?.role) && editing) && (
+		      <Tab name="編輯">
+			<PostEditForm post={post}
+				      onSave={newPost => {
+					setPost (newPost)
+					toast ({ description: '更新しました．' })
+				      }} />
+		      </Tab>)}
+		</TabGroup>
+	      </>)
+	   : 'Loading...'}
+	</MainArea>
      </>)
 }
@@ -1,6 +1,6 @@
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { Link, useLocation } from 'react-router-dom'

@@ -10,7 +10,7 @@ import TabGroup, { Tab } from '@/components/common/TabGroup'
 import MainArea from '@/components/layout/MainArea'
 import { API_BASE_URL, SITE_TITLE } from '@/config'

-import type { Post, Tag, WikiPage } from '@/types'
+import type { Post, WikiPage } from '@/types'


 export default () => {
@@ -21,13 +21,14 @@ export default () => {

  const loaderRef = useRef<HTMLDivElement | null> (null)

-  const loadMore = async withCursor => {
+  const loadMore = async (withCursor: boolean) => {
    setLoading (true)
    const res = await axios.get (`${ API_BASE_URL }/posts`, {
 	params: { tags:   tags.join (' '),
 		  match:  (anyFlg ? 'any' : 'all'),
 		  ...(withCursor ? { cursor } : { }) } })
-    const data = toCamel (res.data, { deep: true })
+    const data = toCamel (res.data as any, { deep: true }) as { posts:      Post[]
+								nextCursor: string }
    setPosts (posts => [...(withCursor ? posts : []), ...data.posts])
    setCursor (data.nextCursor)
    setLoading (false)
@@ -48,7 +49,9 @@ export default () => {
    const target = loaderRef.current
    target && observer.observe (target)

-    return () => target && observer.unobserve (target)
+    return () => {
+      target && observer.unobserve (target)
+    }
  }, [loaderRef, loading])

  useEffect (() => {
@@ -62,8 +65,8 @@ export default () => {
 	  try
 	  {
 	    const tagName = tags[0]
-	    const { data } = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
-	    setWikiPage (toCamel (data, { deep: true }))
+	    const res = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
+	    setWikiPage (toCamel (res.data as any, { deep: true }) as WikiPage)
 	  }
 	  catch
 	  {
@@ -84,7 +87,7 @@ export default () => {
 	</Helmet>
 	<TagSidebar posts={posts.slice (0, 20)} />
 	<MainArea>
-	  <TabGroup key={wikiPage}>
+	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length
 	       ? (
@@ -93,9 +96,9 @@ export default () => {
 		      <Link to={`/posts/${ post.id }`}
 			    key={post.id}
 			    className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
-			<img src={post.thumbnail || post.thumbnailBase || null}
+			<img src={post.thumbnail || post.thumbnailBase || undefined}
 			     alt={post.title || post.url}
-			     title={post.title || post.url || null}
+			     title={post.title || post.url || undefined}
 			     className="object-none w-full h-full" />
 		      </Link>))}
 		  </div>)
@@ -1,9 +1,8 @@
 import axios from 'axios'
-import React, { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { Helmet } from 'react-helmet-async'
-import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'

-import NicoViewer from '@/components/NicoViewer'
 import Form from '@/components/common/Form'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
@@ -12,16 +11,8 @@ import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
-import { cn } from '@/lib/utils'
-
-import type { Post, Tag } from '@/types'
-
-type Props = { posts:	  Post[]
-	       setPosts:  (posts: Post[]) => void }
-

 export default () => {
-  const location = useLocation ()
  const navigate = useNavigate ()

  const [title, setTitle] = useState ('')
@@ -41,7 +32,8 @@ export default () => {
    formData.append ('title', title)
    formData.append ('url', url)
    formData.append ('tags', tags)
-    formData.append ('thumbnail', thumbnailFile)
+    if (thumbnailFile)
+      formData.append ('thumbnail', thumbnailFile)

    void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
 	      'Content-Type':	  'multipart/form-data',
@@ -78,9 +70,10 @@ export default () => {
  const fetchTitle = async () => {
    setTitle ('')
    setTitleLoading (true)
-    const { data } = await axios.get (`${ API_BASE_URL }/preview/title`, {
+    const res = await axios.get (`${ API_BASE_URL }/preview/title`, {
 	params:   { url },
 	headers:  { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+    const data = res.data as { title: string }
    setTitle (data.title || '')
    setTitleLoading (false)
  }
@@ -91,10 +84,11 @@ export default () => {
    setThumbnailLoading (true)
    if (thumbnailPreview)
      URL.revokeObjectURL (thumbnailPreview)
-    const { data } = await axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
+    const res = await axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
 	params:       { url },
 	headers:      { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
 	responseType: 'blob' })
+    const data = res.data as Blob
    const imageURL = URL.createObjectURL (data)
    setThumbnailPreview (imageURL)
    setThumbnailFile (new File ([data],