This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import axios from 'axios'
|
||||
import toCamel from 'camelcase-keys'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { Link, useLocation, useParams } from 'react-router-dom'
|
||||
|
||||
import TagDetailSidebar from '@/components/TagDetailSidebar'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import axios from 'axios'
|
||||
import toCamel from 'camelcase-keys'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
|
||||
import TagSidebar from '@/components/TagSidebar'
|
||||
@@ -14,7 +14,7 @@ import type { Post, Tag, WikiPage } from '@/types'
|
||||
|
||||
|
||||
export default () => {
|
||||
const [posts, setPosts] = useState<Post[] | null> (null)
|
||||
const [posts, setPosts] = useState<Post[]> ([])
|
||||
const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
|
||||
const [cursor, setCursor] = useState ('')
|
||||
const [loading, setLoading] = useState (false)
|
||||
@@ -24,11 +24,11 @@ export default () => {
|
||||
const loadMore = async withCursor => {
|
||||
setLoading (true)
|
||||
const res = await axios.get (`${ API_BASE_URL }/posts`, {
|
||||
params: { tags: tags.join (' '),
|
||||
match: (anyFlg ? 'any' : 'all'),
|
||||
...(withCursor ? { cursor } : { }) } })
|
||||
params: { tags: tags.join (' '),
|
||||
match: (anyFlg ? 'any' : 'all'),
|
||||
...(withCursor ? { cursor } : { }) } })
|
||||
const data = toCamel (res.data, { deep: true })
|
||||
setPosts (posts => [...(posts || []), ...data.posts])
|
||||
setPosts (posts => [...(withCursor ? posts : []), ...data.posts])
|
||||
setCursor (data.nextCursor)
|
||||
setLoading (false)
|
||||
}
|
||||
@@ -42,7 +42,7 @@ export default () => {
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver (entries => {
|
||||
if (entries[0].isIntersecting && !(loading) && cursor)
|
||||
loadMore (true)
|
||||
loadMore (true)
|
||||
}, { threshold: 1 })
|
||||
|
||||
const target = loaderRef.current
|
||||
@@ -52,58 +52,65 @@ export default () => {
|
||||
}, [loaderRef, loading])
|
||||
|
||||
useEffect (() => {
|
||||
setPosts (null)
|
||||
setCursor ('')
|
||||
setPosts ([])
|
||||
loadMore (false)
|
||||
|
||||
setWikiPage (null)
|
||||
if (tags.length === 1)
|
||||
{
|
||||
void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (tags[0]) }`)
|
||||
.then (res => setWikiPage (toCamel (res.data, { deep: true })))
|
||||
.catch (() => {
|
||||
;
|
||||
}))
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
const tagName = tags[0]
|
||||
const { data } = await axios.get (`${ API_BASE_URL }/wiki/title/${ tagName }`)
|
||||
setWikiPage (toCamel (data, { deep: true }))
|
||||
}
|
||||
catch
|
||||
{
|
||||
;
|
||||
}
|
||||
}) ()
|
||||
}
|
||||
}, [location.search])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{tags.length
|
||||
? `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
|
||||
: `${ SITE_TITLE } 〜 ぼざクリ関聯綜合リンク集サイト`}
|
||||
</title>
|
||||
</Helmet>
|
||||
<TagSidebar posts={posts?.slice (0, 20) || []} />
|
||||
<MainArea>
|
||||
<TabGroup key={wikiPage}>
|
||||
<Tab name="広場">
|
||||
{posts == null ? 'Loading...' : (
|
||||
posts.length
|
||||
? (
|
||||
<div className="flex flex-wrap gap-4 p-4">
|
||||
{posts.map (post => (
|
||||
<Link to={`/posts/${ post.id }`}
|
||||
key={post.id}
|
||||
className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
|
||||
<img src={post.thumbnail ?? post.thumbnailBase}
|
||||
alt={post.title || post.url}
|
||||
className="object-none w-full h-full" />
|
||||
</Link>))}
|
||||
</div>)
|
||||
: '広場には何もありませんよ．')}
|
||||
<div ref={loaderRef} className="h-12"></div>
|
||||
</Tab>
|
||||
{(wikiPage && wikiPage.body) && (
|
||||
<Tab name="Wiki" init={posts && !(posts.length)}>
|
||||
<WikiBody body={wikiPage.body} />
|
||||
<div className="my-2">
|
||||
<Link to={`/wiki/${ wikiPage.title }`}>Wiki を見る</Link>
|
||||
</div>
|
||||
</Tab>)}
|
||||
</TabGroup>
|
||||
</MainArea>
|
||||
<Helmet>
|
||||
<title>
|
||||
{tags.length
|
||||
? `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
|
||||
: `${ SITE_TITLE } 〜 ぼざクリ関聯綜合リンク集サイト`}
|
||||
</title>
|
||||
</Helmet>
|
||||
<TagSidebar posts={posts.slice (0, 20)} />
|
||||
<MainArea>
|
||||
<TabGroup key={wikiPage}>
|
||||
<Tab name="広場">
|
||||
{posts.length
|
||||
? (
|
||||
<div className="flex flex-wrap gap-4 p-4">
|
||||
{posts.map (post => (
|
||||
<Link to={`/posts/${ post.id }`}
|
||||
key={post.id}
|
||||
className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
|
||||
<img src={post.thumbnail || post.thumbnailBase || null}
|
||||
alt={post.title || post.url}
|
||||
title={post.title || post.url || null}
|
||||
className="object-none w-full h-full" />
|
||||
</Link>))}
|
||||
</div>)
|
||||
: !(loading) && '広場には何もありませんよ．'}
|
||||
{loading && 'Loading...'}
|
||||
<div ref={loaderRef} className="h-12"></div>
|
||||
</Tab>
|
||||
{(wikiPage && wikiPage.body) && (
|
||||
<Tab name="Wiki" init={!(posts.length)}>
|
||||
<WikiBody body={wikiPage.body} />
|
||||
<div className="my-2">
|
||||
<Link to={`/wiki/${ wikiPage.title }`}>Wiki を見る</Link>
|
||||
</div>
|
||||
</Tab>)}
|
||||
</TabGroup>
|
||||
</MainArea>
|
||||
</>)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import axios from 'axios'
|
||||
import React, { useEffect, useState, useRef } from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
|
||||
|
||||
import NicoViewer from '@/components/NicoViewer'
|
||||
@@ -49,8 +49,8 @@ export default () => {
|
||||
toast ({ title: '投稿成功!' })
|
||||
navigate ('/posts')
|
||||
})
|
||||
.catch (e => toast ({ title: '投稿失敗',
|
||||
description: '入力を確認してください。' })))
|
||||
.catch (() => toast ({ title: '投稿失敗',
|
||||
description: '入力を確認してください。' })))
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
|
||||
Reference in New Issue
Block a user