admin/nahodka-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added edit card and get number

Browse Source
This commit is contained in:
SlimusMinus
2026-05-29 01:16:45 +03:00
parent 684ce8f56b
commit 5198e284a3
6 changed files with 175 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/AdCard.jsx
View File

@@ -4,7 +4,8 @@ import PhoneIcon from "./icons/PhoneIcon";
import MapIcon from "./icons/MapIcon";
import HeartIcon from "./icons/HeartIcon";
export default function AdCard({ ad, liked, onLike }) {
export default function AdCard({ ad, liked, onLike, onEdit }) {
console.log("ad object:", ad);
return (
<div className="f-card">
<div className="f-card-img">
@@ -13,8 +14,8 @@ export default function AdCard({ ad, liked, onLike }) {
: <span className="f-card-emoji">{ad.emoji || "📋"}</span>
}
{ad.category && <div className="f-cat-badge">{ad.category}</div>}
<div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
{ad.type === "loss" ? "Потеря" : "Находка"}
<div className={`f-type-badge ${ad.type === "LOSS" ? "f-type-loss" : "f-type-found"}`}>
{ad.type === "LOSS" ? "Потеря" : "Находка"}
</div>
</div>
<div className="f-card-body">
@@ -37,13 +38,23 @@ export default function AdCard({ ad, liked, onLike }) {
: <span />
}
<span className="f-card-date">{ad.date || ""}</span>
<button
className={`f-like-btn${liked ? " liked" : ""}`}
onClick={e => { e.stopPropagation(); onLike(ad.id); }}
>
<HeartIcon filled={liked} />
{liked ? (ad.likes || 0) + 1 : (ad.likes || 0)}
</button>
<div style={{ display: "flex", gap: 6 }}>
{onEdit && (
<button
className="f-like-btn"
onClick={e => { e.stopPropagation(); onEdit(ad); }}
>
✏️
</button>
)}
<button
className={`f-like-btn${liked ? " liked" : ""}`}
onClick={e => { e.stopPropagation(); onLike(ad.id); }}
>
<HeartIcon filled={liked} />
{liked ? (ad.likes || 0) + 1 : (ad.likes || 0)}
</button>
</div>
</div>
</div>
</div>

57
src/components/PostModal.jsx
View File

@@ -1,13 +1,27 @@
import {useCallback, useState} from "react";
import { useCallback, useState } from "react";
import PinIcon from "./icons/PinIcon";
import CloseIcon from "./icons/CloseIcon";
import { EMPTY_FORM, CATEGORIES } from "../config/feedConstants";
import { useCreatePost } from "../hooks/useCreatePost";
import { useUpdatePost } from "../hooks/useUpdatePost";
export default function PostModal({ onClose, onSuccess, initialData }) {
const isEdit = !!initialData;
const [form, setForm] = useState(isEdit ? {
type: initialData.type || "loss",
title: initialData.title || "",
description: initialData.description || "",
category: initialData.category || "",
date: initialData.date || "",
phone: initialData.phone || "",
} : EMPTY_FORM);
export default function PostModal({ onClose, onSuccess }) {
const [form, setForm] = useState(EMPTY_FORM);
const [errors, setErrors] = useState({});
const { createAd, loading, error: apiError } = useCreatePost();
const { createAd, loading: creating, error: createError } = useCreatePost();
const { updateAd, loading: updating, error: updateError } = useUpdatePost();
const loading = creating || updating;
const apiError = createError || updateError;
const set = useCallback((k, v) => {
setForm(p => ({ ...p, [k]: v }));
@@ -26,9 +40,8 @@ export default function PostModal({ onClose, onSuccess }) {
const handleSubmit = async () => {
if (!validate()) return;
const payload = {
type: form.type, // "loss" | "found"
type: form.type,
title: form.title.trim(),
description: form.description.trim(),
category: form.category,
@@ -36,9 +49,12 @@ export default function PostModal({ onClose, onSuccess }) {
phone: form.phone.trim(),
};
const newAd = await createAd(payload);
if (newAd) {
onSuccess(newAd);
const result = isEdit
? await updateAd(initialData.id, payload)
: await createAd(payload);
if (result) {
onSuccess(result);
onClose();
}
};
@@ -47,17 +63,25 @@ export default function PostModal({ onClose, onSuccess }) {
<div className="f-modal-bg" onClick={e => e.target === e.currentTarget && onClose()}>
<div className="f-modal">
<div className="f-modal-head">
<span className="f-modal-title">Новое объявление</span>
<span className="f-modal-title">
{isEdit ? "Редактировать объявление" : "Новое объявление"}
</span>
<button className="f-close-btn" onClick={onClose}><CloseIcon /></button>
</div>
<div className="f-m-group">
<label className="f-m-label">Тип объявления</label>
<div className="f-type-toggle">
<button className={`f-type-opt${form.type === "loss" ? " loss" : ""}`} onClick={() => set("type", "loss")}>
<button
className={`f-type-opt${form.type === "loss" ? " loss" : ""}`}
onClick={() => set("type", "loss")}
>
Потеря
</button>
<button className={`f-type-opt${form.type === "found" ? " found" : ""}`} onClick={() => set("type", "found")}>
<button
className={`f-type-opt${form.type === "found" ? " found" : ""}`}
onClick={() => set("type", "found")}
>
Находка
</button>
</div>
@@ -100,7 +124,6 @@ export default function PostModal({ onClose, onSuccess }) {
</select>
{errors.category && <p className="f-err-msg">{errors.category}</p>}
</div>
</div>
<div className="f-m-group">
@@ -124,16 +147,12 @@ export default function PostModal({ onClose, onSuccess }) {
{errors.phone && <p className="f-err-msg">{errors.phone}</p>}
</div>
{apiError && (
<p className="f-err-msg" style={{ textAlign: "center", marginBottom: 10 }}>
{apiError}
</p>
)}
{apiError && <p className="f-err-msg">{apiError}</p>}
<button className="f-m-submit" onClick={handleSubmit} disabled={loading}>
<div className="f-m-submit-row">
{loading && <div className="f-m-spinner" />}
{loading ? "Размещаем..." : "Разместить объявление"}
{isEdit ? "Сохранить изменения" : "Разместить объявление"}
</div>
</button>
</div>