みてるぞ
eb975e5301
Merge branch 'main' into feature/140 #140 Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #140 #140 Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 #140 #140 #140 #140 #140 #140 #140 #140 Merge remote-tracking branch 'origin/main' into feature/140 Merge remote-tracking branch 'origin/main' into feature/140 #140 ぼちぼち Merge remote-tracking branch 'origin/main' into feature/140 #140 #140 #140 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #256
98 行
2.9 KiB
TypeScript
98 行
2.9 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import { Helmet } from 'react-helmet-async'
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
import TagLink from '@/components/TagLink'
|
|
import PrefetchLink from '@/components/PrefetchLink'
|
|
import PageTitle from '@/components/common/PageTitle'
|
|
import Pagination from '@/components/common/Pagination'
|
|
import MainArea from '@/components/layout/MainArea'
|
|
import { SITE_TITLE } from '@/config'
|
|
import { fetchPostChanges } from '@/lib/posts'
|
|
import { postsKeys } from '@/lib/queryKeys'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
|
|
export default (() => {
|
|
const location = useLocation ()
|
|
const query = new URLSearchParams (location.search)
|
|
const id = query.get ('id')
|
|
const page = Number (query.get ('page') ?? 1)
|
|
const limit = Number (query.get ('limit') ?? 20)
|
|
|
|
// 投稿列の結合で使用
|
|
let rowsCnt: number
|
|
|
|
const { data, isLoading: loading } = useQuery ({
|
|
queryKey: postsKeys.changes ({ ...(id && { id }), page, limit }),
|
|
queryFn: () => fetchPostChanges ({ ...(id && { id }), page, limit }) })
|
|
const changes = data?.changes ?? []
|
|
const totalPages = data ? Math.ceil (data.count / limit) : 0
|
|
|
|
return (
|
|
<MainArea>
|
|
<Helmet>
|
|
<title>{`耕作履歴 | ${ SITE_TITLE }`}</title>
|
|
</Helmet>
|
|
|
|
<PageTitle>
|
|
耕作履歴
|
|
{id && <>: 投稿 {<PrefetchLink to={`/posts/${ id }`}>#{id}</PrefetchLink>}</>}
|
|
</PageTitle>
|
|
|
|
{loading ? 'Loading...' : (
|
|
<>
|
|
<table className="table-auto w-full border-collapse">
|
|
<thead>
|
|
<tr>
|
|
<th className="p-2 text-left">投稿</th>
|
|
<th className="p-2 text-left">変更</th>
|
|
<th className="p-2 text-left">日時</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{changes.map ((change, i) => {
|
|
let withPost = i === 0 || change.post.id !== changes[i - 1].post.id
|
|
if (withPost)
|
|
{
|
|
rowsCnt = 1
|
|
for (let j = i + 1;
|
|
(j < changes.length
|
|
&& change.post.id === changes[j].post.id);
|
|
++j)
|
|
++rowsCnt
|
|
}
|
|
return (
|
|
<tr key={`${ change.timestamp }-${ change.post.id }-${ change.tag.id }`}>
|
|
{withPost && (
|
|
<td className="align-top" rowSpan={rowsCnt}>
|
|
<PrefetchLink to={`/posts/${ change.post.id }`}>
|
|
<img src={change.post.thumbnail || change.post.thumbnailBase || undefined}
|
|
alt={change.post.title || change.post.url}
|
|
title={change.post.title || change.post.url || undefined}
|
|
className="w-40"/>
|
|
</PrefetchLink>
|
|
</td>)}
|
|
<td>
|
|
<TagLink tag={change.tag} withWiki={false} withCount={false}/>
|
|
{`を${ change.changeType === 'add' ? '記載' : '消除' }`}
|
|
</td>
|
|
<td>
|
|
{change.user ? (
|
|
<PrefetchLink to={`/users/${ change.user.id }`}>
|
|
{change.user.name}
|
|
</PrefetchLink>) : 'bot 操作'}
|
|
<br/>
|
|
{change.timestamp}
|
|
</td>
|
|
</tr>)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
|
|
<Pagination page={page} totalPages={totalPages}/>
|
|
</>)}
|
|
</MainArea>)
|
|
}) satisfies FC
|