このコミットが含まれているのは:
@@ -1,34 +1,66 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import PostList from '@/components/PostList'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import { useUserSettings } from '@/components/users/UserSettingsProvider'
|
||||
import TagSidebar from '@/components/TagSidebar'
|
||||
import WikiBody from '@/components/WikiBody'
|
||||
import FormField from '@/components/common/FormField'
|
||||
import Pagination from '@/components/common/Pagination'
|
||||
import TabGroup, { Tab } from '@/components/common/TabGroup'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { fetchPosts } from '@/lib/posts'
|
||||
import { postsKeys } from '@/lib/queryKeys'
|
||||
import { toFetchPostsOrder } from '@/lib/settings'
|
||||
import {
|
||||
DEFAULT_POST_LIST_LIMIT,
|
||||
DEFAULT_POST_LIST_ORDER,
|
||||
getClientListLimit,
|
||||
getClientListOrder,
|
||||
LIST_LIMIT_OPTIONS,
|
||||
POST_LIST_ORDER_OPTIONS,
|
||||
setClientListSettings,
|
||||
} from '@/lib/settings'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
import { fetchWikiPageByTitle } from '@/lib/wiki'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { WikiPage } from '@/types'
|
||||
import type { FetchPostsOrder, WikiPage } from '@/types'
|
||||
|
||||
const postOrderLabel: Record<FetchPostsOrder, string> = {
|
||||
'title:asc': 'タイトル昇順',
|
||||
'title:desc': 'タイトル降順',
|
||||
'url:asc': 'URL 昇順',
|
||||
'url:desc': 'URL 降順',
|
||||
'original_created_at:asc': 'オリジナル投稿日時 昇順',
|
||||
'original_created_at:desc': 'オリジナル投稿日時 降順',
|
||||
'created_at:asc': '投稿日 昇順',
|
||||
'created_at:desc': '投稿日 降順',
|
||||
'updated_at:asc': '更新日 昇順',
|
||||
'updated_at:desc': '更新日 降順',
|
||||
}
|
||||
|
||||
const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
|
||||
const n = Number (value)
|
||||
return n === 20 || n === 50 || n === 100 ? n : null
|
||||
}
|
||||
|
||||
const parseOrder = (value: string | null): FetchPostsOrder | null =>
|
||||
POST_LIST_ORDER_OPTIONS.some (option => option === value)
|
||||
? value as FetchPostsOrder
|
||||
: null
|
||||
|
||||
|
||||
const PostListPage: FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement | null> (null)
|
||||
const { settings } = useUserSettings ()
|
||||
|
||||
const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
|
||||
|
||||
const location = useLocation ()
|
||||
const navigate = useNavigate ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
const tagsQuery = query.get ('tags') ?? ''
|
||||
const anyFlg = query.get ('match') === 'any'
|
||||
@@ -36,8 +68,16 @@ const PostListPage: FC = () => {
|
||||
const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
|
||||
const tagsKey = tags.join (' ')
|
||||
const page = Number (query.get ('page') ?? 1)
|
||||
const limit = Number (query.get ('limit') ?? settings.postListLimit)
|
||||
const order = toFetchPostsOrder (settings.postListOrder)
|
||||
const limit = (
|
||||
parseLimit (query.get ('limit'))
|
||||
?? getClientListLimit ('postList')
|
||||
?? DEFAULT_POST_LIST_LIMIT
|
||||
)
|
||||
const order = (
|
||||
parseOrder (query.get ('order'))
|
||||
?? getClientListOrder<FetchPostsOrder> ('postList')
|
||||
?? DEFAULT_POST_LIST_ORDER
|
||||
)
|
||||
|
||||
const keys = {
|
||||
tags: tagsKey, match, page, limit,
|
||||
@@ -51,6 +91,19 @@ const PostListPage: FC = () => {
|
||||
const cursor = ''
|
||||
const totalPages = data ? Math.ceil (data.count / limit) : 0
|
||||
|
||||
useEffect (() => {
|
||||
setClientListSettings ('postList', { limit, order })
|
||||
}, [limit, order])
|
||||
|
||||
const updateListQuery = (next: { limit?: 20 | 50 | 100
|
||||
order?: FetchPostsOrder }) => {
|
||||
const params = new URLSearchParams (location.search)
|
||||
params.set ('limit', String (next.limit ?? limit))
|
||||
params.set ('order', next.order ?? order)
|
||||
params.set ('page', '1')
|
||||
navigate (`${ location.pathname }?${ params.toString () }`)
|
||||
}
|
||||
|
||||
useLayoutEffect (() => {
|
||||
scroll (0, 0)
|
||||
|
||||
@@ -93,6 +146,38 @@ const PostListPage: FC = () => {
|
||||
}}/>
|
||||
|
||||
<MainArea>
|
||||
<div className="mb-4 flex flex-wrap gap-4 rounded-xl border border-border bg-background/80 p-4">
|
||||
<FormField label="表示件数">
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (false)}
|
||||
value={limit}
|
||||
onChange={ev => updateListQuery ({
|
||||
limit: Number (ev.target.value) as 20 | 50 | 100,
|
||||
})}>
|
||||
{LIST_LIMIT_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{value} 件
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="並び順">
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (false)}
|
||||
value={order}
|
||||
onChange={ev => updateListQuery ({
|
||||
order: ev.target.value as FetchPostsOrder,
|
||||
})}>
|
||||
{POST_LIST_ORDER_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{postOrderLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<TabGroup>
|
||||
<Tab name="広場">
|
||||
{posts.length > 0
|
||||
|
||||
@@ -49,13 +49,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
|
||||
const [title, setTitle] = useState ('')
|
||||
const [titleLoading, setTitleLoading] = useState (false)
|
||||
const [url, setURL] = useState ('')
|
||||
const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
|
||||
const [thumbnailAutoFlg, setThumbnailAutoFlg] =
|
||||
useState (settings.autoFetchThumbnail === 'auto')
|
||||
|
||||
const previousURLRef = useRef ('')
|
||||
const thumbnailPreviewRef = useRef ('')
|
||||
const titleFetchMode = settings.autoFetchTitle
|
||||
const thumbnailFetchMode = settings.autoFetchThumbnail
|
||||
const titleAutoFlg = titleFetchMode === 'auto'
|
||||
const thumbnailAutoFlg = thumbnailFetchMode === 'auto'
|
||||
const titleFetchVisible = titleFetchMode !== 'off'
|
||||
const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
|
||||
const videoFlg =
|
||||
@@ -143,6 +144,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
|
||||
thumbnailPreviewRef.current = thumbnailPreview
|
||||
}, [thumbnailPreview])
|
||||
|
||||
useEffect (() => {
|
||||
setTitleAutoFlg (settings.autoFetchTitle === 'auto')
|
||||
}, [settings.autoFetchTitle])
|
||||
|
||||
useEffect (() => {
|
||||
setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
|
||||
}, [settings.autoFetchThumbnail])
|
||||
|
||||
useEffect (() => {
|
||||
if (titleAutoFlg && url)
|
||||
fetchTitle ()
|
||||
@@ -189,23 +198,33 @@ const PostNewPage: FC<Props> = ({ user }) => {
|
||||
value={title}
|
||||
placeholder={titleLoading ? 'Loading...' : ''}
|
||||
onChange={ev => setTitle (ev.target.value)}
|
||||
disabled={titleAutoFlg}/>
|
||||
disabled={titleLoading}/>
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<span>
|
||||
{titleAutoFlg
|
||||
? 'URL 入力時に自動取得します．'
|
||||
: titleFetchMode === 'manual'
|
||||
? '自動取得しません．必要なら手動で取得できます．'
|
||||
: '取得機能は無効です．'}
|
||||
: '取得機能は無効です．'}
|
||||
</span>
|
||||
{titleFetchVisible && !(titleAutoFlg) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => void fetchTitle ()}
|
||||
disabled={!(url) || titleLoading}>
|
||||
取得
|
||||
</Button>)}
|
||||
{titleFetchVisible && (
|
||||
<>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={titleAutoFlg}
|
||||
onChange={ev => setTitleAutoFlg (ev.target.checked)}/>
|
||||
<span>自動</span>
|
||||
</label>
|
||||
{!(titleAutoFlg) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => void fetchTitle ()}
|
||||
disabled={!(url) || titleLoading}>
|
||||
取得
|
||||
</Button>)}
|
||||
</>)}
|
||||
</div>
|
||||
</div>)}
|
||||
</FormField>
|
||||
@@ -220,16 +239,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
|
||||
? 'URL 入力時に自動取得します．'
|
||||
: thumbnailFetchMode === 'manual'
|
||||
? '自動取得しません．必要なら手動で取得できます．'
|
||||
: '取得機能は無効です．'}
|
||||
: '取得機能は無効です．'}
|
||||
</span>
|
||||
{thumbnailFetchVisible && !(thumbnailAutoFlg) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => void fetchThumbnail ()}
|
||||
disabled={!(url) || thumbnailLoading}>
|
||||
取得
|
||||
</Button>)}
|
||||
{thumbnailFetchVisible && (
|
||||
<>
|
||||
<label className="flex items-center gap-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={thumbnailAutoFlg}
|
||||
onChange={ev => setThumbnailAutoFlg (ev.target.checked)}/>
|
||||
<span>自動</span>
|
||||
</label>
|
||||
{!(thumbnailAutoFlg) && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => void fetchThumbnail ()}
|
||||
disabled={!(url) || thumbnailLoading}>
|
||||
取得
|
||||
</Button>)}
|
||||
</>)}
|
||||
</div>
|
||||
{thumbnailAutoFlg
|
||||
? (thumbnailLoading
|
||||
|
||||
@@ -13,11 +13,18 @@ import PageTitle from '@/components/common/PageTitle'
|
||||
import Pagination from '@/components/common/Pagination'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { useUserSettings } from '@/components/users/UserSettingsProvider'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { fetchPosts } from '@/lib/posts'
|
||||
import { postsKeys } from '@/lib/queryKeys'
|
||||
import { toFetchPostsOrder } from '@/lib/settings'
|
||||
import {
|
||||
DEFAULT_POST_LIST_LIMIT,
|
||||
DEFAULT_POST_LIST_ORDER,
|
||||
getClientListLimit,
|
||||
getClientListOrder,
|
||||
LIST_LIMIT_OPTIONS,
|
||||
POST_LIST_ORDER_OPTIONS,
|
||||
setClientListSettings,
|
||||
} from '@/lib/settings'
|
||||
import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
|
||||
|
||||
import type { FC, FormEvent } from 'react'
|
||||
@@ -33,19 +40,44 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
|
||||
qs.set (k, t)
|
||||
}
|
||||
|
||||
const postOrderLabel: Record<FetchPostsOrder, string> = {
|
||||
'title:asc': 'タイトル昇順',
|
||||
'title:desc': 'タイトル降順',
|
||||
'url:asc': 'URL 昇順',
|
||||
'url:desc': 'URL 降順',
|
||||
'original_created_at:asc': 'オリジナル投稿日時 昇順',
|
||||
'original_created_at:desc': 'オリジナル投稿日時 降順',
|
||||
'created_at:asc': '投稿日 昇順',
|
||||
'created_at:desc': '投稿日 降順',
|
||||
'updated_at:asc': '更新日 昇順',
|
||||
'updated_at:desc': '更新日 降順',
|
||||
}
|
||||
|
||||
const parseLimit = (value: string | null): 20 | 50 | 100 | null => {
|
||||
const n = Number (value)
|
||||
return n === 20 || n === 50 || n === 100 ? n : null
|
||||
}
|
||||
|
||||
const parseOrder = (value: string | null): FetchPostsOrder | null =>
|
||||
POST_LIST_ORDER_OPTIONS.some (option => option === value)
|
||||
? value as FetchPostsOrder
|
||||
: null
|
||||
|
||||
|
||||
const PostSearchPage: FC = () => {
|
||||
const location = useLocation ()
|
||||
const { settings } = useUserSettings ()
|
||||
|
||||
const navigate = useNavigate ()
|
||||
|
||||
const query = useMemo (() => new URLSearchParams (location.search),
|
||||
[location.search])
|
||||
const defaultOrder = toFetchPostsOrder (settings.postListOrder)
|
||||
|
||||
const page = Number (query.get ('page') ?? 1)
|
||||
const limit = Number (query.get ('limit') ?? settings.postListLimit)
|
||||
const limit = (
|
||||
parseLimit (query.get ('limit'))
|
||||
?? getClientListLimit ('postSearch')
|
||||
?? DEFAULT_POST_LIST_LIMIT
|
||||
)
|
||||
|
||||
const qURL = query.get ('url') ?? ''
|
||||
const qTitle = query.get ('title') ?? ''
|
||||
@@ -57,7 +89,11 @@ const PostSearchPage: FC = () => {
|
||||
const qCreatedTo = query.get ('created_to') ?? ''
|
||||
const qUpdatedFrom = query.get ('updated_from') ?? ''
|
||||
const qUpdatedTo = query.get ('updated_to') ?? ''
|
||||
const order = (query.get ('order') || defaultOrder) as FetchPostsOrder
|
||||
const order = (
|
||||
parseOrder (query.get ('order'))
|
||||
?? getClientListOrder<FetchPostsOrder> ('postSearch')
|
||||
?? DEFAULT_POST_LIST_ORDER
|
||||
)
|
||||
|
||||
const [createdFrom, setCreatedFrom] = useState<string | null> (null)
|
||||
const [createdTo, setCreatedTo] = useState<string | null> (null)
|
||||
@@ -87,6 +123,10 @@ const PostSearchPage: FC = () => {
|
||||
const results = data?.posts ?? []
|
||||
const totalPages = data ? Math.ceil (data.count / limit) : 0
|
||||
|
||||
useEffect (() => {
|
||||
setClientListSettings ('postSearch', { limit, order })
|
||||
}, [limit, order])
|
||||
|
||||
useEffect (() => {
|
||||
setURL (qURL ?? '')
|
||||
setTitle (qTitle ?? '')
|
||||
@@ -117,6 +157,16 @@ const PostSearchPage: FC = () => {
|
||||
qs.set ('match', matchType)
|
||||
qs.set ('page', '1')
|
||||
qs.set ('order', order)
|
||||
qs.set ('limit', String (limit))
|
||||
navigate (`${ location.pathname }?${ qs.toString () }`)
|
||||
}
|
||||
|
||||
const updateListQuery = (next: { limit?: 20 | 50 | 100
|
||||
order?: FetchPostsOrder }) => {
|
||||
const qs = new URLSearchParams (location.search)
|
||||
qs.set ('limit', String (next.limit ?? limit))
|
||||
qs.set ('order', next.order ?? order)
|
||||
qs.set ('page', '1')
|
||||
navigate (`${ location.pathname }?${ qs.toString () }`)
|
||||
}
|
||||
|
||||
@@ -141,6 +191,38 @@ const PostSearchPage: FC = () => {
|
||||
<PageTitle>広場検索</PageTitle>
|
||||
|
||||
<form onSubmit={handleSearch} className="space-y-2">
|
||||
<div className="grid gap-3 rounded-xl border border-border bg-background/80 p-3 sm:grid-cols-2">
|
||||
<FormField label="表示件数">
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (false)}
|
||||
value={limit}
|
||||
onChange={ev => updateListQuery ({
|
||||
limit: Number (ev.target.value) as 20 | 50 | 100,
|
||||
})}>
|
||||
{LIST_LIMIT_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{value} 件
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="並び順">
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (false)}
|
||||
value={order}
|
||||
onChange={ev => updateListQuery ({
|
||||
order: ev.target.value as FetchPostsOrder,
|
||||
})}>
|
||||
{POST_LIST_ORDER_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{postOrderLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* タイトル */}
|
||||
<FormField label="タイトル">
|
||||
{({ invalid }) => (
|
||||
@@ -165,6 +247,7 @@ const PostSearchPage: FC = () => {
|
||||
<FormField label="タグ">
|
||||
{() => (
|
||||
<TagInput
|
||||
includeNico={true}
|
||||
value={tagsStr}
|
||||
setValue={setTagsStr}/>)}
|
||||
</FormField>
|
||||
@@ -302,11 +385,7 @@ const PostSearchPage: FC = () => {
|
||||
{results.map (row => (
|
||||
<tr
|
||||
key={row.id}
|
||||
className={
|
||||
settings.viewedPostDisplay === 'dim' && row.viewed
|
||||
? 'even:bg-gray-100 opacity-40 saturate-50 dark:even:bg-gray-700'
|
||||
: 'even:bg-gray-100 dark:even:bg-gray-700'
|
||||
}>
|
||||
className="even:bg-gray-100 dark:even:bg-gray-700">
|
||||
<td className="p-2">
|
||||
<PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
|
||||
<motion.div
|
||||
|
||||
新しい課題から参照
ユーザをブロックする