This commit is contained in:
@@ -10,6 +10,7 @@ import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import { Toaster } from '@/components/ui/toaster'
|
||||
import { apiPost, isApiError } from '@/lib/api'
|
||||
import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
|
||||
import MaterialBasePage from '@/pages/materials/MaterialBasePage'
|
||||
import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
|
||||
import MaterialListPage from '@/pages/materials/MaterialListPage'
|
||||
@@ -58,6 +59,7 @@ const RouteTransitionWrapper = ({ user, setUser }: {
|
||||
<Route path="/posts/changes" element={<PostHistoryPage/>}/>
|
||||
<Route path="/tags" element={<TagListPage/>}/>
|
||||
<Route path="/tags/:id" element={<TagDetailPage/>}/>
|
||||
<Route path="/tags/:id/deerjikists" element={<DeerjikistDetailPage/>}/>
|
||||
<Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
|
||||
<Route path="/tags/changes" element={<TagHistoryPage/>}/>
|
||||
<Route path="/theatres/:id" element={<TheatreDetailPage/>}/>
|
||||
|
||||
@@ -45,9 +45,9 @@ export default (({ tag,
|
||||
<>
|
||||
{(linkFlg && withWiki) && (
|
||||
<span className="mr-1">
|
||||
{(tag.materialId != null || tag.hasWiki)
|
||||
{(tag.materialId != null || tag.hasWiki || tag.hasDeerjikists)
|
||||
? (
|
||||
tag.materialId == null
|
||||
tag.materialId == null && !(tag.hasDeerjikists)
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/wiki/${ encodeURIComponent (tag.name) }`}
|
||||
@@ -55,11 +55,19 @@ export default (({ tag,
|
||||
?
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
to={`/materials/${ tag.materialId }`}
|
||||
className={linkClass}>
|
||||
?
|
||||
</PrefetchLink>))
|
||||
tag.hasWiki
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/materials/${ tag.materialId }`}
|
||||
className={linkClass}>
|
||||
?
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
to={`/tags/${ tag.id }/deerjikists`}
|
||||
className={linkClass}>
|
||||
?
|
||||
</PrefetchLink>)))
|
||||
: (
|
||||
['character', 'material'].includes (tag.category)
|
||||
? (
|
||||
@@ -71,13 +79,23 @@ export default (({ tag,
|
||||
!
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
to={`/wiki/${ encodeURIComponent (tag.name) }`}
|
||||
className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
|
||||
dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
|
||||
title={`${ tag.name } Wiki が存在しません.`}>
|
||||
!
|
||||
</PrefetchLink>))}
|
||||
tag.category === 'deerjikist'
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/tags/${ tag.id }/deerjikists`}
|
||||
className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
|
||||
dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
|
||||
title={`${ tag.name } に関する情報が存在しません.`}>
|
||||
!
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
to={`/wiki/${ encodeURIComponent (tag.name) }`}
|
||||
className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
|
||||
dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
|
||||
title={`${ tag.name } Wiki が存在しません.`}>
|
||||
!
|
||||
</PrefetchLink>)))}
|
||||
</span>)}
|
||||
{nestLevel > 0 && (
|
||||
<span
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { Category } from 'types'
|
||||
import type { Category, Platform } from 'types'
|
||||
|
||||
export const LIGHT_COLOUR_SHADE = 800
|
||||
export const DARK_COLOUR_SHADE = 300
|
||||
@@ -31,6 +31,11 @@ export const FETCH_POSTS_ORDER_FIELDS = [
|
||||
'updated_at',
|
||||
] as const
|
||||
|
||||
export const PLATFORM_NAMES: Record<Platform, string> =
|
||||
{ nico: 'ニコニコ', youtube: 'YouTube' } as const
|
||||
|
||||
export const PLATFORMS = ['nico', 'youtube'] as const
|
||||
|
||||
export const TAG_COLOUR = {
|
||||
deerjikist: 'rose',
|
||||
meme: 'purple',
|
||||
|
||||
@@ -9,11 +9,12 @@ export const postsKeys = {
|
||||
['posts', 'changes', p] as const }
|
||||
|
||||
export const tagsKeys = {
|
||||
root: ['tags'] as const,
|
||||
index: (p: FetchTagsParams) => ['tags', 'index', p] as const,
|
||||
show: (name: string) => ['tags', name] as const,
|
||||
changes: (p: { id?: string; page: number; limit: number }) =>
|
||||
['tags', 'changes', p] as const }
|
||||
root: ['tags'] as const,
|
||||
index: (p: FetchTagsParams) => ['tags', 'index', p] as const,
|
||||
show: (name: string) => ['tags', name] as const,
|
||||
changes: (p: { id?: string; page: number; limit: number }) =>
|
||||
['tags', 'changes', p] as const,
|
||||
deerjikists: (id: string) => ['tags', 'deerjikists', id] as const }
|
||||
|
||||
export const wikiKeys = {
|
||||
root: ['wiki'] as const,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { apiGet } from '@/lib/api'
|
||||
|
||||
import type { FetchTagsParams, Tag, TagVersion } from '@/types'
|
||||
import type { Deerjikist, FetchTagsParams, Tag, TagVersion } from '@/types'
|
||||
|
||||
|
||||
export const fetchTags = async (
|
||||
@@ -56,3 +56,9 @@ export const fetchTagChanges = async (
|
||||
versions: TagVersion[]
|
||||
count: number }> =>
|
||||
await apiGet ('/tags/versions', { params: { ...(id && { id }), page, limit } })
|
||||
|
||||
|
||||
export const fetchDeerjikistsByTag = async (
|
||||
id: string,
|
||||
): Promise<{ tag: Tag; deerjikists: Deerjikist[]}> =>
|
||||
await apiGet (`/tags/${ id }/deerjikists`)
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
import TagLink from '@/components/TagLink'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { PLATFORM_NAMES, PLATFORMS } from '@/consts'
|
||||
import { apiPut } from '@/lib/api'
|
||||
import { tagsKeys } from '@/lib/queryKeys'
|
||||
import { fetchDeerjikistsByTag } from '@/lib/tags'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { FC, FormEvent } from 'react'
|
||||
|
||||
import type { Deerjikist, Platform } from '@/types'
|
||||
|
||||
|
||||
export default (() => {
|
||||
const { id } = useParams ()
|
||||
const tagId = String (id ?? '')
|
||||
const tagKey = tagsKeys.deerjikists (tagId)
|
||||
|
||||
const { data: qData, isLoading: loading } =
|
||||
useQuery ({ queryKey: tagKey, queryFn: () => fetchDeerjikistsByTag (tagId) })
|
||||
const tag = qData?.tag
|
||||
const deerjikists = qData?.deerjikists ?? []
|
||||
|
||||
const [data, setData] =
|
||||
useState<(Omit<Deerjikist, 'platform'> & { platform: Platform | null })[]> ([])
|
||||
const [disabled, setDisabled] = useState (true)
|
||||
|
||||
const qc = useQueryClient ()
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault ()
|
||||
|
||||
try
|
||||
{
|
||||
setDisabled (true)
|
||||
|
||||
setData (await apiPut<Deerjikist[]> (`/tags/${ id }/deerjikists`, data))
|
||||
qc.invalidateQueries ({ queryKey: tagsKeys.root })
|
||||
|
||||
toast ({ description: '更新しました.' })
|
||||
}
|
||||
catch
|
||||
{
|
||||
toast ({ title: '更新失敗', description: '入力内容を確認してください.' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setDisabled (false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
if (!(tag))
|
||||
{
|
||||
setDisabled (true)
|
||||
return
|
||||
}
|
||||
|
||||
setData (deerjikists)
|
||||
setDisabled (false)
|
||||
}, [deerjikists])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
{(loading || !(tag)) ? 'Loading...' : (
|
||||
<div className="max-w-xl">
|
||||
<PageTitle>
|
||||
<TagLink tag={tag} withWiki={false} withCount={false}/>
|
||||
</PageTitle>
|
||||
|
||||
<form onSubmit={handleSubmit} className="my-4 space-y-2">
|
||||
{data.map ((datum, i) => (
|
||||
<fieldset key={i} className="min-w-0 rounded-lg border border-gray-300
|
||||
dark:border-gray-700 p-4">
|
||||
<legend className="px-2 text-sm font-semibold text-gray-700
|
||||
dark:text-gray-300">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setData (prev => [...prev.slice (0, i),
|
||||
...prev.slice (i + 1)])}>
|
||||
#{i + 1}
|
||||
</button>
|
||||
</legend>
|
||||
|
||||
{/* プラットフォーム */}
|
||||
<div>
|
||||
<Label>プラットフォーム</Label>
|
||||
<select
|
||||
className="w-full border p-2 rounded"
|
||||
disabled={disabled}
|
||||
value={datum.platform ?? ''}
|
||||
onChange={e => setData (prev => {
|
||||
const rtn = [...prev]
|
||||
rtn[i] = { ...rtn[i],
|
||||
platform: (e.target.value || null) as Platform | null }
|
||||
return rtn
|
||||
})}>
|
||||
<option value=""> </option>
|
||||
{PLATFORMS.map (p => (
|
||||
<option key={p} value={p}>
|
||||
{PLATFORM_NAMES[p]}
|
||||
</option>))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* コード */}
|
||||
<div>
|
||||
<Label>コード</Label>
|
||||
<input
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
className="w-full border p-2 rounded"
|
||||
value={datum.code}
|
||||
onChange={e => setData (prev => {
|
||||
const rtn = [...prev]
|
||||
rtn[i] = { ...rtn[i], code: e.target.value }
|
||||
return rtn
|
||||
})}/>
|
||||
</div>
|
||||
</fieldset>
|
||||
))}
|
||||
|
||||
<div className="py-3">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => setData (prev => [...prev, { platform: null, code: '' }])}>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="py-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={disabled}
|
||||
className={cn ('px-4 py-2 rounded',
|
||||
(disabled
|
||||
? 'text-gray-300 bg-gray-500'
|
||||
: 'text-white bg-blue-500'))}>
|
||||
更新
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -1,5 +1,6 @@
|
||||
import { CATEGORIES,
|
||||
FETCH_POSTS_ORDER_FIELDS,
|
||||
PLATFORMS,
|
||||
USER_ROLES,
|
||||
ViewFlagBehavior } from '@/consts'
|
||||
|
||||
@@ -7,6 +8,8 @@ import type { ReactNode } from 'react'
|
||||
|
||||
export type Category = typeof CATEGORIES[number]
|
||||
|
||||
export type Deerjikist = { platform: Platform; code: string }
|
||||
|
||||
export type FetchPostsOrder = `${ FetchPostsOrderField }:${ 'asc' | 'desc' }`
|
||||
|
||||
export type FetchPostsOrderField = typeof FETCH_POSTS_ORDER_FIELDS[number]
|
||||
@@ -114,6 +117,8 @@ export type NiconicoViewerHandle = {
|
||||
showComments: () => void
|
||||
hideComments: () => void }
|
||||
|
||||
export type Platform = typeof PLATFORMS[number]
|
||||
|
||||
export type Post = {
|
||||
id: number
|
||||
url: string
|
||||
@@ -179,6 +184,7 @@ export type Tag = {
|
||||
updatedAt: string
|
||||
hasWiki: boolean
|
||||
materialId: number
|
||||
hasDeerjikists: boolean
|
||||
children?: Tag[]
|
||||
matchedAlias?: string | null }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user