Browse Source

#140

pull/254/head
みてるぞ 1 week ago
parent
commit
a751add415
3 changed files with 34 additions and 43 deletions
  1. +6
    -2
      frontend/src/lib/api.ts
  2. +4
    -0
      frontend/src/lib/queryKeys.ts
  3. +24
    -41
      frontend/src/pages/wiki/WikiDetailPage.tsx

+ 6
- 2
frontend/src/lib/api.ts View File

@@ -3,10 +3,10 @@ import toCamel from 'camelcase-keys'


import { API_BASE_URL } from '@/config' import { API_BASE_URL } from '@/config'


import type { AxiosError } from 'axios'
import type { AxiosError, AxiosRequestConfig } from 'axios'


type Opt = { type Opt = {
params?: Record<string, unknown>
params?: AxiosRequestConfig['params']
headers?: Record<string, string> headers?: Record<string, string>
responseType?: 'blob' } responseType?: 'blob' }


@@ -26,6 +26,8 @@ const apiP = async <T> (
opt?: Opt, opt?: Opt,
): Promise<T> => { ): Promise<T> => {
const res = await client[method] (path, body ?? { }, withUserCode (opt)) const res = await client[method] (path, body ?? { }, withUserCode (opt))
if (opt?.responseType === 'blob')
return res.data as T
return toCamel (res.data as any, { deep: true }) as T return toCamel (res.data as any, { deep: true }) as T
} }


@@ -35,6 +37,8 @@ export const apiGet = async <T> (
opt?: Opt, opt?: Opt,
): Promise<T> => { ): Promise<T> => {
const res = await client.get (path, withUserCode (opt)) const res = await client.get (path, withUserCode (opt))
if (opt?.responseType === 'blob')
return res.data as T
return toCamel (res.data as any, { deep: true }) as T return toCamel (res.data as any, { deep: true }) as T
} }




+ 4
- 0
frontend/src/lib/queryKeys.ts View File

@@ -7,6 +7,10 @@ export const postsKeys = {
changes: (p: { id?: string; page: number; limit: number }) => changes: (p: { id?: string; page: number; limit: number }) =>
['posts', 'changes', p] as const } ['posts', 'changes', p] as const }


export const tagsKeys = {
root: ['tags'] as const,
show: (name: string) => ['tags', name] as const }

export const wikiKeys = { export const wikiKeys = {
root: ['wiki'] as const, root: ['wiki'] as const,
index: (p: { title: string }) => ['wiki', 'index', p] as const, index: (p: { title: string }) => ['wiki', 'index', p] as const,


+ 24
- 41
frontend/src/pages/wiki/WikiDetailPage.tsx View File

@@ -1,5 +1,5 @@
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { useEffect, useState } from 'react'
import { useEffect, useMemo } from 'react'
import { Helmet } from 'react-helmet-async' import { Helmet } from 'react-helmet-async'
import { useLocation, useNavigate, useParams } from 'react-router-dom' import { useLocation, useNavigate, useParams } from 'react-router-dom'


@@ -13,11 +13,11 @@ import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config' import { SITE_TITLE } from '@/config'
import { WikiIdBus } from '@/lib/eventBus/WikiIdBus' import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
import { fetchPosts } from '@/lib/posts' import { fetchPosts } from '@/lib/posts'
import { wikiKeys } from '@/lib/queryKeys'
import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
import { fetchTagByName } from '@/lib/tags' import { fetchTagByName } from '@/lib/tags'
import { fetchWikiPage, fetchWikiPageByTitle } from '@/lib/wiki' import { fetchWikiPage, fetchWikiPageByTitle } from '@/lib/wiki'


import type { Post, Tag } from '@/types'
import type { Tag } from '@/types'




export default () => { export default () => {
@@ -27,10 +27,7 @@ export default () => {
const location = useLocation () const location = useLocation ()
const navigate = useNavigate () const navigate = useNavigate ()


const defaultTag = { name: title, category: 'general' } as Tag

const [posts, setPosts] = useState<Post[]> ([])
const [tag, setTag] = useState (defaultTag)
const defaultTag = useMemo (() => ({ name: title, category: 'general' } as Tag), [title])


const query = new URLSearchParams (location.search) const query = new URLSearchParams (location.search)
const version = query.get ('version') const version = query.get ('version')
@@ -40,6 +37,19 @@ export default () => {
queryKey: wikiKeys.show (title ?? '', version ? { version } : { }), queryKey: wikiKeys.show (title ?? '', version ? { version } : { }),
queryFn: () => fetchWikiPageByTitle (title ?? '', version ? { version } : { }) }) queryFn: () => fetchWikiPageByTitle (title ?? '', version ? { version } : { }) })


const effectiveTitle = wikiPage?.title ?? title

const { data: tag } = useQuery ({
enabled: Boolean (effectiveTitle),
queryKey: tagsKeys.show (effectiveTitle),
queryFn: () => fetchTagByName (effectiveTitle) })

const { data } = useQuery ({
enabled: Boolean (effectiveTitle) && !(version),
queryKey: postsKeys.index ({ tags: effectiveTitle, match: 'all', page: 1, limit: 8 }),
queryFn: () => fetchPosts ({ tags: effectiveTitle, match: 'all', page: 1, limit: 8 }) })
const posts = data?.posts || []

useEffect (() => { useEffect (() => {
if (!(wikiPage)) if (!(wikiPage))
return return
@@ -53,48 +63,20 @@ export default () => {
}, [wikiPage, title, navigate]) }, [wikiPage, title, navigate])


useEffect (() => { useEffect (() => {
if (/^\d+$/.test (title))
{
void (async () => {
try
{
const data = await fetchWikiPage (title, { })
navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
}
catch
{
;
}
}) ()

return
}
if (!(/^\d+$/.test (title)))
return


setPosts ([])
void (async () => { void (async () => {
try try
{ {
const data = await fetchPosts ({ tags: title, match: 'all', limit: 8 })
setPosts (data.posts)
const data = await fetchWikiPage (title, { })
navigate (`/wiki/${ encodeURIComponent(data.title) }`, { replace: true })
} }
catch catch
{ {
; ;
} }
}) () }) ()

void (async () => {
try
{
setTag (await fetchTagByName (title))
}
catch
{
setTag (defaultTag)
}
}) ()

return () => WikiIdBus.set (null)
}, [title, version]) }, [title, version])


return ( return (
@@ -105,7 +87,8 @@ export default () => {
</Helmet> </Helmet>


{(wikiPage && version) && ( {(wikiPage && version) && (
<div className="text-sm flex gap-3 items-center justify-center border border-gray-700 rounded px-2 py-1 mb-4">
<div className="text-sm flex gap-3 items-center justify-center
border border-gray-700 rounded px-2 py-1 mb-4">
{wikiPage.pred ? ( {wikiPage.pred ? (
<PrefetchLink to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.pred }`}> <PrefetchLink to={`/wiki/${ encodeURIComponent (title) }?version=${ wikiPage.pred }`}>
&lt; 古 &lt; 古
@@ -120,7 +103,7 @@ export default () => {
</div>)} </div>)}


<PageTitle> <PageTitle>
<TagLink tag={tag}
<TagLink tag={tag ?? defaultTag}
withWiki={false} withWiki={false}
withCount={false} withCount={false}
{...(version && { to: `/wiki/${ encodeURIComponent (title) }` })}/> {...(version && { to: `/wiki/${ encodeURIComponent (title) }` })}/>


Loading…
Cancel
Save