72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
import { PostsService } from '../posts/postsService.ts'
|
|
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
|
|
import NavBar from '../../../components/NavBar.tsx'
|
|
import AuthNavButtons from '../../auth/components/AuthNavButtons.tsx'
|
|
import PostItem from '../components/PostItem.tsx'
|
|
import NavButton from '../../../components/buttons/NavButton.tsx'
|
|
import { useTranslations } from '../../i18n/translations.ts'
|
|
import { usePostViewModel } from '../posts/usePostViewModel.ts'
|
|
import { Temporal } from '@js-temporal/polyfill'
|
|
import { useUserStore } from '../../user/user.ts'
|
|
|
|
interface PostPageProps {
|
|
postsService: PostsService
|
|
}
|
|
|
|
export default function PostPage({ postsService }: PostPageProps) {
|
|
const { postId } = useParams<{ postId: string }>()
|
|
const { posts, setPosts, addReaction, reactions, removeReaction } = usePostViewModel()
|
|
const { t } = useTranslations()
|
|
const username = useUserStore((state) => state.user?.username)
|
|
|
|
const post = posts.at(0)
|
|
|
|
useEffect(() => {
|
|
if (!postId) return
|
|
postsService.load(postId).then((post) => setPosts(post ? [post] : []))
|
|
}, [postId, postsService, setPosts])
|
|
|
|
const onAddReaction = async (emoji: string) => {
|
|
if (!username) return
|
|
if (!post) return
|
|
|
|
await postsService.addReaction(post.postId, emoji)
|
|
|
|
addReaction(post.postId, emoji, username, Temporal.Now.instant())
|
|
}
|
|
|
|
const onClearReaction = async (emoji: string) => {
|
|
if (!username) return
|
|
if (!post) return
|
|
|
|
await postsService.removeReaction(post.postId, emoji)
|
|
removeReaction(post.postId, emoji, username)
|
|
}
|
|
|
|
return (
|
|
<SingleColumnLayout
|
|
navbar={
|
|
<NavBar>
|
|
<NavButton to={{ pathname: '/' }}>{t('nav.home')}</NavButton>
|
|
<AuthNavButtons />
|
|
</NavBar>
|
|
}
|
|
>
|
|
<main className="w-full max-w-3xl mx-auto">
|
|
{post && (
|
|
<div className="w-full">
|
|
<PostItem
|
|
post={post}
|
|
reactions={reactions[post.postId] ?? []}
|
|
addReaction={onAddReaction}
|
|
clearReaction={onClearReaction}
|
|
hideViewButton={true}
|
|
/>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</SingleColumnLayout>
|
|
)
|
|
}
|