Browse Source

#139

pull/252/head
みてるぞ 1 week ago
parent
commit
9004ffb330
2 changed files with 23 additions and 23 deletions
  1. +4
    -9
      frontend/src/pages/posts/PostDetailPage.tsx
  2. +19
    -14
      frontend/src/pages/posts/PostListPage.tsx

+ 4
- 9
frontend/src/pages/posts/PostDetailPage.tsx View File

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async' import { Helmet } from 'react-helmet-async'
import { useLocation, useParams } from 'react-router-dom'
import { useParams } from 'react-router-dom'


import PostEditForm from '@/components/PostEditForm' import PostEditForm from '@/components/PostEditForm'
import PostEmbed from '@/components/PostEmbed' import PostEmbed from '@/components/PostEmbed'
@@ -31,11 +31,6 @@ export default (({ user }: Props) => {
const postId = String (id ?? '') const postId = String (id ?? '')
const postKey = postsKeys.show (postId) const postKey = postsKeys.show (postId)


const location = useLocation ()
const navState = (location.state ?? { }) as { sharedId?: string }

const inboundSharedId = navState.sharedId

const { data: post, isError: errorFlg, error } = useQuery ({ const { data: post, isError: errorFlg, error } = useQuery ({
enabled: Boolean (id), enabled: Boolean (id),
queryKey: postKey, queryKey: postKey,
@@ -112,15 +107,15 @@ export default (({ user }: Props) => {
{post {post
? ( ? (
<> <>
{inboundSharedId === `page-${ id }` && (
{(post.thumbnail || post.thumbnailBase) && (
<motion.div <motion.div
layoutId={inboundSharedId}
layoutId={`page-${ id }`}
className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px] className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
overflow-hidden rounded-xl pointer-events-none z-50" overflow-hidden rounded-xl pointer-events-none z-50"
initial={{ opacity: 1 }} initial={{ opacity: 1 }}
animate={{ opacity: 0 }} animate={{ opacity: 0 }}
transition={{ duration: .2, ease: 'easeOut' }}> transition={{ duration: .2, ease: 'easeOut' }}>
<img src={post.thumbnail || post.thumbnailBase || undefined}
<img src={post.thumbnail || post.thumbnailBase}
alt={post.title || post.url} alt={post.title || post.url}
title={post.title || post.url || undefined} title={post.title || post.url || undefined}
className="object-cover w-full h-full"/> className="object-cover w-full h-full"/>


+ 19
- 14
frontend/src/pages/posts/PostListPage.tsx View File

@@ -15,10 +15,12 @@ import { fetchPosts } from '@/lib/posts'
import { postsKeys } from '@/lib/queryKeys' import { postsKeys } from '@/lib/queryKeys'
import { fetchWikiPageByTitle } from '@/lib/wiki' import { fetchWikiPageByTitle } from '@/lib/wiki'


import type { FC } from 'react'

import type { WikiPage } from '@/types' import type { WikiPage } from '@/types'




export default () => {
export default (() => {
const containerRef = useRef<HTMLDivElement | null> (null) const containerRef = useRef<HTMLDivElement | null> (null)


const [wikiPage, setWikiPage] = useState<WikiPage | null> (null) const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
@@ -41,21 +43,24 @@ export default () => {
const totalPages = data ? Math.ceil (data.count / limit) : 0 const totalPages = data ? Math.ceil (data.count / limit) : 0


useLayoutEffect (() => { useLayoutEffect (() => {
scroll (0, 0)

setWikiPage (null) setWikiPage (null)
if (tags.length === 1)

if (tags.length !== 1)
return

void (async () => {
try
{
const tagName = tags[0]
setWikiPage (await fetchWikiPageByTitle (tagName, { }))
}
catch
{ {
void (async () => {
try
{
const tagName = tags[0]
setWikiPage (await fetchWikiPageByTitle (tagName, { }))
}
catch
{
;
}
}) ()
;
} }
}) ()
}, [location.search]) }, [location.search])


return ( return (
@@ -100,4 +105,4 @@ export default () => {
</TabGroup> </TabGroup>
</MainArea> </MainArea>
</div>) </div>)
}
}) satisfies FC

Loading…
Cancel
Save