added feed

src/components/PostModal.jsx

@@ -0,0 +1,157 @@
+import {useCallback, useState} from "react";
+import {API_URL} from "../config/constants";
+import PinIcon from "./icons/PinIcon";
+import CloseIcon from "./icons/CloseIcon";
+import { EMPTY_FORM, CATEGORIES } from "../config/feedConstants";
+
+export default function PostModal({ onClose, onSuccess }) {
+  const [form, setForm] = useState(EMPTY_FORM);
+  const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [apiError, setApiError] = useState("");
+
+  const set = useCallback((k, v) => {
+    setForm(p => ({ ...p, [k]: v }));
+    setErrors(p => ({ ...p, [k]: "" }));
+    setApiError("");
+  }, []);
+
+  const validate = () => {
+    const e = {};
+    if (!form.title.trim())       e.title       = "Введите название";
+    if (!form.description.trim()) e.description = "Введите описание";
+    if (!form.category)           e.category    = "Выберите категорию";
+    if (!form.phone.trim())       e.phone       = "Введите номер телефона";
+    setErrors(e);
+    return !Object.keys(e).length;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    setApiError("");
+    try {
+      const res = await fetch(`${API_URL}/api/ads`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.message || `Ошибка ${res.status}`);
+      }
+      const newAd = await res.json();
+      onSuccess(newAd);
+      onClose();
+    } catch (err) {
+      setApiError(err.message || "Не удалось разместить объявление");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+      <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>
+            <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>
+              <button className={`f-type-opt${form.type === "found" ? " found" : ""}`} onClick={() => set("type", "found")}>
+                Находка
+              </button>
+            </div>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Название</label>
+            <input
+                className={`f-m-field${errors.title ? " err" : ""}`}
+                type="text"
+                placeholder="Например: Кошелёк чёрный кожаный"
+                value={form.title}
+                onChange={e => set("title", e.target.value)}
+            />
+            {errors.title && <p className="f-err-msg">{errors.title}</p>}
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Описание</label>
+            <textarea
+                className={`f-m-field${errors.description ? " err" : ""}`}
+                rows={3}
+                placeholder="Подробно опишите предмет — цвет, размер, особые приметы..."
+                value={form.description}
+                onChange={e => set("description", e.target.value)}
+            />
+            {errors.description && <p className="f-err-msg">{errors.description}</p>}
+          </div>
+
+          <div className="f-m-row">
+            <div className="f-m-group">
+              <label className="f-m-label">Категория</label>
+              <select
+                  className={`f-m-field${errors.category ? " err" : ""}`}
+                  value={form.category}
+                  onChange={e => set("category", e.target.value)}
+              >
+                <option value="">Выбрать...</option>
+                {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
+              </select>
+              {errors.category && <p className="f-err-msg">{errors.category}</p>}
+            </div>
+            <div className="f-m-group">
+              <label className="f-m-label">Дата события</label>
+              <input
+                  className="f-m-field"
+                  type="date"
+                  value={form.date}
+                  onChange={e => set("date", e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Место на карте</label>
+            <div className="f-map-pick">
+              <PinIcon size={14} />
+              Нажмите, чтобы отметить место
+            </div>
+            <p className="f-hint">Карта будет добавлена в следующей версии</p>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Номер телефона</label>
+            <input
+                className={`f-m-field${errors.phone ? " err" : ""}`}
+                type="tel"
+                placeholder="+7 (___) ___-__-__"
+                value={form.phone}
+                onChange={e => set("phone", e.target.value)}
+            />
+            {errors.phone && <p className="f-err-msg">{errors.phone}</p>}
+          </div>
+
+          {apiError && (
+              <p className="f-err-msg" style={{ textAlign: "center", marginBottom: 10 }}>
+                {apiError}
+              </p>
+          )}
+
+          <button className="f-m-submit" onClick={handleSubmit} disabled={loading}>
+            <div className="f-m-submit-row">
+              {loading && <div className="f-m-spinner" />}
+              {loading ? "Размещаем..." : "Разместить объявление"}
+            </div>
+          </button>
+        </div>
+      </div>
+  );
+}