99 lines
3.1 KiB
JavaScript
99 lines
3.1 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { API_URL } from "../config/authConstants";
|
|
import { apiFetch } from "../api/apiClient";
|
|
import { useAuthContext } from "../context/AuthContext";
|
|
import { useFavorites } from "../hooks/useFavorites";
|
|
import PostOnFeed from "../pages/PostOnFeed";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
|
|
export default function PostDetailModal({ postId, onClose, onImageClick, onLocationClick, onAuthRequired }) {
|
|
const { t } = useTranslation();
|
|
const { user, isAuthenticated } = useAuthContext();
|
|
const { toggleFavorite } = useFavorites();
|
|
const [post, setPost] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [liked, setLiked] = useState(false);
|
|
const [likeCountAdj, setLikeCountAdj] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (!postId) return;
|
|
let cancelled = false;
|
|
|
|
const fetchPost = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const res = await apiFetch(`${API_URL}/api/v1/posts/detail/${postId}`);
|
|
if (!res.ok) throw new Error("Failed to load post");
|
|
const data = await res.json();
|
|
if (!cancelled) {
|
|
setPost({ ...data, type: data.type ? data.type.toLowerCase() : "loss" });
|
|
setLiked(!!data.liked);
|
|
setLikeCountAdj(0);
|
|
}
|
|
} catch (e) {
|
|
if (!cancelled) setError(e.message);
|
|
} finally {
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchPost();
|
|
return () => { cancelled = true; };
|
|
}, [postId]);
|
|
|
|
const handleLike = async (id) => {
|
|
if (!isAuthenticated) {
|
|
if (onAuthRequired) onAuthRequired();
|
|
return;
|
|
}
|
|
const prev = liked;
|
|
setLiked((v) => !v);
|
|
setLikeCountAdj((v) => (prev ? v - 1 : v + 1));
|
|
const result = await toggleFavorite(id);
|
|
if (!result.success) {
|
|
setLiked(prev);
|
|
setLikeCountAdj((v) => (prev ? v + 1 : v - 1));
|
|
}
|
|
};
|
|
|
|
const isOwner = post && user && (post.authorId === user.id || post.userId === user.id);
|
|
|
|
return (
|
|
<div className="f-modal-bg" onClick={(e) => e.target === e.currentTarget && onClose()}>
|
|
<button type="button" className="f-close-btn f-post-detail-close" onClick={onClose} aria-label={t("common.close")}>
|
|
<CloseIcon />
|
|
</button>
|
|
<div className="f-modal f-post-detail-modal" onClick={(e) => e.stopPropagation()}>
|
|
{loading && (
|
|
<div className="f-post-detail-status">
|
|
<div className="f-spinner" />
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="f-post-detail-status f-post-detail-error">
|
|
{t("common.error")}
|
|
</div>
|
|
)}
|
|
|
|
{post && (
|
|
<PostOnFeed
|
|
ad={post}
|
|
liked={liked}
|
|
likeCountAdj={likeCountAdj}
|
|
onLike={handleLike}
|
|
isOwner={isOwner}
|
|
onImageClick={onImageClick}
|
|
onLocationClick={onLocationClick}
|
|
onAuthRequired={onAuthRequired}
|
|
compact
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|