このコミットが含まれているのは:
@@ -1,176 +1,328 @@
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { Fragment, useEffect, useMemo, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import TagLink from '@/components/TagLink'
|
||||
import FormField from '@/components/common/FormField'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import SectionTitle from '@/components/common/SectionTitle'
|
||||
import SubsectionTitle from '@/components/common/SubsectionTitle'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { API_BASE_URL, SITE_TITLE } from '@/config'
|
||||
import { apiGet } from '@/lib/api'
|
||||
import {
|
||||
fetchMaterials,
|
||||
fetchMaterialTagByName,
|
||||
parseMaterialFilter,
|
||||
} from '@/lib/materials'
|
||||
import { materialsKeys } from '@/lib/queryKeys'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag } from '@/types'
|
||||
import type { Material, MaterialFilter, MaterialTagTree } from '@/types'
|
||||
|
||||
type TagWithMaterial = Omit<Tag, 'children'> & {
|
||||
children: TagWithMaterial[]
|
||||
material: Material | null }
|
||||
const MATERIAL_FILTER_LABELS: Record<MaterialFilter, string> = {
|
||||
present: '素材あり',
|
||||
missing: '素材なし',
|
||||
any: 'すべて',
|
||||
}
|
||||
|
||||
|
||||
const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
|
||||
const MaterialCard = ({ tag }: { tag: MaterialTagTree }) => {
|
||||
if (!(tag.material))
|
||||
return
|
||||
return null
|
||||
|
||||
return (
|
||||
<PrefetchLink
|
||||
to={`/materials/${ tag.material.id }`}
|
||||
className="block w-40 h-40">
|
||||
<div
|
||||
className={`w-full h-full overflow-hidden rounded-xl shadow
|
||||
text-center content-center text-4xl ${
|
||||
tag.material.fileSuppressedAt
|
||||
? 'border-2 border-red-300 bg-red-50 text-base text-red-700'
|
||||
: '' }`}
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
{tag.material.fileSuppressedAt
|
||||
? <span>抑止済み</span>
|
||||
: (tag.material.contentType && /image\/.*/.test (tag.material.contentType))
|
||||
? <img src={tag.material.file || undefined}/>
|
||||
: <span>照会</span>}
|
||||
</div>
|
||||
to={`/materials/${ tag.material.id }`}
|
||||
className="block h-40 w-40">
|
||||
<div
|
||||
className={`h-full w-full overflow-hidden rounded-xl shadow text-center
|
||||
content-center text-4xl ${
|
||||
tag.material.fileSuppressedAt
|
||||
? 'border-2 border-red-300 bg-red-50 text-base text-red-900 ' +
|
||||
'dark:border-red-800 dark:bg-red-950 dark:text-red-100'
|
||||
: 'bg-white text-stone-900 dark:bg-stone-900 dark:text-stone-100' }`}
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
{tag.material.fileSuppressedAt
|
||||
? <span>抑止済み</span>
|
||||
: (tag.material.contentType && /image\/.*/.test (tag.material.contentType))
|
||||
? <img src={tag.material.file || undefined}/>
|
||||
: <span>照会</span>}
|
||||
</div>
|
||||
</PrefetchLink>)
|
||||
}
|
||||
|
||||
|
||||
const MaterialListPage: FC = () => {
|
||||
const [loading, setLoading] = useState (false)
|
||||
const [tag, setTag] = useState<TagWithMaterial | null> (null)
|
||||
const MaterialList = ({ materials }: { materials: Material[] }) => (
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{materials.map (material => (
|
||||
<article
|
||||
key={material.id}
|
||||
className={`rounded-2xl border p-4 shadow-sm ${
|
||||
material.fileSuppressedAt
|
||||
? 'border-red-200 bg-red-50 text-red-900 dark:border-red-900 ' +
|
||||
'dark:bg-red-950 dark:text-red-100'
|
||||
: 'border-stone-200 bg-white text-stone-900 dark:border-stone-700 ' +
|
||||
'dark:bg-stone-900 dark:text-stone-100'}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="font-medium text-stone-900 dark:text-stone-100">
|
||||
{material.tag?.name ?? '未分類素材'}
|
||||
</h2>
|
||||
{material.fileSuppressedAt && (
|
||||
<p className="mt-1 text-sm text-red-700 dark:text-red-200">抑止済み</p>)}
|
||||
</div>
|
||||
<PrefetchLink
|
||||
to={`/materials/${ material.id }`}
|
||||
className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
|
||||
照会
|
||||
</PrefetchLink>
|
||||
</div>
|
||||
{material.exportPaths.legacyDrive && (
|
||||
<p className="mt-3 break-all text-sm text-stone-600 dark:text-stone-300">
|
||||
{material.exportPaths.legacyDrive}
|
||||
</p>)}
|
||||
</article>))}
|
||||
</div>)
|
||||
|
||||
|
||||
const MaterialTagTreeView = ({ tag }: { tag: MaterialTagTree }) => (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={tag}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={tag.material
|
||||
? `/materials/${ tag.material.id }`
|
||||
: `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
|
||||
</PageTitle>
|
||||
{(!tag.material && tag.hasMaterial !== true && tag.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={tag}/>
|
||||
|
||||
<div className="ml-2 overflow-x-auto pb-2">
|
||||
{tag.children.map (c2 => (
|
||||
<Fragment key={c2.id}>
|
||||
<SectionTitle>
|
||||
<TagLink
|
||||
tag={c2}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
|
||||
</SectionTitle>
|
||||
{(!c2.material && c2.hasMaterial !== true && c2.category !== 'meme') && (
|
||||
<div className="-mt-4">
|
||||
<PrefetchLink to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c2}/>
|
||||
|
||||
<div className="ml-2">
|
||||
{c2.children.map (c3 => (
|
||||
<Fragment key={c3.id}>
|
||||
<SubsectionTitle>
|
||||
<TagLink
|
||||
tag={c3}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
|
||||
</SubsectionTitle>
|
||||
{(!c3.material && c3.hasMaterial !== true && c3.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (c3.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c3}/>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</>)
|
||||
|
||||
|
||||
const MaterialSearchTop: FC<{
|
||||
materialFilter: MaterialFilter
|
||||
setMaterialFilter: (value: MaterialFilter) => void
|
||||
tagName: string
|
||||
setTagName: (value: string) => void
|
||||
}> = ({ materialFilter, setMaterialFilter, tagName, setTagName }) => {
|
||||
const navigate = useNavigate ()
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
|
||||
const handleSearch = () => {
|
||||
const qs = new URLSearchParams (location.search)
|
||||
if (tagName.trim ())
|
||||
qs.set ('tag', tagName.trim ())
|
||||
else
|
||||
qs.delete ('tag')
|
||||
qs.delete ('unclassified')
|
||||
qs.set ('material_filter', materialFilter)
|
||||
navigate (`/materials?${ qs.toString () }`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<PageTitle>素材集</PageTitle>
|
||||
|
||||
<section className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm
|
||||
text-stone-900 dark:border-stone-700 dark:bg-stone-900
|
||||
dark:text-stone-100">
|
||||
<div className="space-y-4">
|
||||
<FormField label="タグ名検索">
|
||||
{() => (
|
||||
<TagInput
|
||||
value={tagName}
|
||||
setValue={setTagName}/>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="素材状態">
|
||||
{({ invalid }) => (
|
||||
<select
|
||||
value={materialFilter}
|
||||
onChange={e => setMaterialFilter (e.target.value as MaterialFilter)}
|
||||
className={inputClass (invalid)}>
|
||||
{Object.entries (MATERIAL_FILTER_LABELS).map (([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSearch}
|
||||
className="rounded-full bg-sky-600 px-4 py-2 text-white hover:bg-sky-700
|
||||
dark:bg-sky-500 dark:text-stone-950 dark:hover:bg-sky-400">
|
||||
この条件で探す
|
||||
</button>
|
||||
<PrefetchLink
|
||||
to={`/materials?unclassified=1&material_filter=${ materialFilter }`}
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
未分類素材を見る
|
||||
</PrefetchLink>
|
||||
<PrefetchLink
|
||||
to="/materials/new"
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
新規素材を追加
|
||||
</PrefetchLink>
|
||||
<a
|
||||
href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-full border border-stone-300 bg-white px-4 py-2
|
||||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||||
ZIP をダウンロード
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
const MaterialListPage: FC = () => {
|
||||
const location = useLocation ()
|
||||
const query = useMemo (() => new URLSearchParams (location.search), [location.search])
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
const unclassified = query.get ('unclassified') === '1'
|
||||
const initialFilter = parseMaterialFilter (query.get ('material_filter'), 'present')
|
||||
|
||||
const [tagName, setTagName] = useState (tagQuery)
|
||||
const [materialFilter, setMaterialFilter] = useState<MaterialFilter> (initialFilter)
|
||||
|
||||
const {
|
||||
data: tag,
|
||||
isLoading: tagLoading,
|
||||
isError: tagError,
|
||||
} = useQuery ({
|
||||
queryKey: materialsKeys.byTagName (tagQuery, initialFilter),
|
||||
queryFn: () => fetchMaterialTagByName (tagQuery, initialFilter),
|
||||
enabled: tagQuery !== '' && !unclassified,
|
||||
})
|
||||
|
||||
const {
|
||||
data: unclassifiedData,
|
||||
isLoading: unclassifiedLoading,
|
||||
isError: unclassifiedError,
|
||||
} = useQuery ({
|
||||
queryKey: materialsKeys.unclassified ({ page: 1, limit: 50 }),
|
||||
queryFn: () => fetchMaterials ({ page: 1, limit: 50, unclassified: true }),
|
||||
enabled: unclassified,
|
||||
})
|
||||
|
||||
useEffect (() => {
|
||||
if (!(tagQuery))
|
||||
{
|
||||
setTag (null)
|
||||
return
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
setLoading (true)
|
||||
setTag (
|
||||
await apiGet<TagWithMaterial> (
|
||||
`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading (false)
|
||||
}
|
||||
}) ()
|
||||
}, [location.search, tagQuery])
|
||||
setTagName (tagQuery)
|
||||
setMaterialFilter (initialFilter)
|
||||
}, [initialFilter, tagQuery])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
|
||||
{loading ? 'Loading...' : (
|
||||
tag
|
||||
? (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={tag}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={tag.material
|
||||
? `/materials/${ tag.material.id }`
|
||||
: `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
|
||||
</PageTitle>
|
||||
{(!(tag.material) && tag.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={tag}/>
|
||||
|
||||
<div className="ml-2 overflow-x-auto pb-2">
|
||||
{tag.children.map (c2 => (
|
||||
<Fragment key={c2.id}>
|
||||
<SectionTitle>
|
||||
<TagLink
|
||||
tag={c2}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
|
||||
</SectionTitle>
|
||||
{(!(c2.material) && c2.category !== 'meme') && (
|
||||
<div className="-mt-4">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c2}/>
|
||||
|
||||
<div className="ml-2">
|
||||
{c2.children.map (c3 => (
|
||||
<Fragment key={c3.id}>
|
||||
<SubsectionTitle>
|
||||
<TagLink
|
||||
tag={c3}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
|
||||
</SubsectionTitle>
|
||||
{(!(c3.material) && c3.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${
|
||||
encodeURIComponent (c3.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c3}/>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</>)
|
||||
: (
|
||||
<>
|
||||
<p>左のリストから照会したいタグを選択してください。</p>
|
||||
<p>もしくは……</p>
|
||||
<ul>
|
||||
<li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
|
||||
<li>
|
||||
<a href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}>
|
||||
すべての素材をダウンロードする
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</>))}
|
||||
{unclassified ? (
|
||||
<>
|
||||
<PageTitle>未分類素材</PageTitle>
|
||||
<div className="-mt-2 mb-4">
|
||||
<PrefetchLink
|
||||
to={`/materials?material_filter=${ materialFilter }`}
|
||||
className="text-sm text-sky-700 underline underline-offset-2
|
||||
dark:text-sky-300">
|
||||
素材検索トップへ戻る
|
||||
</PrefetchLink>
|
||||
</div>
|
||||
{unclassifiedLoading && <p>Loading...</p>}
|
||||
{unclassifiedError && (
|
||||
<p className="text-red-600 dark:text-red-300">未分類素材の取得に失敗しました．</p>)}
|
||||
{unclassifiedData && unclassifiedData.materials.length === 0 && (
|
||||
<p>未分類素材はありません．</p>)}
|
||||
{unclassifiedData && unclassifiedData.materials.length > 0 && (
|
||||
<MaterialList materials={unclassifiedData.materials}/>)}
|
||||
</>) : tagQuery ? (
|
||||
<>
|
||||
{tagLoading && <p>Loading...</p>}
|
||||
{tagError && (
|
||||
<p className="text-red-600">素材一覧の取得に失敗しました．</p>)}
|
||||
{(!tagLoading && !tagError && !tag) && (
|
||||
<p>該当する素材タグが見つかりませんでした．</p>)}
|
||||
{tag && <MaterialTagTreeView tag={tag}/>}
|
||||
</>) : (
|
||||
<MaterialSearchTop
|
||||
tagName={tagName}
|
||||
setTagName={setTagName}
|
||||
materialFilter={materialFilter}
|
||||
setMaterialFilter={setMaterialFilter}/>)}
|
||||
</MainArea>)
|
||||
}
|
||||
|
||||
|
||||
新しい課題から参照
ユーザをブロックする