|
|
@@ -1,8 +1,65 @@ |
|
|
|
import { useEffect, useState } from 'react' |
|
|
|
import { Link, useLocation, useParams } from 'react-router-dom' |
|
|
|
import MainArea from '@/components/layout/MainArea' |
|
|
|
import axios from 'axios' |
|
|
|
import { API_BASE_URL } from '@/config' |
|
|
|
|
|
|
|
import type { WikiPageChange } from '@/types' |
|
|
|
|
|
|
|
|
|
|
|
export default () => { |
|
|
|
const [changes, setChanges] = useState<WikiPageChange[]> ([]) |
|
|
|
|
|
|
|
const location = useLocation () |
|
|
|
const query = new URLSearchParams (location.search) |
|
|
|
const id = query.get ('id') |
|
|
|
|
|
|
|
useEffect (() => { |
|
|
|
void (axios.get (`${ API_BASE_URL }/wiki/changes`, id && { params: { id } }) |
|
|
|
.then (res => setChanges (res.data))) |
|
|
|
}, [location.search]) |
|
|
|
|
|
|
|
return ( |
|
|
|
<MainArea> |
|
|
|
<table className="table-auto w-full border-collapse"> |
|
|
|
<thead> |
|
|
|
<tr> |
|
|
|
<th></th> |
|
|
|
<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 => ( |
|
|
|
<tr key={change.sha}> |
|
|
|
<td>差分</td> |
|
|
|
<td className="p-2"> |
|
|
|
<Link to={`/wiki/${ encodeURIComponent (change.wiki_page.title) }`} |
|
|
|
className="text-blue-400 hover:underline"> |
|
|
|
{change.wiki_page.title} |
|
|
|
</Link> |
|
|
|
</td> |
|
|
|
<td className="p-2"> |
|
|
|
{(() => { |
|
|
|
switch (change.change_type) |
|
|
|
{ |
|
|
|
case 'create': return '新規' |
|
|
|
case 'update': return '更新' |
|
|
|
case 'delete': return '削除' |
|
|
|
} |
|
|
|
}) ()} |
|
|
|
</td> |
|
|
|
<td className="p-2"> |
|
|
|
<Link to={`/users/${ change.user.id }`} |
|
|
|
className="text-blue-400 hover:underline"> |
|
|
|
{change.user.name} |
|
|
|
</Link> |
|
|
|
<br /> |
|
|
|
{change.timestamp} |
|
|
|
</td> |
|
|
|
</tr>))} |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
</MainArea>) |
|
|
|
} |