This commit is contained in:
@@ -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>
|
||||
</>)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user