added status found on post
This commit is contained in:
@@ -13,6 +13,7 @@ import RulesModal from "./RulesModal";
|
|||||||
import { useAuthContext } from "../context/AuthContext";
|
import { useAuthContext } from "../context/AuthContext";
|
||||||
import { useDeletePost } from "../hooks/useDeletePost";
|
import { useDeletePost } from "../hooks/useDeletePost";
|
||||||
import { useFavorites } from "../hooks/useFavorites";
|
import { useFavorites } from "../hooks/useFavorites";
|
||||||
|
import { usePostStatus } from "../hooks/usePostStatus";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* MainFeed — корневой компонент приложения.
|
* MainFeed — корневой компонент приложения.
|
||||||
@@ -24,6 +25,7 @@ export default function MainFeed() {
|
|||||||
const { user, token, isAuthenticated, logout } = useAuthContext();
|
const { user, token, isAuthenticated, logout } = useAuthContext();
|
||||||
const { deletePost } = useDeletePost();
|
const { deletePost } = useDeletePost();
|
||||||
const { toggleFavorite, loadFavorites } = useFavorites();
|
const { toggleFavorite, loadFavorites } = useFavorites();
|
||||||
|
const { markAsFound } = usePostStatus();
|
||||||
|
|
||||||
// Открыт ли левый сайдбар (мобильный слайд-аут)
|
// Открыт ли левый сайдбар (мобильный слайд-аут)
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
@@ -172,6 +174,19 @@ export default function MainFeed() {
|
|||||||
}
|
}
|
||||||
}, [deletePost, loadFeed, loadMyPosts]);
|
}, [deletePost, loadFeed, loadMyPosts]);
|
||||||
|
|
||||||
|
/** Отмечает объявление как "Вещь найдена" и перезагружает ленту */
|
||||||
|
const handleMarkFound = useCallback(async (postId) => {
|
||||||
|
if (!window.confirm("Отметить это объявление как \"Вещь найдена\"?")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const success = await markAsFound(postId, token);
|
||||||
|
if (success) {
|
||||||
|
loadFeed();
|
||||||
|
loadMyPosts();
|
||||||
|
}
|
||||||
|
}, [markAsFound, token, loadFeed, loadMyPosts]);
|
||||||
|
|
||||||
// После создания или редактирования объявления перезагружаем ленту,
|
// После создания или редактирования объявления перезагружаем ленту,
|
||||||
// чтобы получить актуальные данные (включая изображения) из БД
|
// чтобы получить актуальные данные (включая изображения) из БД
|
||||||
const handleNewAd = useCallback(() => { loadFeed(); loadMyPosts(); }, [loadFeed, loadMyPosts]);
|
const handleNewAd = useCallback(() => { loadFeed(); loadMyPosts(); }, [loadFeed, loadMyPosts]);
|
||||||
@@ -283,6 +298,7 @@ export default function MainFeed() {
|
|||||||
onLike={toggleLike}
|
onLike={toggleLike}
|
||||||
onEdit={activeNav === "Мои объявления" ? handleEdit : undefined}
|
onEdit={activeNav === "Мои объявления" ? handleEdit : undefined}
|
||||||
onDelete={activeNav === "Мои объявления" ? handleDelete : undefined}
|
onDelete={activeNav === "Мои объявления" ? handleDelete : undefined}
|
||||||
|
onMarkFound={activeNav === "Мои объявления" ? handleMarkFound : undefined}
|
||||||
isOwner={activeNav === "Мои объявления"}
|
isOwner={activeNav === "Мои объявления"}
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { useChats } from "../hooks/useChats";
|
|||||||
import { useAuthContext } from "../context/AuthContext";
|
import { useAuthContext } from "../context/AuthContext";
|
||||||
import { API_URL } from "../config/authConstants";
|
import { API_URL } from "../config/authConstants";
|
||||||
|
|
||||||
export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, isOwner }) {
|
export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMarkFound, isOwner }) {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { createOrGetChat } = useChats();
|
const { createOrGetChat } = useChats();
|
||||||
const { isAuthenticated } = useAuthContext();
|
const { isAuthenticated } = useAuthContext();
|
||||||
@@ -31,8 +31,11 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, isOwne
|
|||||||
? new Date(ad.createdAt).toLocaleDateString("ru-RU")
|
? new Date(ad.createdAt).toLocaleDateString("ru-RU")
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
|
// Проверяем, закрыт ли пост (вещь найдена)
|
||||||
|
const isClosed = ad.status === 'CLOSED';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="f-card">
|
<div className={`f-card${isClosed ? ' f-card-closed' : ''}`}>
|
||||||
<div className="f-card-inner">
|
<div className="f-card-inner">
|
||||||
<div className="f-card-img">
|
<div className="f-card-img">
|
||||||
{imageUrl
|
{imageUrl
|
||||||
@@ -46,6 +49,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, isOwne
|
|||||||
<div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
|
<div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
|
||||||
{ad.type === "loss" ? "Потеря" : "Находка"}
|
{ad.type === "loss" ? "Потеря" : "Находка"}
|
||||||
</div>
|
</div>
|
||||||
|
{isClosed && <div className="f-status-badge f-status-closed">✓ Найдено</div>}
|
||||||
</div>
|
</div>
|
||||||
<div className="f-card-title">{ad.title}</div>
|
<div className="f-card-title">{ad.title}</div>
|
||||||
<div className="f-card-desc">{ad.description}</div>
|
<div className="f-card-desc">{ad.description}</div>
|
||||||
@@ -70,12 +74,12 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, isOwne
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="f-card-foot-right">
|
<div className="f-card-foot-right">
|
||||||
{isAuthenticated && !isOwner && (
|
{isAuthenticated && !isOwner && !isClosed && (
|
||||||
<button className="f-card-contact" onClick={handleContact}>
|
<button className="f-card-contact" onClick={handleContact}>
|
||||||
Написать
|
Написать
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{onEdit && isOwner && (
|
{onEdit && isOwner && !isClosed && (
|
||||||
<button className="f-card-edit-btn"
|
<button className="f-card-edit-btn"
|
||||||
onClick={e => { e.stopPropagation(); onEdit(ad); }}>
|
onClick={e => { e.stopPropagation(); onEdit(ad); }}>
|
||||||
✏️
|
✏️
|
||||||
@@ -87,6 +91,12 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, isOwne
|
|||||||
<TrashIcon />
|
<TrashIcon />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
{onMarkFound && isOwner && !isClosed && (
|
||||||
|
<button className="f-card-found-btn"
|
||||||
|
onClick={e => { e.stopPropagation(); onMarkFound(ad.id); }}>
|
||||||
|
✓ Вещь найдена
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button className={`f-like-btn${liked ? " liked" : ""}`}
|
<button className={`f-like-btn${liked ? " liked" : ""}`}
|
||||||
onClick={e => { e.stopPropagation(); onLike(ad.id); }}>
|
onClick={e => { e.stopPropagation(); onLike(ad.id); }}>
|
||||||
<HeartIcon filled={liked} />
|
<HeartIcon filled={liked} />
|
||||||
|
|||||||
@@ -39,6 +39,15 @@
|
|||||||
.f-type-loss { background: rgba(255,107,107,.2); color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }
|
.f-type-loss { background: rgba(255,107,107,.2); color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }
|
||||||
.f-type-found { background: rgba(45,224,200,.2); color: #2de0c8; border: 1px solid rgba(45,224,200,.3); }
|
.f-type-found { background: rgba(45,224,200,.2); color: #2de0c8; border: 1px solid rgba(45,224,200,.3); }
|
||||||
|
|
||||||
|
/* Status badge for closed/found posts */
|
||||||
|
.f-status-badge {
|
||||||
|
border-radius: 20px; padding: 3px 10px;
|
||||||
|
font-size: .72rem; font-weight: 900;
|
||||||
|
}
|
||||||
|
.f-status-closed {
|
||||||
|
background: rgba(72,187,120,.2); color: #48bb78; border: 1px solid rgba(72,187,120,.3);
|
||||||
|
}
|
||||||
|
|
||||||
/* Body */
|
/* Body */
|
||||||
.f-card-body {
|
.f-card-body {
|
||||||
flex: 1; padding: 14px 16px;
|
flex: 1; padding: 14px 16px;
|
||||||
@@ -93,6 +102,23 @@
|
|||||||
border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08);
|
border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Closed/Found card styling */
|
||||||
|
.f-card-closed {
|
||||||
|
opacity: 0.7;
|
||||||
|
border-color: rgba(72,187,120,.3);
|
||||||
|
}
|
||||||
|
.f-card-closed:hover {
|
||||||
|
border-color: rgba(72,187,120,.5);
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
.f-card-closed .f-card-img {
|
||||||
|
filter: grayscale(0.5);
|
||||||
|
}
|
||||||
|
.f-card-closed .f-card-title {
|
||||||
|
text-decoration: line-through;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
/* Edit & Delete buttons */
|
/* Edit & Delete buttons */
|
||||||
.f-card-edit-btn,
|
.f-card-edit-btn,
|
||||||
.f-card-delete-btn {
|
.f-card-delete-btn {
|
||||||
@@ -109,6 +135,21 @@
|
|||||||
border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08);
|
border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Mark as Found button */
|
||||||
|
.f-card-found-btn {
|
||||||
|
display: flex; align-items: center; gap: 5px;
|
||||||
|
background: rgba(72,187,120,.1); border: 1px solid rgba(72,187,120,.3);
|
||||||
|
border-radius: 20px; padding: 5px 11px;
|
||||||
|
cursor: pointer; transition: all .2s;
|
||||||
|
font-family: var(--font); font-size: .75rem; font-weight: 700;
|
||||||
|
color: #48bb78;
|
||||||
|
}
|
||||||
|
.f-card-found-btn:hover {
|
||||||
|
background: rgba(72,187,120,.2); border-color: rgba(72,187,120,.5);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(72,187,120,.2);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
/* Карточка становится вертикальной */
|
/* Карточка становится вертикальной */
|
||||||
.f-card-inner {
|
.f-card-inner {
|
||||||
|
|||||||
Reference in New Issue
Block a user