|
|
@@ -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"/> |
|
|
|