added card on post and feed

src/components/CreateUpdatePost.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import {useCallback, useEffect, useState} from "react";
 import PinIcon from "./icons/PinIcon";
 import CloseIcon from "./icons/CloseIcon";
 import { EMPTY_FORM, CATEGORIES } from "../config/feedConstants";
@@ -6,6 +6,7 @@ import { usePostMutation } from "../hooks/usePostMutation";
 import { useImageUpload, ACCEPT } from "../hooks/useImageUpload";
 import { validatePostForm } from "../utils/validatePostForm";
 import { formatPhone } from "../utils/formatPhone";
+import { useYandexMap } from "../hooks/useYandexMap";
 import { API_URL } from "../config/authConstants";
 
 const MAX_SIZE_MB = 5;
@@ -31,6 +32,7 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
             category:    initialData.category    || "",
             date:        initialData.date        || "",
             phone:       initialData.phone       || "",
+            address:     initialData.city        || ""
           }
           : EMPTY_FORM
   );
@@ -57,6 +59,24 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
   // Единый хук для создания и обновления
   const { save, loading: saving, error: apiError } = usePostMutation();
 
+  // Внутри компонента, рядом с другими хуками
+  const initialCoords = isEdit && initialData.latitude && initialData.longitude
+      ? { latitude: initialData.latitude, longitude: initialData.longitude }
+      : null;
+
+// CreateUpdatePost.jsx
+  const { mapRef, coords, address, addressRef } = useYandexMap(
+      true,
+      initialCoords,
+      isEdit ? (initialData.location || "") : ""
+  );
+  // После объявления хука useYandexMap:
+  useEffect(() => {
+    if (address) {
+      setForm(prev => ({ ...prev, address }));
+      setErrors(prev => ({ ...prev, address: "" }));
+    }
+  }, [address]);
   // Единый флаг загрузки — блокирует кнопку отправки
   const loading = saving || compressing;
 
@@ -74,6 +94,11 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
       return;
     }
 
+    if (coords && !addressRef.current) {
+      setErrors(prev => ({ ...prev, map: "Подождите, адрес загружается..." }));
+      return;
+    }
+
     const data = new FormData();
     data.append("type",        form.type);
     data.append("title",       form.title.trim());
@@ -83,6 +108,17 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
     if (form.date) data.append("date",  form.date);
     if (imageFile) data.append("image", imageFile);
 
+    if (coords) {
+      data.append("latitude",  coords.latitude);
+      data.append("longitude", coords.longitude);
+      data.append("address",   form.address.trim()); // ← из поля формы
+    }
+
+// Адрес без координат тоже отправляем:
+    if (!coords && form.address.trim()) {
+      data.append("address", form.address.trim());
+    }
+
     // save(id, data): id = null → POST (создание), id = string → PUT (обновление)
     const result = await save(isEdit ? initialData.id : null, data);
     if (result) {
@@ -102,7 +138,7 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
             {isEdit ? "Редактировать объявление" : "Новое объявление"}
           </span>
             <button className="f-close-btn" onClick={onClose}>
-              <CloseIcon />
+              <CloseIcon/>
             </button>
           </div>
 
@@ -117,7 +153,8 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
                 Потеря
               </button>
               <button
-                  className={`f-type-opt${form.type === "found" ? " found" : ""}`}
+                  className={`f-type-opt${form.type === "found" ? " found"
+                      : ""}`}
                   onClick={() => set("type", "found")}
               >
                 Находка
@@ -148,7 +185,8 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
                 value={form.description}
                 onChange={e => set("description", e.target.value)}
             />
-            {errors.description && <p className="f-err-msg">{errors.description}</p>}
+            {errors.description && <p
+                className="f-err-msg">{errors.description}</p>}
           </div>
 
           {/* Фотография: превью + удаление или загрузчик */}
@@ -156,24 +194,27 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
             <label className="f-m-label">Фотография</label>
             {displayImage ? (
                 <div className="f-img-preview-wrap">
-                  <img src={displayImage} alt="preview" className="f-img-preview" />
+                  <img src={displayImage} alt="preview"
+                       className="f-img-preview"/>
                   <button
                       className="f-img-remove"
                       onClick={removeImage}
                       type="button"
                       aria-label="Удалить фото"
                   >
-                    <CloseIcon />
+                    <CloseIcon/>
                   </button>
                 </div>
             ) : (
-                <label className="f-img-upload-label" aria-disabled={compressing}>
+                <label className="f-img-upload-label"
+                       aria-disabled={compressing}>
                   <input
                       ref={fileInputRef}
                       type="file"
                       accept={ACCEPT}
                       // На мобильных открываем камеру напрямую
-                      capture={/Mobi|Android|iPhone/i.test(navigator.userAgent) ? "environment" : undefined}
+                      capture={/Mobi|Android|iPhone/i.test(navigator.userAgent)
+                          ? "environment" : undefined}
                       onChange={handleFileChange}
                       className="f-img-input"
                       disabled={compressing}
@@ -197,18 +238,38 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
                 <option value="">Выбрать...</option>
                 {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
               </select>
-              {errors.category && <p className="f-err-msg">{errors.category}</p>}
+              {errors.category && <p
+                  className="f-err-msg">{errors.category}</p>}
             </div>
           </div>
 
-          {/* Карта — заглушка, будет в следующей версии */}
+          {/* Карта */}
           <div className="f-m-group">
             <label className="f-m-label">Место на карте</label>
-            <div className="f-map-pick">
-              <PinIcon size={14} />
-              Нажмите, чтобы отметить место
+            <div style={{
+              width: "100%",
+              height: 260,
+              borderRadius: 8,
+              overflow: "hidden"
+            }}>
+              <div ref={mapRef} style={{width: "100%", height: "100%"}}/>
             </div>
-            <p className="f-hint">Карта будет добавлена в следующей версии</p>
+
+            {!coords && <p className="f-hint">Нажмите на карту, чтобы отметить
+              место</p>}
+            {errors.map && <p className="f-err-msg">{errors.map}</p>}
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Адрес</label>
+            <input
+                className={`f-m-field${errors.address ? " err" : ""}`}
+                type="text"
+                placeholder="Например: Москва, ул. Ленина, 5"
+                value={form.address}
+                onChange={e => set("address", e.target.value)}
+            />
+            {errors.address && <p className="f-err-msg">{errors.address}</p>}
           </div>
 
           {/* Телефон с автоматической маской */}
@@ -227,9 +288,10 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
           {/* Глобальная ошибка API (не связана с конкретным полем) */}
           {apiError && <p className="f-err-msg">{apiError}</p>}
 
-          <button className="f-m-submit" onClick={handleSubmit} disabled={loading}>
+          <button className="f-m-submit" onClick={handleSubmit}
+                  disabled={loading}>
             <div className="f-m-submit-row">
-              {loading && <div className="f-m-spinner" />}
+              {loading && <div className="f-m-spinner"/>}
               {isEdit ? "Сохранить изменения" : "Разместить объявление"}
             </div>
           </button>