|
|
@@ -3,6 +3,9 @@ import { Link, useLocation, useParams } from 'react-router-dom' |
|
|
|
import axios from 'axios' |
|
|
|
import { API_BASE_URL, SITE_TITLE } from '../config' |
|
|
|
import NicoViewer from '../components/NicoViewer' |
|
|
|
import { Button } from '@/components/ui/button' |
|
|
|
import { toast } from '@/components/ui/use-toast' |
|
|
|
import { cn } from '@/lib/utils' |
|
|
|
|
|
|
|
type Tag = { id: number |
|
|
|
name: string |
|
|
@@ -12,22 +15,51 @@ type Post = { id: number |
|
|
|
url: string |
|
|
|
title: string |
|
|
|
thumbnail: string |
|
|
|
tags: Tag[] } |
|
|
|
tags: Tag[] |
|
|
|
viewed: boolean } |
|
|
|
|
|
|
|
type Props = { posts: Post[] |
|
|
|
setPosts: (posts: Post[]) => void } |
|
|
|
|
|
|
|
|
|
|
|
const PostDetailPage = (props: Props) => { |
|
|
|
const { posts, setPosts } = props |
|
|
|
const PostDetailPage = ({ posts, setPosts }: Props) => { |
|
|
|
const { id } = useParams () |
|
|
|
|
|
|
|
const location = useLocation () |
|
|
|
|
|
|
|
const changeViewedFlg = () => { |
|
|
|
if (posts[0]?.viewed) |
|
|
|
{ |
|
|
|
void (axios.delete ( |
|
|
|
`${ API_BASE_URL }/posts/${ id }/viewed`, |
|
|
|
{ headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) |
|
|
|
.then (res => setPosts (([post]) => { |
|
|
|
post.viewed = false |
|
|
|
return [post] |
|
|
|
})) |
|
|
|
.catch (err => toast ({ title: '失敗……', |
|
|
|
description: '通信に失敗しました……' }))) |
|
|
|
} |
|
|
|
else |
|
|
|
{ |
|
|
|
void (axios.post ( |
|
|
|
`${ API_BASE_URL }/posts/${ id }/viewed`, |
|
|
|
{ }, |
|
|
|
{ headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) |
|
|
|
.then (res => setPosts (([post]) => { |
|
|
|
post.viewed = true |
|
|
|
return [post] |
|
|
|
})) |
|
|
|
.catch (err => toast ({ title: '失敗……', |
|
|
|
description: '通信に失敗しました……' }))) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect (() => { |
|
|
|
if (!(id)) |
|
|
|
return |
|
|
|
void (axios.get (`/api/posts/${ id }`) |
|
|
|
void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: { |
|
|
|
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) |
|
|
|
.then (res => setPosts ([res.data])) |
|
|
|
.catch (err => console.error ('うんち!', err))) |
|
|
|
}, [id]) |
|
|
@@ -56,6 +88,11 @@ const PostDetailPage = (props: Props) => { |
|
|
|
else |
|
|
|
return <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" /> |
|
|
|
}) ()} |
|
|
|
<Button onClick={changeViewedFlg} |
|
|
|
className={cn ('text-white', |
|
|
|
posts[0]?.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}> |
|
|
|
{posts[0]?.viewed ? '閲覧済' : '未閲覧'} |
|
|
|
</Button> |
|
|
|
</div>) |
|
|
|
} |
|
|
|
|
|
|
|