Merge pull request #22 from SlimusMinus/found_post

added status found on post
This commit is contained in:
SlimusMinus
2026-06-25 00:51:56 +03:00
committed by GitHub
3 changed files with 71 additions and 4 deletions

View File

@@ -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 === "Мои объявления"}
/> />
)); ));

View File

@@ -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();
@@ -30,9 +30,12 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, isOwne
const createdAt = ad.createdAt const createdAt = ad.createdAt
? 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} />

View File

@@ -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 {